diff --git a/static/404.html b/static/404.html
index 05bf6a2..bfc07c8 100644
--- a/static/404.html
+++ b/static/404.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
+    <link rel="stylesheet" type="text/css" href="css/colors.css"/>
     <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
     <link rel="manifest" href="manifest.json"/>
     <script src="js/download.js"></script>
diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..65bd95a
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,57 @@
+@media not all and (prefers-color-scheme: dark) {
+    :root {
+        color-scheme: light;
+        --success-primary: #060;
+        --success-secondary: #0a0;
+        --failure-primary: #d00;
+        --failure-secondary: #f24;
+        --progress-primary: #27f;
+        --progress-secondary: #48f;
+        --progress-tertiary: #7af;
+        --border: #ddd;
+        --border-active: #777;
+        --icon-primary: #333;
+        --icon-primary-active: #000;
+        --icon-secondary: #888;
+        --icon-warning: #f00;
+        --icon-ready: #33f;
+        --icon-ready-active: #00b;
+        --icon-unavailable: #999;
+        --button-text: #000;
+        --button-background: #ccc;
+        --button-background-active: #aaa;
+        --button-border: #bbb;
+        --button-disabled-text: #666;
+        --button-disabled-background: #eee;
+        --button-disabled-border: #ddd;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        color-scheme: dark;
+        --success-primary: #0d0;
+        --success-secondary: #080;
+        --failure-primary: #f34;
+        --failure-secondary: #a00;
+        --progress-primary: #37f;
+        --progress-secondary: #25d;
+        --progress-tertiary: #36c;
+        --border: #555;
+        --border-active: #999;
+        --icon-primary: #bbb;
+        --icon-primary-active: #fff;
+        --icon-secondary: #777;
+        --icon-warning: #f00;
+        --icon-ready: #35f;
+        --icon-ready-active: #47f;
+        --icon-unavailable: #444;
+        --button-text: #fff;
+        --button-background: #444;
+        --button-background-active: #666;
+        --button-border: #666;
+        --button-disabled-text: #888;
+        --button-disabled-background: #222;
+        --button-disabled-border: #333;
+    }
+}
diff --git a/static/css/states.css b/static/css/states.css
index 165854f..7dd95d7 100644
--- a/static/css/states.css
+++ b/static/css/states.css
@@ -25,13 +25,13 @@ body.uploads_closed #upload { display: none; }
 #message { display: none; }
 body.completed #message {
     display: revert;
-    color: #060;
-    border-color: #0a0;
+    color: var(--success-primary);
+    border-color: var(--success-secondary);
 }
 body.error #message {
     display: revert;
-    color: #d00;
-    border-color: #f24;
+    color: var(--failure-primary);
+    border-color: var(--failure-secondary);
 }
 
 #upload_password_form { display: none; }
@@ -49,7 +49,7 @@ body.selecting #download_code_container { display: none; }
 body.uploading #progress_container { display: revert; }
 
 body.no_files #file_list { display: none; }
-body.completed #file_list { background-color: #7af; }
+body.completed #file_list { background-color: var(--progress-tertiary); }
 
 .delete_button { display: none; }
 body.selecting .delete_button { display: revert; }
diff --git a/static/css/transbeam.css b/static/css/transbeam.css
index f3a3b9e..7f582ae 100644
--- a/static/css/transbeam.css
+++ b/static/css/transbeam.css
@@ -9,7 +9,6 @@ body {
 
 #header h1 {
     margin-top: 5px;
-    color: black;
 }
 
 #header a {
@@ -52,14 +51,14 @@ body {
 #progress_bar {
     height: 20px;
     border-radius: 10px;
-    border: 1px solid #48f;
-    background-image: linear-gradient(0deg, #27f, #27f);
+    border: 1px solid var(--progress-secondary);
+    background-image: linear-gradient(0deg, var(--progress-primary), var(--progress-primary));
     background-repeat: no-repeat;
     background-size: 0;
 }
 
 #download_code_container {
-    border: 1px solid #ddd;
+    border: 1px solid var(--border);
     border-radius: 4px;
     padding: 10px;
     cursor: pointer;
@@ -69,7 +68,7 @@ body {
 }
 
 #download_code_container:hover {
-    border-color: #777;
+    border-color: var(--border-active);
 }
 
 #download_code_main {
