diff --git a/web/src/css/codemirror.less b/web/src/css/codemirror.less
index 5764be2e7..a6a6bd642 100644
--- a/web/src/css/codemirror.less
+++ b/web/src/css/codemirror.less
@@ -1,4 +1,4 @@
 .CodeMirror {
-    border: 1px solid #ccc;
+    border: 1px solid var(--mitmweb-border);
     height: auto !important;
 }
diff --git a/web/src/css/command.less b/web/src/css/command.less
index 8803f6e71..855dbd93e 100644
--- a/web/src/css/command.less
+++ b/web/src/css/command.less
@@ -1,23 +1,19 @@
 .command-title {
-    background-color: #f2f2f2;
-    border: 1px solid #aaa;
+    background-color: var(--mitmweb-bg-alt);
+    border: 1px solid var(--mitmweb-border-strong);
 }
 
 .command-result {
     display: block;
     margin: 0px;
-    background-color: #fcfcfc;
+    background-color: var(--mitmweb-bg);
     height: 100px;
     max-height: 100px;
     overflow: auto;
 }
 
-.command-suggestion {
-    background-color: #9c9c9c;
-}
-
 .argument-suggestion {
-    background-color: hsla(209, 52%, 84%, 0.5) !important;
+    background-color: var(--mitmweb-highlight) !important;
 }
 
 .command > .popover {
diff --git a/web/src/css/contentview.less b/web/src/css/contentview.less
index 043ab6293..fac83b83e 100644
--- a/web/src/css/contentview.less
+++ b/web/src/css/contentview.less
@@ -5,11 +5,11 @@
         margin: 0 0 10px;
         font-size: 13px;
         line-height: 1.42857143;
-        color: #333;
+        color: var(--mitmweb-fg);
         word-break: break-all;
         word-wrap: break-word;
-        background-color: #f5f5f5;
-        border: 1px solid #ccc;
+        background-color: var(--mitmweb-bg-alt);
+        border: 1px solid var(--mitmweb-border);
         border-radius: 4px;
         overflow: auto;
     }
diff --git a/web/src/css/dropdown.less b/web/src/css/dropdown.less
index 5c56754a7..d2cf69606 100644
--- a/web/src/css/dropdown.less
+++ b/web/src/css/dropdown.less
@@ -11,9 +11,8 @@
     list-style: none;
     font-size: 14px;
     text-align: left;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, 15%);
+    background-color: var(--mitmweb-bg);
+    border: 1px solid var(--mitmweb-border);
     border-radius: 4px;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
     background-clip: padding-box;
@@ -31,7 +30,7 @@
         clear: both;
         font-weight: 400;
         line-height: 1.42857143;
-        color: #333;
+        color: var(--mitmweb-fg);
         white-space: nowrap;
         text-decoration: none;
     }
@@ -39,8 +38,8 @@
     > li > a:hover,
     > li > a:focus {
         text-decoration: none;
-        color: #262626;
-        background-color: #f5f5f5;
+        color: var(--mitmweb-fg-strong);
+        background-color: var(--mitmweb-bg-muted);
     }
 
     max-height: 250px;
@@ -51,5 +50,5 @@
     height: 1px;
     margin: 9px 0;
     overflow: hidden;
-    background-color: #e5e5e5;
+    background-color: var(--mitmweb-border-lighter);
 }
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less
index 4b1ad4acd..5b25e8642 100644
--- a/web/src/css/eventlog.less
+++ b/web/src/css/eventlog.less
@@ -6,10 +6,10 @@
     flex-direction: column;
 
     > div {
-        background-color: #f2f2f2;
+        background-color: var(--mitmweb-bg-alt);
         padding: 0 5px;
         flex: 0 0 auto;
-        border-top: 1px solid #aaa;
+        border-top: 1px solid var(--mitmweb-border-strong);
         cursor: row-resize;
     }
 
@@ -20,7 +20,7 @@
         border-radius: 0;
         overflow-x: auto;
         overflow-y: scroll;
