diff --git a/core/templates/base.html b/core/templates/base.html
index 3e9cc15..844a664 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -120,12 +120,37 @@
         cursor:pointer;
         background-color:rgba(221, 224, 255, 0.3) !important;
       }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --background-color: rgba(84, 84, 84, 0.9) !important;
+          --modal-color: rgba(81, 81, 81, 0.9) !important;
+        }
+      }
+
+      :root {
+        --background-color-light: rgba(210, 210, 210, 0.9) !important;
+        --background-color-dark: rgba(84, 84, 84, 0.9) !important;
+        --background-color-modal-light: rgba(250, 250, 250, 0.5) !important;
+        --background-color-modal-dark: rgba(210, 210, 210, 0.9) !important;
+      }
+
+      [data-theme="light"] {
+        --background-color: var(--background-color-light);
+        --modal-color: var(--background-color-modal-light);
+      }
+
+      [data-theme="dark"] {
+        --background-color: var(--background-color-dark);
+        --modal-color: var(--background-color-modal-dark);
+      }
 
       .panel, .box, .modal {
-        background-color:rgba(250, 250, 250, 0.5) !important;
+        /* background-color:rgba(250, 250, 250, 0.5) !important; */
+        background-color: var(--modal-color) !important;
       }
       .modal, .modal.box{
-        background-color:rgba(210, 210, 210, 0.9) !important;
+        /* background-color:rgba(210, 210, 210, 0.9) !important; */
+        background-color: var(--background-color) !important;
       }
       .modal-background{
         background-color:rgba(255, 255, 255, 0.3) !important;
diff --git a/requirements.txt b/requirements.txt
index 8c6ba78..16e9f2e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,7 +2,7 @@ wheel
 uwsgi
 django
 pre-commit
-django-crispy-forms==1.14.0
+django-crispy-forms
 crispy-bulma
 # stripe
 django-rest-framework