diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css
new file mode 100644
index 0000000..9ff7523
--- /dev/null
+++ b/app/static/css/dark-theme.css
@@ -0,0 +1,90 @@
+@media (prefers-color-scheme: dark) {
+    .white {
+        background-color: #111 !important;
+        color: #fff;
+    }
+    
+    .blue.darken-3 {
+        background-color: #1E5DA6 !important;
+    }
+    
+
+    .btn-switch-type {
+        background-color: #333;
+        color: #5CA8FF;
+    }
+    .btn-switch-type:hover {
+        background-color: #444 !important;
+        color: #5CA8FF;
+    }
+    
+    .btn-switch-type.active {
+        background-color: #3392FF !important;
+        color: #fff;
+    }
+    .btn-switch-type.active:hover {
+        background-color: #5CA8FF !important;
+        color: #fff;
+    }
+    
+    
+    select {
+        color: #fff;
+    }
+
+
+    textarea {
+        border: 1px solid #444 !important;
+        background-color: #222 !important;
+        color: #fff;
+    }
+    
+    .code {
+        border: 1px solid #444;
+        background: #222;
+        color: #fff;
+    }
+    code[class*="language-"], pre[class*="language-"] {
+        color: #fff;
+        text-shadow: 0 1px #000;
+    }
+    
+    
+    .token.atrule,
+    .token.attr-value,
+    .token.keyword {
+        color: #40b5e8;
+    }
+    
+    .language-css .token.string,
+    .style .token.string,
+    .token.entity,
+    .token.operator,
+    .token.url {
+        color: #eecfab;
+        background: hsla(0,0%,15%,.5);
+    }
+    
+    .token.attr-name,
+    .token.builtin,
+    .token.char,
+    .token.inserted,
+    .token.selector,
+    .token.string {
+        color: #acd25f;
+    }
+    
+    .token.boolean,
+    .token.constant,
+    .token.deleted,
+    .token.number,
+    .token.property,
+    .token.symbol,
+    .token.tag {
+        color: #ff8bcc;
+    }
+    
+    .token.class-name, .token.function {
+        color: #ff7994;
+    }
+}