-        background-color: #fcfcfc;
+        background-color: var(--mitmweb-bg);
     }
 
     .eventlog-actions {
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 5ef27ce01..87c4844c4 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -5,7 +5,7 @@
     flex-direction: column;
 
     nav {
-        background-color: #f2f2f2;
+        background-color: var(--mitmweb-bg-alt);
     }
 
     section {
@@ -39,7 +39,7 @@
 
     .first-line {
         font-family: @font-family-monospace;
-        background-color: #428bca;
+        background-color: var(--mitmweb-accent);
         color: white;
         margin: 0 -8px 2px;
         padding: 4px 8px;
@@ -71,7 +71,7 @@
 
     hr {
         border: 0;
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--mitmweb-border-lighter);
         margin: 0;
     }
 }
@@ -128,7 +128,7 @@
     word-break: break-all;
 
     tr:not(:first-child) td {
-        border-top: 1px solid #f7f7f7;
+        border-top: 1px solid var(--mitmweb-border-lighter);
     }
 
     td {
@@ -163,12 +163,12 @@
     }
 
     .inline-input {
-        background-color: white;
+        background-color: var(--mitmweb-bg);
     }
 
     .kv-add-row {
         opacity: 0;
-        color: #666;
+        color: var(--mitmweb-fg-muted);
         position: absolute;
         bottom: 4px;
         right: 4px;
diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index ff2a9a2e1..6436ca5e1 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -20,8 +20,8 @@
     }
 
     thead tr {
-        background-color: #f2f2f2;
-        border-bottom: solid #bebebe 1px;
+        background-color: var(--mitmweb-bg-alt);
+        border-bottom: solid var(--mitmweb-border) 1px;
         line-height: 23px;
     }
 
@@ -59,30 +59,32 @@
         cursor: pointer;
 
         & {
-            background-color: hsl(0, 0%, 100%);
+            background-color: var(--mitmweb-bg);
             &:nth-child(even) {
-                background-color: hsl(0, 0%, 95%);
+                background-color: var(--mitmweb-bg-alt);
             }
         }
 
         &.highlighted {
-            background-color: hsl(48, 100%, 80%);
+            background-color: var(--mitmweb-row-highlight);
             &:nth-child(even) {
-                background-color: hsl(48, 100%, 75%);
+                background-color: var(--mitmweb-row-highlight-alt);
             }
         }
 
         &.selected {
-            background-color: hsl(209, 51%, 92%) !important;
+            background-color: var(--mitmweb-row-selected) !important;
             &:nth-child(even) {
-                background-color: hsl(209, 51%, 86%) !important;
+                background-color: var(--mitmweb-row-selected-alt) !important;
             }
         }
 
         &.selected.highlighted {
-            background-color: hsl(209, 96%, 74%) !important;
+            background-color: var(--mitmweb-row-selected-highlight) !important;
             &:nth-child(even) {
-                background-color: hsl(209, 96%, 68%) !important;
+                background-color: var(
+                    --mitmweb-row-selected-highlight-alt
+                ) !important;
             }
         }
     }
