diff --git a/dist/dl/microbin.css b/dist/dl/microbin.css
index ff3cf7f..cb05fe3 100644
--- a/dist/dl/microbin.css
+++ b/dist/dl/microbin.css
@@ -22,7 +22,32 @@
     --highlight: #ff0;
     --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    :root {
+      --background-body: #141b23;
+      --background: #222f3a;
+      --background-alt: #1a242f;
+      --selection: #f9e2af;
+      --text-main: #dbdbdb;
+      --text-bright: #1e1e2e;
+      --text-muted: #a9b1ba;
+      --links: #f9e2af;
+      --focus: #f9e2af;
+      --border: #526980;
+      --code: #ffbe85;
+      --animation-duration: 0.1s;
+      --button-base: #0c151c;
+      --button-hover: #040a0f;
+      --scrollbar-thumb: var(--button-hover);
+      --scrollbar-thumb-hover: #000;
+      --form-placeholder: #a9a9a9;
+      --form-text: #1e1e2e;
+      --variable: #d941e2;
+      --highlight: #efdb43;
+      --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
+    }
+  }
   
   html {
     scrollbar-color: #aaa #1e1e2e;
@@ -30,6 +55,13 @@
     scrollbar-width: thin
   }
   
+  @media (prefers-color-scheme:dark) {
+    html {
+      scrollbar-color: #040a0f #202b38;
+      scrollbar-color: var(--scrollbar-thumb) var(--background-body)
+    }
+  }
+  
   body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif;
     line-height: 1.4;
@@ -44,11 +76,27 @@
     text-rendering: optimizeLegibility
   }
   
+  @media (prefers-color-scheme:dark) {
+    body {
+      background: #202b38;
+      background: var(--background-body);
+      color: #dbdbdb;
+      color: var(--text-main)
+    }
+  }
+  
   button {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
   }
   
+  @media (prefers-color-scheme:dark) {
+    button {
+      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
+      transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
+    }
+  }
+  
   input {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
@@ -61,11 +109,24 @@
     color: white;
 }
   
