diff --git a/src/web_interface/static/css/darkmode.css b/src/web_interface/static/css/darkmode.css
new file mode 100644
index 000000000..cf660c878
--- /dev/null
+++ b/src/web_interface/static/css/darkmode.css
@@ -0,0 +1,158 @@
+:root {
+    --background-color-light: #fff;
+    --text-color-light: #212529;
+    --background-color-dark: #2e3339;
+    --border-color-dark: #454d55;
+    --background-color-dark-element: #343a40;
+    --background-color-dark-primary: #385779;
+    --text-color-dark: #ccc;
+}
+
+body {
+    background-color: var(--background-color-light);
+    color: var(--text-color-light);
+}
+
+.dark-mode {
+    background-color: var(--background-color-dark);
+    color: var(--text-color-dark);
+}
+
+body.dark-mode :is(.list-group-item, .dropdown-item) {
+    color: var(--text-color-dark) !important;
+    border-color: var(--border-color-dark) !important;
+    background-color: inherit !important;
+}
+
+body.dark-mode a.nav-link.active {
+    color: inherit !important;
+    background-color: inherit !important;
+    border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
+}
+
+body.dark-mode :is(pre, .pagination-page-info b, .line-number, .list-group-item-action,
+        .table:not(.table-borderless), .list-group-flush) {
+    color: var(--text-color-dark) !important;
+}
+
+body.dark-mode :is(a:hover) {
+    color: #fff;
+}
+
+body.dark-mode :is(div.card, input, textarea, select, .dropdown-menu, .d2h-wrapper, .d2h-file-wrapper, .d2h-file-header,
+        .d2h-info, .d2h-code-side-linenumber, .modal-content, a.page-link, span.page-link, .btn-light, .jumbotron) {
+    color: var(--text-color-dark) !important;
+    background-color: var(--background-color-dark-element) !important;
+    border: 1px solid var(--border-color-dark) !important;
+}
+
+body.dark-mode :is(.table.table-borderless, .bg-light) {
+    color: var(--text-color-dark) !important;
+    background-color: var(--background-color-dark-element) !important;
+}
+
+/* d2h: text file diff */
+body.dark-mode .d2h-del {
+    background-color: #644344 !important;
+}
+
+body.dark-mode del {
+    background-color: #682529 !important;
+}
+
+body.dark-mode .d2h-ins {
+    background-color: #4b644b !important;
+}
+
+body.dark-mode ins {
+    background-color: #2a5c2a !important;
+}
+
+body.dark-mode .d2h-tag {
+    background-color: var(--background-color-dark) !important;
+}
+
+body.dark-mode :is(th) {
+    color: inherit !important;
+    background-color: inherit !important;
+}
+
+body.dark-mode :is(.input-group-text, .thead-light, .table-head-light) {
+    /* --secondary is defined in bootstrap.min.css */
+    background-color: var(--secondary) !important;
+    color: var(--text-color-dark) !important;
+    border-color: var(--border-color-dark) !important;
+}
+
+body.dark-mode :is(.table-primary, .list-group-item-primary, option:checked, .pagination > li.active > a) {
+    background-color: var(--background-color-dark-primary) !important;
+    color: #7ebcff !important;
+    border-color: var(--background-color-dark-primary) !important;
+}
+
+body.dark-mode :is(.alert-success, .table-success, .table-success > td) {
+    background-color: #405945 !important;
+    color: #d4edda !important;
+}
+
+body.dark-mode :is(.alert-warning, .table-warning, .table-warning > td) {
+    background-color: #938457 !important;
+    color: #ffe8a4 !important;
+}
+
+body.dark-mode :is(.alert-danger, .table-danger, .table-danger > td) {
+    background-color: #774c4e !important;
+    color: #f5c6cb !important;
+}
+
+body.dark-mode :is(.table-bordered td, .table-bordered th, .border-light, .table td, .table th, .border,
+        .form-control, .CodeMirror:not(.cm-s-graphiql)) {
+    border-color: var(--border-color-dark) !important;
+}
+
+body.dark-mode .nav-tabs {
+    border-bottom: 1px solid var(--border-color-dark) !important;
+}
+
+/* hljs: highlight.js code highlighting */
+body.dark-mode .hljs {
+    background: inherit;
+    color: var(--text-color-dark);
+}
+
+body.dark-mode .hljs-string {
+    color: #58c5b2;
+}
+
+body.dark-mode .hljs-attr {
+    color: #3795ff;
+}
+
+body.dark-mode .close {
+    color: var(--text-color-dark);
+}
+
+body.dark-mode input[type="checkbox"] {
+    /* This is a bit of a hack: For whatever reason, you can't change the background color of checkboxes.
+       We can invert the color with CSS, though... */
+    filter: invert(75%) hue-rotate(180deg);
+}
+
+body.dark-mode :is(.table-hover td:hover, .table-hover th:hover, .table-hover tr:hover,
+        .list-group-item-action:hover, .dropdown-item:hover) {
+    background-color: var(--secondary) !important;
+    color: var(--text-color-dark) !important;
+}
+
+/* browse X table hover animation */
+body.dark-mode .li-hover {
+    box-shadow: 0 0 0 rgba(0, 123, 255, .15);
+}
+
+body.dark-mode .li-hover:hover {
+    box-shadow: 5px 5px 20px rgba(0, 123, 255, .35);
+}
+
+body.dark-mode .jstree-hovered {
+    background: var(--background-color-dark-primary);
+}
diff --git a/src/web_interface/templates/base.html b/src/web_interface/templates/base.html
index 1f31eed69..ee89083d4 100644
--- a/src/web_interface/templates/base.html
+++ b/src/web_interface/templates/base.html
@@ -133,107 +133,8 @@
             font-size: 14px;
             overflow-wrap: anywhere;
         }