diff --git a/web/src/css/global.less b/web/src/css/global.less
index 9edb35bf0..e72f3afb2 100644
--- a/web/src/css/global.less
+++ b/web/src/css/global.less
@@ -1,3 +1,72 @@
+// Semantic color tokens.
+// Light values below are byte-equal to the literals they replace, so this change is visually a no-op.
+// A future dark theme overrides these under a `[data-theme="dark"]` selector; colors that LESS functions
+// (lighten/darken/fadeout) consume are left as literals here because those functions cannot operate on var().
+:root {
+    // Surfaces
+    --mitmweb-bg: #fff;
+    --mitmweb-bg-alt: #f2f2f2;
+    --mitmweb-bg-muted: #eee;
+    --mitmweb-bg-hover: #e6e6e6;
+    --mitmweb-bg-active: #e5e5e5;
+
+    // Text
+    --mitmweb-fg: #333;
+    --mitmweb-fg-input: #555;
+    --mitmweb-fg-muted: #777;
+    --mitmweb-fg-strong: #000;
+
+    // Neutral gray (muted border + text)
+    --mitmweb-gray: #b2b2b2;
+
+    // Green (mode left border)
+    --mitmweb-green: #77c77a;
+
+    // Borders
+    --mitmweb-border: #ccc;
+    --mitmweb-border-light: #ddd;
+    --mitmweb-border-lighter: #e5e5e5;
+    --mitmweb-border-strong: #adadad;
+
+    // Accent (primary)
+    --mitmweb-accent: #337ab7;
+    --mitmweb-accent-hover: #23527c;
+    --mitmweb-accent-active: #286090;
+    --mitmweb-accent-border: #2e6da4;
+    --mitmweb-accent-border-active: #204d74;
+    --mitmweb-focus-ring: #66afe9;
+
+    // State — solid backgrounds
+    --mitmweb-info: #5bc0de;
+    --mitmweb-info-hover: #31b0d5;
+    --mitmweb-info-border: #46b8da;
+    --mitmweb-info-border-hover: #269abc;
+    --mitmweb-success: #5cb85c;
+    --mitmweb-danger: #d9534f;
+    --mitmweb-warning: #f0ad4e;
+
+    // State — text
+    --mitmweb-text-success: #3c763d;
+    --mitmweb-text-info: #31708f;
+    --mitmweb-text-warning: #8a6d3b;
+    --mitmweb-text-danger: #a94442;
+
+    // Highlight (row hover / suggestion selection)
+    --mitmweb-highlight: hsla(209, 52%, 84%, 0.5);
+
+    // Flow table row states (base rows reuse --mitmweb-bg / --mitmweb-bg-alt; -alt is the even-row shade)
+    --mitmweb-row-highlight: hsl(48, 100%, 80%);
+    --mitmweb-row-highlight-alt: hsl(48, 100%, 75%);
+    --mitmweb-row-selected: hsl(209, 51%, 92%);
+    --mitmweb-row-selected-alt: hsl(209, 51%, 86%);
+    --mitmweb-row-selected-highlight: hsl(209, 96%, 74%);
+    --mitmweb-row-selected-highlight-alt: hsl(209, 96%, 68%);
+
+    // Alert
+    --mitmweb-alert-warning-bg: #fcf8e3;
+    --mitmweb-alert-warning-border: #faebcc;
+}
+
 // www.paulirish.com/2012/box-sizing-border-box-ftw/
 html {
     box-sizing: border-box;
@@ -32,8 +101,8 @@ body {
     font-family: @font-family-sans-serif;
     font-size: 14px;
     line-height: 1.42857143;
-    color: #333;
-    background-color: #fff;
+    color: var(--mitmweb-fg);
+    background-color: var(--mitmweb-bg);
 }
 
 h1,
@@ -133,38 +202,38 @@ textarea {
 }
 
 .text-primary {
-    color: #337ab7;
+    color: var(--mitmweb-accent);
 }
 
 .docs-link,
 .docs-link:visited {
-    color: #337ab7;
+    color: var(--mitmweb-accent);
     text-decoration: none;
 }
 
 .docs-link:hover,
 .docs-link:focus {
-    color: #23527c;
+    color: var(--mitmweb-accent-hover);
 }
 
 .text-success {
-    color: #3c763d;
+    color: var(--mitmweb-text-success);
 }
 
 .text-info {
-    color: #31708f;
+    color: var(--mitmweb-text-info);
 }
 
 .text-warning {
-    color: #8a6d3b;
+    color: var(--mitmweb-text-warning);
 }
 
 .text-danger {
-    color: #a94442;
+    color: var(--mitmweb-text-danger);
 }
 
 .text-muted {
-    color: #777;
+    color: var(--mitmweb-fg-muted);
 }
 
 .hidden {
@@ -203,7 +272,7 @@ textarea {
 
 .btn:focus,
 .btn:hover {
-    color: #333;
+    color: var(--mitmweb-fg);
     text-decoration: none;
 }
 
@@ -221,42 +290,42 @@ textarea {
 }
 
 .btn-default {
-    color: #333;
-    background-color: #fff;
-    border-color: #ccc;
+    color: var(--mitmweb-fg);
+    background-color: var(--mitmweb-bg);
+    border-color: var(--mitmweb-border);
 }
 
 .btn-default:hover,
 .btn-default:focus {
-    color: #333;
-    background-color: #e6e6e6;
-    border-color: #adadad;
+    color: var(--mitmweb-fg);
+    background-color: var(--mitmweb-bg-hover);
+    border-color: var(--mitmweb-border-strong);
 }
 
 .btn-primary {
     color: #fff;
-    background-color: #337ab7;
-    border-color: #2e6da4;
+    background-color: var(--mitmweb-accent);
+    border-color: var(--mitmweb-accent-border);
 }
 
 .btn-primary:hover,
 .btn-primary:focus {
     color: #fff;
-    background-color: #286090;
-    border-color: #204d74;
+    background-color: var(--mitmweb-accent-active);
+    border-color: var(--mitmweb-accent-border-active);
 }
 
 .btn-info {
     color: #fff;
-    background-color: #5bc0de;
-    border-color: #46b8da;
+    background-color: var(--mitmweb-info);
+    border-color: var(--mitmweb-info-border);
 }
 
 .btn-info:hover,
 .btn-info:focus {
     color: #fff;
-    background-color: #31b0d5;
-    border-color: #269abc;
+    background-color: var(--mitmweb-info-hover);
+    border-color: var(--mitmweb-info-border-hover);
 }
 
 .btn-sm {
@@ -287,19 +356,19 @@ textarea {
 }
 
 .label-default {
-    background-color: #777;
+    background-color: var(--mitmweb-fg-muted);
 }
 
 .label-primary {
-    background-color: #337ab7;
+    background-color: var(--mitmweb-accent);
 }
 
 .label-success {
-    background-color: #5cb85c;
+    background-color: var(--mitmweb-success);
 }
 
 .label-danger {
-    background-color: #d9534f;
+    background-color: var(--mitmweb-danger);
 }
 
 .alert {
@@ -310,9 +379,9 @@ textarea {
 }
 
 .alert-warning {
-    color: #8a6d3b;
-    background-color: #fcf8e3;
-    border-color: #faebcc;
+    color: var(--mitmweb-text-warning);
+    background-color: var(--mitmweb-alert-warning-bg);
+    border-color: var(--mitmweb-alert-warning-border);
 }
 
 .input-group {
@@ -342,10 +411,10 @@ textarea {
     font-size: 14px;
     font-weight: 400;
     line-height: 1;
-    color: #555;
+    color: var(--mitmweb-fg-input);
     text-align: center;
-    background-color: #eee;
-    border: 1px solid #ccc;
+    background-color: var(--mitmweb-bg-muted);
+    border: 1px solid var(--mitmweb-border);
     border-radius: 4px;
 }
 
@@ -369,7 +438,7 @@ textarea {
     max-width: 276px;
     padding: 1px;
     text-align: left;
-    background-color: #fff;
+    background-color: var(--mitmweb-bg);
     background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, 20%);
     border-radius: 6px;
@@ -413,7 +482,7 @@ textarea {
     bottom: 1px;
     margin-left: -10px;
     border-width: 10px 10px 0;
-    border-top-color: #fff;
+    border-top-color: var(--mitmweb-bg);
 }
 
 .popover.bottom {
@@ -432,7 +501,7 @@ textarea {
     top: 1px;
     margin-left: -10px;
     border-width: 0 10px 10px;
-    border-bottom-color: #fff;
+    border-bottom-color: var(--mitmweb-bg);
 }
 
 .close {
@@ -440,7 +509,7 @@ textarea {
     font-size: 21px;
     font-weight: 700;
     line-height: 1;
-    color: #000;
+    color: var(--mitmweb-fg-strong);
     text-shadow: 0 1px 0 #fff;
     opacity: 0.2;
     background: transparent;
@@ -451,7 +520,7 @@ textarea {
 
 .close:hover,
 .close:focus {
-    color: #000;
+    color: var(--mitmweb-fg-strong);
     text-decoration: none;
     cursor: pointer;
     opacity: 0.5;
@@ -463,8 +532,8 @@ textarea {
     height: auto;
     padding: 4px;
     line-height: 1.42857143;
-    background-color: #fff;
-    border: 1px solid #ddd;
+    background-color: var(--mitmweb-bg);
+    border: 1px solid var(--mitmweb-border-light);
     border-radius: 4px;
     transition: all 0.2s ease-in-out;
 }
@@ -476,9 +545,9 @@ textarea {
     padding: 6px 12px;
     font-size: 14px;
     line-height: 1.42857143;
-    color: #555;
-    background-color: #fff;
-    border: 1px solid #ccc;
+    color: var(--mitmweb-fg-input);
+    background-color: var(--mitmweb-bg);
+    border: 1px solid var(--mitmweb-border);
     border-radius: 4px;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 7.5%);
     transition:
@@ -487,7 +556,7 @@ textarea {
 }
 
 .input:focus {
-    border-color: #66afe9;
+    border-color: var(--mitmweb-focus-ring);
     outline: 0;
     box-shadow:
         inset 0 1px 1px rgba(0, 0, 0, 7.5%),
@@ -503,5 +572,5 @@ textarea.input {
 }
 
 .has-error .input {
-    border-color: #a94442;
+    border-color: var(--mitmweb-text-danger);
 }
diff --git a/web/src/css/header.less b/web/src/css/header.less
index 35a6fee2a..1ce9a9167 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -1,8 +1,8 @@
 @screen-xs-max: 767px;
-@label-info-bg: #5bc0de;
-@label-success-bg: #5cb85c;
-@label-danger-bg: #d9534f;
-@label-warning-bg: #f0ad4e;
+@label-info-bg: var(--mitmweb-info);
+@label-success-bg: var(--mitmweb-success);
+@label-danger-bg: var(--mitmweb-danger);
+@label-warning-bg: var(--mitmweb-warning);
 
 .connection-label-base() {
     display: inline;
@@ -21,7 +21,7 @@
 
 header {
     padding-top: 6px;
-    background-color: white;
+    background-color: var(--mitmweb-bg);
     @separator-color: lighten(grey, 15%);
     > div:not(:empty) {
         display: block;
@@ -96,7 +96,7 @@ header {
 }
 
 .menu-legend {
-    color: #777;
+    color: var(--mitmweb-fg-muted);
     height: @menu-legend-height;
     text-align: center;
     font-size: 12px;
@@ -159,27 +159,27 @@ header {
             }
 
             a {
-                color: #337ab7;
+                color: var(--mitmweb-accent);
             }
 
             a:hover,
             a:focus {
-                color: #23527c;
+                color: var(--mitmweb-accent-hover);
             }
 
             tbody tr + tr {
-                border-top: 1px solid #ddd;
+                border-top: 1px solid var(--mitmweb-border-light);
             }
 
             tbody tr:first-child {
-                border-top: 1px solid #ddd;
+                border-top: 1px solid var(--mitmweb-border-light);
             }
         }
 
         tr {
             cursor: pointer;
             &:hover {
-                background-color: hsla(209, 52%, 84%, 0.5) !important;
+                background-color: var(--mitmweb-highlight) !important;
             }
         }
     }
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
index 4b9403139..213eb8b4d 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -43,7 +43,7 @@ body,
 
 .splitter {
     flex: 0 0 1px;
-    background-color: #aaa;
+    background-color: var(--mitmweb-border-strong);
     position: relative;
 
     > div {
diff --git a/web/src/css/modal.less b/web/src/css/modal.less
index dc5ebaefb..3b069a7e4 100644
--- a/web/src/css/modal.less
+++ b/web/src/css/modal.less
@@ -53,7 +53,7 @@
 
 .modal-content {
     position: relative;
-    background-color: #fff;
+    background-color: var(--mitmweb-bg);
     border: 1px solid rgba(0, 0, 0, 20%);
     border-radius: 6px;
     box-shadow: 0 3px 9px rgba(0, 0, 0, 50%);
@@ -63,7 +63,7 @@
 
 .modal-header {
     padding: 15px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid var(--mitmweb-border-lighter);
     min-height: 16.42857143px;
 }
 
@@ -80,7 +80,7 @@
 .modal-footer {
     padding: 15px;
     text-align: right;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid var(--mitmweb-border-lighter);
 }
 
 .form-horizontal .form-row {
diff --git a/web/src/css/mode.less b/web/src/css/mode.less
index 3e5182bef..754bfa669 100644
--- a/web/src/css/mode.less
+++ b/web/src/css/mode.less
@@ -13,11 +13,11 @@
     }
 
     .green-left-border {
-        border-left: 10px solid #77c77a;
+        border-left: 10px solid var(--mitmweb-green);
     }
 
     .gray-left-border {
-        border-left: 10px solid #b2b2b2;
+        border-left: 10px solid var(--mitmweb-gray);
     }
 
     .modes-container {
@@ -32,7 +32,7 @@
     }
 
     .mode-description {
-        color: #b2b2b2;
+        color: var(--mitmweb-gray);
         margin-top: -10px;
     }
 
@@ -76,7 +76,7 @@
             transition: color 120ms ease-in-out;
 
             &:hover {
-                color: #333;
+                color: var(--mitmweb-fg);
             }
         }
         .processes-container {
@@ -96,7 +96,7 @@
             display: flex;
             flex-direction: row;
             gap: 5px;
-            background-color: #e0e0e0;
+            background-color: var(--mitmweb-bg-active);
             padding: 5px;
             border-radius: 4px;
             height: 30px;
@@ -122,7 +122,7 @@
 
             .dropdown-header {
                 padding: 5px;
-                border: 1px solid #ccc;
+                border: 1px solid var(--mitmweb-border);
                 border-radius: 4px;
                 cursor: pointer;
                 display: flex;
@@ -164,11 +164,11 @@
             }
 
             .dropdown-item.selected {
-                background-color: #e0e0e0;
+                background-color: var(--mitmweb-bg-active);
             }
 
             .dropdown-item:hover {
-                background-color: #f0f0f0;
+                background-color: var(--mitmweb-bg-muted);
             }
 
             .process-details {
@@ -187,7 +187,7 @@
 
             .process-name {
                 font-weight: 500;
-                color: #333;
+                color: var(--mitmweb-fg);
             }
 
             .process-separator {
@@ -237,7 +237,7 @@
     }
 
     .mode-input {
-        border: 1px solid #ccc;
+        border: 1px solid var(--mitmweb-border);
         margin-left: 10px;
         border-radius: 4px;
         min-width: 120px;
@@ -245,7 +245,7 @@
     }
 
     .mode-reverse-input {
-        border: 1px solid #ccc;
+        border: 1px solid var(--mitmweb-border);
         margin-left: 10px;
         margin-right: 10px;
         border-radius: 4px;
@@ -254,7 +254,7 @@
     }
 
     .mode-upstream-input {
-        border: 1px solid #ccc;
+        border: 1px solid var(--mitmweb-border);
         margin-left: 10px;
         margin-right: 5px;
         border-radius: 4px;
@@ -264,7 +264,7 @@
 
     .mode-reverse-dropdown {
         margin: 0 5px;
-        border: 1px solid #ccc;
+        border: 1px solid var(--mitmweb-border);
         border-radius: 4px;
         height: 25px;
     }
@@ -315,13 +315,13 @@
         }
 
         > button .icon {
-            color: #777;
+            color: var(--mitmweb-fg-muted);
             width: 20px;
             height: 20px;
             transition: color 120ms ease-in-out;
 
             &:hover {
-                color: #333;
+                color: var(--mitmweb-fg);
             }
         }
 
@@ -350,10 +350,10 @@
         }
 
         > div {
-            border: 1px solid #ccc;
+            border: 1px solid var(--mitmweb-border);
             border-radius: 4px;
             padding: 10px 15px;
-            background-color: #f9f9f9;
+            background-color: var(--mitmweb-bg);
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
             &:popover-open {
@@ -370,14 +370,14 @@
             }
             > .mode-input {
                 text-align: right;
-                background-color: white;
+                background-color: var(--mitmweb-bg);
                 margin: 0;
             }
         }
     }
 
     .missing-mode-container {
-        color: #b2b2b2;
+        color: var(--mitmweb-gray);
 
         .title-icon-container {
             display: flex;
diff --git a/web/src/css/tabs.less b/web/src/css/tabs.less
index 024b3aa02..302741157 100644
--- a/web/src/css/tabs.less
+++ b/web/src/css/tabs.less
@@ -5,7 +5,7 @@
 
     > a {
         display: inline-block;
-        color: #337ab7;
+        color: var(--mitmweb-accent);
         border: solid transparent 1px;
         text-decoration: none;
         //text-transform: uppercase;
@@ -13,22 +13,21 @@
 
         &:hover,
         &:focus {
-            color: #23527c;
+            color: var(--mitmweb-accent-hover);
         }
 
         &.active {
-            color: #337ab7;
-            background-color: white;
+            color: var(--mitmweb-accent);
+            background-color: var(--mitmweb-bg);
             border-color: @separator-color;
-            border-bottom-color: white;
+            border-bottom-color: var(--mitmweb-bg);
         }
         &.special {
-            @special-color: #396cad;
             color: white;
-            background-color: @special-color;
-            border-bottom-color: @special-color;
+            background-color: var(--mitmweb-accent);
+            border-bottom-color: var(--mitmweb-accent);
             &:hover {
-                background-color: lighten(@special-color, 10%);
+                background-color: var(--mitmweb-accent-active);
             }
         }
     }