+  @media (prefers-color-scheme:dark) {
+    input {
+      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
+      transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
+    }
+  }
+  
   textarea {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    textarea {
+      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
+      transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
+    }
+  }
   
   h1 {
     font-size: 2.2em;
@@ -86,41 +147,85 @@
     color: #000;
     color: var(--text-bright)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    h1 {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
   
   h2 {
     color: #000;
     color: var(--text-bright)
   }
   
+  @media (prefers-color-scheme:dark) {
+    h2 {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
+  
   h3 {
     color: #000;
     color: var(--text-bright)
   }
   
+  @media (prefers-color-scheme:dark) {
+    h3 {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
   
   h4 {
     color: #000;
     color: var(--text-bright)
   }
   
+  @media (prefers-color-scheme:dark) {
+    h4 {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
   
   h5 {
     color: #000;
     color: var(--text-bright)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    h5 {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
   
   h6 {
     color: #000;
     color: var(--text-bright)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    h6 {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
+  
   strong {
     color: #000;
     color: var(--text-bright)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    strong {
+      color: #1e1e2e;
+      color: var(--text-bright)
+    }
+  }
   
   b,
   h1,
@@ -147,7 +252,12 @@
     font-style: italic
   }
   
-
+  @media (prefers-color-scheme:dark) {
+    blockquote {
+      border-left: 4px solid #418ed1;
+      border-left: 4px solid var(--focus)
+    }
+  }
   
   q {
     border-left: 4px solid #418ed1;
@@ -157,7 +267,12 @@
     font-style: italic
   }
   
-
+  @media (prefers-color-scheme:dark) {
+    q {
+      border-left: 4px solid #418ed1;
+      border-left: 4px solid var(--focus)
+    }
+  }
   
   blockquote>footer {
     font-style: normal;
@@ -189,6 +304,12 @@
     color: #000
   }
   
+  @media (prefers-color-scheme:dark) {
+    mark {
+      background-color: #efdb43;
+      background-color: var(--highlight)
+    }
+  }
   
   a>code,
   a>strong {
@@ -231,6 +352,14 @@
     outline: none
   }
   
+  @media (prefers-color-scheme:dark) {
+    input {
+      background-color: #161f27;
+      background-color: var(--background);
+      color: #1e1e2e;
+      color: var(--form-text)
+    }
+  }
   
   button {
     color: #1d1d1d;
@@ -247,6 +376,15 @@
     outline: none
   }
   
+  @media (prefers-color-scheme:dark) {
+    button {
+      background-color: #161f27;
+      background-color: var(--background);
+      color: #1e1e2e;
+      color: var(--form-text)
+    }
+  }
+  
   textarea {
     color: #1d1d1d;
     color: var(--form-text);
@@ -262,6 +400,15 @@
     outline: none
   }
   
+  @media (prefers-color-scheme:dark) {
+    textarea {
+      background-color: #161f27;
+      background-color: var(--background);
+      color: #1e1e2e;
+      color: var(--form-text)
+    }
+  }
+  
   select {
     color: #1d1d1d;
     color: var(--form-text);
@@ -277,13 +424,28 @@
     outline: none
   }
   
+  @media (prefers-color-scheme:dark) {
+    select {
+      background-color: #161f27;
+      background-color: var(--background);
+      color: #1e1e2e;
+      color: var(--form-text)
+    }
+  }
+  
   button {
     background-color: #d0cfcf;
     background-color: var(--button-base);
     padding-right: 30px;
     padding-left: 30px
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    button {
+      background-color: #0c151c;
+      background-color: var(--button-base)
+    }
+  }
   
   input[type=submit] {
     background-color: #d0cfcf;
@@ -291,43 +453,90 @@
     padding-right: 30px;
     padding-left: 30px
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    input[type=submit] {
+      background-color: #0c151c;
+      background-color: var(--button-base)
+    }
+  }
   
   input[type=reset] {
     background-color: #d0cfcf;
     background-color: var(--button-base);
     padding-right: 30px;
     padding-left: 30px
-
+  }
+  
+  @media (prefers-color-scheme:dark) {
+    input[type=reset] {
+      background-color: #0c151c;
+      background-color: var(--button-base)
+    }
+  }
+  
   input[type=button] {
     background-color: #d0cfcf;
     background-color: var(--button-base);
     padding-right: 30px;
     padding-left: 30px
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    input[type=button] {
+      background-color: #0c151c;
+      background-color: var(--button-base)
+    }
+  }
   
   button:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    button:hover {
+      background: #040a0f;
+      background: var(--button-hover)
+    }
+  }
+  
   input[type=submit]:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=submit]:hover {
+      background: #040a0f;
+      background: var(--button-hover)
+    }
+  }
   
   input[type=reset]:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=reset]:hover {
+      background: #040a0f;
+      background: var(--button-hover)
+    }
+  }
+  
   input[type=button]:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=button]:hover {
+      background: #040a0f;
+      background: var(--button-hover)
+    }
+  }
+  
   input[type=color] {
     min-height: 2rem;
     padding: 8px;
@@ -383,7 +592,13 @@
     background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;
     padding-right: 35px
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    select {
+      background: #161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
+      background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat
+    }
+  }
   
   select::-ms-expand {
     display: none
@@ -400,23 +615,48 @@
     box-shadow: 0 0 0 2px var(--focus)
   }
   
+  @media (prefers-color-scheme:dark) {
+    input:focus {
+      box-shadow: 0 0 0 2px #418ed1;
+      box-shadow: 0 0 0 2px var(--focus)
+    }
+  }
+  
   select:focus {
     box-shadow: 0 0 0 2px #418ed1;
     box-shadow: 0 0 0 2px var(--focus)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    select:focus {
+      box-shadow: 0 0 0 2px #418ed1;
+      box-shadow: 0 0 0 2px var(--focus)
+    }
+  }
   
   button:focus {
     box-shadow: 0 0 0 2px #418ed1;
     box-shadow: 0 0 0 2px var(--focus)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    button:focus {
+      box-shadow: 0 0 0 2px #418ed1;
+      box-shadow: 0 0 0 2px var(--focus)
+    }
+  }
   
   textarea:focus {
     box-shadow: 0 0 0 2px #418ed1;
     box-shadow: 0 0 0 2px var(--focus)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    textarea:focus {
+      box-shadow: 0 0 0 2px #418ed1;
+      box-shadow: 0 0 0 2px var(--focus)
+    }
+  }
   
   button:active,
   input[type=button]:active,
@@ -456,6 +696,28 @@
     color: var(--form-placeholder)
   }
   
+  @media (prefers-color-scheme:dark) {
+    ::-moz-placeholder {
+      color: #a9a9a9;
+      color: var(--form-placeholder)
+    }
+  
+    :-ms-input-placeholder {
+      color: #a9a9a9;
+      color: var(--form-placeholder)
+    }
+  
+    ::-ms-input-placeholder {
+      color: #a9a9a9;
+      color: var(--form-placeholder)
+    }
+  
+    ::placeholder {
+      color: #a9a9a9;
+      color: var(--form-placeholder)
+    }
+  }
+  
   fieldset {
     border: 1px solid #418ed1;
     border: 1px solid var(--focus);
@@ -464,6 +726,12 @@
     padding: 10px
   }
   
+  @media (prefers-color-scheme:dark) {
+    fieldset {
+      border: 1px solid #418ed1;
+      border: 1px solid var(--focus)
+    }
+  }
   
   legend {
     font-size: .9em;
@@ -489,6 +757,14 @@
     background: var(--background);
     border-radius: 3px
   }
+  
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-webkit-slider-runnable-track {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
+  
   input[type=range]::-webkit-slider-thumb {
     box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
     height: 20px;
@@ -500,12 +776,24 @@
     margin-top: -7px
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-webkit-slider-thumb {
+      background: #526980;
+      background: var(--border)
+    }
+  }
   
   input[type=range]:focus::-webkit-slider-runnable-track {
     background: #efefef;
     background: var(--background)
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=range]:focus::-webkit-slider-runnable-track {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   input[type=range]::-moz-range-track {
     width: 100%;
@@ -517,6 +805,13 @@
     border-radius: 3px
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-moz-range-track {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
+  
   input[type=range]::-moz-range-thumb {
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
     height: 20px;
@@ -526,6 +821,13 @@
     background: var(--border)
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-moz-range-thumb {
+      background: #526980;
+      background: var(--border)
+    }
+  }
+  
   input[type=range]::-ms-track {
     width: 100%;
     height: 9.5px;
@@ -543,6 +845,12 @@
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-ms-fill-lower {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   input[type=range]::-ms-fill-upper {
     background: #efefef;
@@ -552,6 +860,13 @@
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
   }
   
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-ms-fill-upper {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
+  
   input[type=range]::-ms-thumb {
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
     border: 1px solid #000;
@@ -561,27 +876,51 @@
     background: #dbdbdb;
     background: var(--border)
   }
-
+  
+  @media (prefers-color-scheme:dark) {
+    input[type=range]::-ms-thumb {
+      background: #526980;
+      background: var(--border)
+    }
+  }
+  
   input[type=range]:focus::-ms-fill-lower {
     background: #efefef;
     background: var(--background)
   }
   
-
+  @media (prefers-color-scheme:dark) {
+    input[type=range]:focus::-ms-fill-lower {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   input[type=range]:focus::-ms-fill-upper {
     background: #efefef;
     background: var(--background)
   }
   
-
+  @media (prefers-color-scheme:dark) {
+    input[type=range]:focus::-ms-fill-upper {
+      background: #161f27;
+      background: var(--background)
+    }
+  }
+  
   a {
     text-decoration: none;
     color: #0076d1;
     color: var(--links)
   }
   
-
+  @media (prefers-color-scheme:dark) {
+    a {
+      color: #41adff;
+      color: var(--links)
+    }
+  }
+  
   a:hover {
     text-decoration: underline
   }
@@ -596,6 +935,14 @@
     font-size: 1em
   }
   
+  @media (prefers-color-scheme:dark) {
+    code {
+      color: #ffbe85;
+      color: var(--code);
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   samp {
     background: #efefef;
@@ -607,6 +954,14 @@
     font-size: 1em
   }
   
+  @media (prefers-color-scheme:dark) {
+    samp {
+      color: #ffbe85;
+      color: var(--code);
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   time {
     background: #efefef;
@@ -618,6 +973,14 @@
     font-size: 1em
   }
   
+  @media (prefers-color-scheme:dark) {
+    time {
+      color: #ffbe85;
+      color: var(--code);
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   pre>code {
     padding: 10px;
@@ -632,6 +995,12 @@
     font-family: monospace
   }
   
+  @media (prefers-color-scheme:dark) {
+    var {
+      color: #d941e2;
+      color: var(--variable)
+    }
+  }
   
   kbd {
     background: #efefef;
@@ -644,6 +1013,16 @@
     padding: 2px 4px
   }
   
+  @media (prefers-color-scheme:dark) {
+    kbd {
+      color: #dbdbdb;
+      color: var(--text-main);
+      border: 1px solid #526980;
+      border: 1px solid var(--border);
+      background: #161f27;
+      background: var(--background)
+    }
+  }
   
   img,
   video {
@@ -657,6 +1036,12 @@
     border-top: 1px solid var(--border)
   }
   
+  @media (prefers-color-scheme:dark) {
+    hr {
+      border-top: 1px solid #526980;
+      border-top: 1px solid var(--border)
+    }
+  }
   
   table {
     border-collapse: collapse;
@@ -683,12 +1068,24 @@
     border-bottom: 1px solid var(--border)
   }
   
+  @media (prefers-color-scheme:dark) {
+    thead {
+      border-bottom: 1px solid #526980;
+      border-bottom: 1px solid var(--border)
+    }
+  }
   
   tfoot {
     border-top: 1px solid #dbdbdb;
     border-top: 1px solid var(--border)
   }
   
+  @media (prefers-color-scheme:dark) {
+    tfoot {
+      border-top: 1px solid #526980;
+      border-top: 1px solid var(--border)
+    }
+  }
   
   tbody tr:nth-child(2n) {
     background-color: #efefef;
diff --git a/public/dl/microbin.css b/public/dl/microbin.css
index 5f500a3..096b2f1 100644
--- a/public/dl/microbin.css
+++ b/public/dl/microbin.css
@@ -10,7 +10,7 @@
     --links: #f9e2af;
     --focus: #f9e2af;
     --border: #dbdbdb;
-    --code: #000;
+    --code: #7f849c;
     --animation-duration: 0.1s;
     --button-base: #d0cfcf;
     --button-hover: #9b9b9b;
@@ -96,6 +96,21 @@
       transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
     }
   }
+  @media (prefers-color-scheme:dark) {
+    input#submit-button {
+      width: 140px; 
+      float: right; 
+      background-color: #fab387; 
+      color: white;
+    }
+  }
+
+  input#submit-button {
+    width: 140px; 
+    float: right; 
+    background-color: #fab387; 
+    color: white;
+  }
   
   input {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;