@@ -81,14 +80,14 @@ body {
 .copy_button {
     width: 18px;
     height: 18px;
-    background-color: #333;
+    background-color: var(--icon-primary);
     mask-image: url("../images/feather-icons/copy.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
 }
 
 #download_code_container:hover .copy_button {
-    background-color: #000;
+    background-color: var(--icon-primary-active);
 }
 
 #copied_message {
@@ -117,13 +116,13 @@ table {
 }
 
 tr {
-    background-image: linear-gradient(0deg, #7af, #7af);
+    background-image: linear-gradient(0deg, var(--progress-tertiary), var(--progress-tertiary));
     background-repeat: no-repeat;
     background-size: 0;
 }
 
 tr + tr td {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border);
 }
 
 td {
@@ -143,7 +142,7 @@ tr.unavailable td.file_download {
 }
 
 .delete_button {
-    background-color: #888;
+    background-color: var(--icon-secondary);
     mask-image: url("../images/feather-icons/x.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
@@ -154,7 +153,7 @@ tr.unavailable td.file_download {
 }
 
 .delete_button:hover {
-    background-color: #f00;
+    background-color: var(--icon-warning);
 }
 
 #download_toplevel {
@@ -203,7 +202,7 @@ td.file_download {
 }
 
 .download_button {
-    background-color: #33f;
+    background-color: var(--icon-ready);
     mask-image: url("../images/feather-icons/download.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
@@ -214,7 +213,7 @@ td.file_download {
 }
 
 .download_button:hover {
-    background-color: #00b;
+    background-color: var(--icon-ready-active);
 }
 
 summary {
@@ -222,7 +221,7 @@ summary {
 }
 
 .file_unavailable {
-    background-color: #999;
+    background-color: var(--icon-unavailable);
     mask-image: url("../images/feather-icons/clock.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
@@ -250,9 +249,9 @@ input[type="file"] {
 
 button, .fake_button, input[type="submit"] {
     font-size: 18px;
-    color: #000;
-    background-color: #ccc;
-    border: 1px solid #bbb;
+    color: var(--button-text);
+    background-color: var(--button-background);
+    border: 1px solid var(--button-border);
     border-radius: 4px;
     padding: 6px 12px;
     cursor: pointer;
@@ -260,13 +259,13 @@ button, .fake_button, input[type="submit"] {
 }
 
 button:hover, .fake_button:hover, input[type="submit"]:hover {
-    background-color: #aaa;
+    background-color: var(--button-background-active);
 }
 
 button:disabled, input:disabled + .fake_button, input[type="submit"]:disabled {
-    color: #666;
-    background-color: #eee;
-    border-color: #ddd;
+    color: var(--button-disabled-text);
+    background-color: var(--button-disabled-background);
+    border-color: var(--button-disabled-border);
     cursor: not-allowed;
 }
 
diff --git a/static/index.html b/static/index.html
index e7d56d6..3719884 100644
--- a/static/index.html
+++ b/static/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
     <link rel="stylesheet" type="text/css" href="css/states.css"/>
+    <link rel="stylesheet" type="text/css" href="css/colors.css"/>
     <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
     <link rel="manifest" href="manifest.json"/>
     <script src="js/util.js"></script>
diff --git a/templates/download.html b/templates/download.html
index a4c5b67..a834c2a 100644
--- a/templates/download.html
+++ b/templates/download.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
+    <link rel="stylesheet" type="text/css" href="css/colors.css"/>
     <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
     <link rel="manifest" href="manifest.json"/>
     <script src="js/util.js"></script>