-        :root {
-          --background-color-light: #fff;
-          --text-color-light: #212529;
-          --background-color-dark: #2e3339;
-          --border-color-dark: #454d55;
-          --background-color-dark-element: #343a40;
-          --text-color-dark: #ccc;
-        }
-        body {
-            background-color: var(--background-color-light);
-            color: var(--text-color-light);
-        }
-        .dark-mode {
-            background-color: var(--background-color-dark);
-            color: var(--text-color-dark);
-        }
-        body.dark-mode :is(.list-group-item, .dropdown-item) {
-            color: var(--text-color-dark) !important;
-            border-color: var(--border-color-dark) !important;
-            background-color: inherit !important;
-        }
-        body.dark-mode a.nav-link.active {
-            color: inherit !important;
-            background-color: inherit !important;
-            border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
-        }
-        body.dark-mode :is(pre, a, a:link, .pagination-page-info b) {
-            color: var(--text-color-dark) !important;
-        }
-        body.dark-mode :is(div.card, .dropdown-menu, select, input, .list-group-item-action, .modal-content,
-                .table:not(.table-borderless), a.page-link, span.page-link, .btn-light, textarea) {
-            color: var(--text-color-dark) !important;
-            background-color: var(--background-color-dark-element) !important;
-            border: 1px solid var(--border-color-dark) !important;
-        }
-        body.dark-mode :is(.list-group-flush, .table.table-borderless, .bg-light) {
-            color: var(--text-color-dark) !important;
-            background-color: var(--background-color-dark-element) !important;
-        }
-        body.dark-mode :is(th) {
-            color: inherit !important;
-            background-color: inherit !important;
-        }
-        body.dark-mode :is(.input-group-text, .thead-light, .table-head-light) {
-            background-color: var(--secondary) !important;
-            color: var(--text-color-dark) !important;
-            border-color: var(--border-color-dark) !important;
-        }
-        body.dark-mode :is(.table-primary, .list-group-item-primary) {
-            background-color: #385779 !important;
-            color: #7ebcff !important;
-        }
-        body.dark-mode :is(.alert-success, .table-success, .table-success > td) {
-            background-color: #405945 !important;
-            color: #d4edda !important;
-        }
-        body.dark-mode :is(.alert-warning, .table-warning, .table-warning > td) {
-            background-color: #938457 !important;
-            color: #ffe8a4 !important;
-        }
-        body.dark-mode :is(.alert-danger, .table-danger, .table-danger > td) {
-            background-color: #774c4e !important;
-            color: #f5c6cb !important;
-        }
-        body.dark-mode :is(.table-bordered td, .table-bordered th, .border-light, .table td, .table th, .border,
-                .form-control) {
-            border-color: var(--border-color-dark) !important;
-        }
-        body.dark-mode .nav-tabs {
-            border-bottom: 1px solid var(--border-color-dark) !important;
-        }
-        body.dark-mode .hljs {
-            background: inherit;
-            color: var(--text-color-dark);
-        }
-        body.dark-mode .hljs-string {
-            color: #58c5b2;
-        }
-        body.dark-mode .jumbotron {
-            background-color: #343a40;
-        }
-        body.dark-mode .close {
-            color: var(--text-color-dark);
-        }
-        body.dark-mode input[type="checkbox"] {
-            /* This is a bit of a hack: For whatever reason, you can't change the background color of checkboxes.
-               We can invert the color with CSS, though... */
-            filter: invert(75%) hue-rotate(180deg);
-        }
-        body.dark-mode :is(.table-hover td:hover, .table-hover th:hover, .table-hover tr:hover,
-                .list-group-item-action:hover, .dropdown-item:hover) {
-            background-color: var(--secondary) !important;
-            color: var(--text-color-dark) !important;
-        }
-        body.dark-mode .li-hover {
-            box-shadow: 0 0 0 rgba(0,123,255,.15);
-        }
-        body.dark-mode .li-hover:hover {
-            box-shadow: 5px 5px 20px rgba(0,123,255,.35);
-        }
     </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/darkmode.css') }}">
     {% block styles %}{% endblock %}
 </head>