From 1655e0972b09e7d13c0a5644389b7e5ba5cb536b Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sat, 17 Apr 2021 13:27:28 +0200
Subject: [PATCH 01/45] poc dark/light mode switch

---
 app/views/main.scala.html                           | 11 +++--------
 .../dashboard/advanced_dataset/dataset_table.js     |  1 -
 frontend/javascripts/main.js                        |  2 --
 frontend/javascripts/navbar.js                      | 13 +++++++++++++
 frontend/javascripts/style_dark.js                  |  1 +
 frontend/javascripts/style_light.js                 |  1 +
 frontend/stylesheets/antd_overwrites.less           | 12 ++----------
 frontend/stylesheets/dark.less                      |  2 ++
 frontend/stylesheets/light.less                     |  2 ++
 frontend/stylesheets/main.less                      |  1 -
 webpack.config.js                                   |  2 ++
 11 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 frontend/javascripts/style_dark.js
 create mode 100644 frontend/javascripts/style_light.js
 create mode 100644 frontend/stylesheets/dark.less
 create mode 100644 frontend/stylesheets/light.less

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
index a25b61e3940..90042ca38af 100755
--- a/app/views/main.scala.html
+++ b/app/views/main.scala.html
@@ -22,19 +22,14 @@
       rel="stylesheet"
       type="text/css"
       media="screen"
-      href="/assets/bundle/vendors~main.css?nocache=@(webknossos.BuildInfo.commitHash)"
+      href="/assets/bundle/vendors~dark~light.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
     <link
+      id="primary-stylesheet"
       rel="stylesheet"
       type="text/css"
       media="screen"
-      href="/assets/bundle/main.css?nocache=@(webknossos.BuildInfo.commitHash)"
-    />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      media="screen"
-      href="/assets/fonts/titillium-web.css?nocache=@(webknossos.BuildInfo.commitHash)"
+      href="/assets/bundle/dark.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
     <script
       data-airbrake-project-id="@(conf.Airbrake.projectID)"
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
index 1a25b5a53cd..1ca9c21421b 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
@@ -179,7 +179,6 @@ class DatasetTable extends React.PureComponent<Props, State> {
               <Link
                 to={`/datasets/${dataset.owningOrganization}/${dataset.name}/view`}
                 title="View Dataset"
-                style={{ color: "rgba(0, 0, 0, 0.65)" }}
               >
                 {dataset.name}
               </Link>
diff --git a/frontend/javascripts/main.js b/frontend/javascripts/main.js
index 1fa185ab77d..2f6ada7c5f8 100644
--- a/frontend/javascripts/main.js
+++ b/frontend/javascripts/main.js
@@ -3,8 +3,6 @@
  * @flow
  */
 
-import "../stylesheets/main.less";
-
 import { Provider } from "react-redux";
 import React from "react";
 import ReactDOM from "react-dom";
diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index db3e3b6e974..5cf270e23c4 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -316,6 +316,19 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
         <Menu.Item key="token">
           <Link to="/auth/token">Auth Token</Link>
         </Menu.Item>
+        <Menu.Item
+          key="theme"
+          onClick={() => {
+            const styleEl = document.getElementById("primary-stylesheet");
+            if (styleEl.href.includes("light")) {
+              styleEl.href = styleEl.href.replace("light", "dark");
+            } else {
+              styleEl.href = styleEl.href.replace("dark", "light");
+            }
+          }}
+        >
+          Toggle Theme
+        </Menu.Item>
         <Menu.Item key="logout">
           <a href="/" onClick={handleLogout}>
             Logout
diff --git a/frontend/javascripts/style_dark.js b/frontend/javascripts/style_dark.js
new file mode 100644
index 00000000000..44d8d36a609
--- /dev/null
+++ b/frontend/javascripts/style_dark.js
@@ -0,0 +1 @@
+import "../stylesheets/dark.less";
diff --git a/frontend/javascripts/style_light.js b/frontend/javascripts/style_light.js
new file mode 100644
index 00000000000..b7976d3b991
--- /dev/null
+++ b/frontend/javascripts/style_light.js
@@ -0,0 +1 @@
+import "../stylesheets/light.less";
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
index 492fa0077d2..920b63b665e 100644
--- a/frontend/stylesheets/antd_overwrites.less
+++ b/frontend/stylesheets/antd_overwrites.less
@@ -1,6 +1,5 @@
 .ant-layout-header {
   padding: 0 20px;
-  background: white;
 
   @media @smartphones {
     & .ant-menu-item,
@@ -11,14 +10,6 @@
   }
 }
 
-.ant-layout-sider {
-  background: white;
-}
-
-.ant-layout {
-  background: white;
-}
-
 .ant-tag {
   margin-bottom: 8px;
 }
@@ -205,6 +196,7 @@ label.ant-checkbox-wrapper {
   padding: 0;
   height: initial;
 }
-.link-button > .anticon + span, .link-button > span + .anticon {
+.link-button > .anticon + span,
+.link-button > span + .anticon {
   margin-left: initial;
 }
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
new file mode 100644
index 00000000000..c1ac1f88748
--- /dev/null
+++ b/frontend/stylesheets/dark.less
@@ -0,0 +1,2 @@
+@import "../../node_modules/antd/dist/antd.dark.less";
+@import "./main.less";
diff --git a/frontend/stylesheets/light.less b/frontend/stylesheets/light.less
new file mode 100644
index 00000000000..9877ca6e2b4
--- /dev/null
+++ b/frontend/stylesheets/light.less
@@ -0,0 +1,2 @@
+@import "../../node_modules/antd/dist/antd.less";
+@import "./main.less";
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index 94662a8fa1f..f17fd148091 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -1,4 +1,3 @@
-@import "../../node_modules/antd/dist/antd.less";
 @import "../../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
 @import "../../node_modules/golden-layout/src/css/goldenlayout-base.css";
 @import "../../node_modules/golden-layout/src/css/goldenlayout-light-theme.css";
diff --git a/webpack.config.js b/webpack.config.js
index 8a636e7b169..1c904144e26 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -56,6 +56,8 @@ module.exports = function(env = {}) {
   return {
     entry: {
       main: "main.js",
+      light: "style_light.js",
+      dark: "style_dark.js",
     },
     mode: env.production ? "production" : "development",
     output: {

From d97dee73dfef20a63c490788c0ab586cb00f78db Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sat, 17 Apr 2021 21:03:14 +0200
Subject: [PATCH 02/45] tweaks

---
 frontend/javascripts/navbar.js  | 1 -
 frontend/stylesheets/light.less | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 5cf270e23c4..9325aad17de 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -386,7 +386,6 @@ function Navbar({ activeUser, isAuthenticated, isInAnnotationView, hasOrganizati
     display: "flex",
     alignItems: "center",
     color: "rgba(255, 255, 255, 0.67)",
-    background: "#001529",
     whiteSpace: "nowrap",
   };
 
diff --git a/frontend/stylesheets/light.less b/frontend/stylesheets/light.less
index 9877ca6e2b4..f86512f8b70 100644
--- a/frontend/stylesheets/light.less
+++ b/frontend/stylesheets/light.less
@@ -1,2 +1,7 @@
 @import "../../node_modules/antd/dist/antd.less";
 @import "./main.less";
+
+.ant-layout-sider,
+.ant-layout {
+  background: white;
+}

From a6afa76329ba768f1c9d4bf56d2b71fa34b98daa Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sat, 17 Apr 2021 21:37:02 +0200
Subject: [PATCH 03/45] tweaks

---
 .../javascripts/oxalis/controller/renderer.js |  1 +
 .../oxalis/controller/scene_controller.js     |  1 +
 .../oxalis/view/rendering_utils.js            |  4 +--
 frontend/stylesheets/_variables.less          |  1 -
 frontend/stylesheets/antd_overwrites.less     |  5 ----
 frontend/stylesheets/dark.less                | 26 +++++++++++++++++++
 frontend/stylesheets/light.less               |  3 ++-
 frontend/stylesheets/main.less                |  1 -
 8 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/frontend/javascripts/oxalis/controller/renderer.js b/frontend/javascripts/oxalis/controller/renderer.js
index 6f91c096b9a..c681de0ee81 100644
--- a/frontend/javascripts/oxalis/controller/renderer.js
+++ b/frontend/javascripts/oxalis/controller/renderer.js
@@ -15,6 +15,7 @@ function getRenderer() {
           // This prevents flickering when rendering to a buffer instead of the canvas
           preserveDrawingBuffer: true,
           antialias: true,
+          alpha: true,
         })
       : {};
 
diff --git a/frontend/javascripts/oxalis/controller/scene_controller.js b/frontend/javascripts/oxalis/controller/scene_controller.js
index b543836b9b2..dbf240de4d1 100644
--- a/frontend/javascripts/oxalis/controller/scene_controller.js
+++ b/frontend/javascripts/oxalis/controller/scene_controller.js
@@ -88,6 +88,7 @@ class SceneController {
     this.createMeshes();
     this.bindToEvents();
     this.scene = new THREE.Scene();
+    this.scene.background = null;
 
     // Because the voxel coordinates do not have a cube shape but are distorted,
     // we need to distort the entire scene to provide an illustration that is
diff --git a/frontend/javascripts/oxalis/view/rendering_utils.js b/frontend/javascripts/oxalis/view/rendering_utils.js
index 8389c7c4540..e659d35d586 100644
--- a/frontend/javascripts/oxalis/view/rendering_utils.js
+++ b/frontend/javascripts/oxalis/view/rendering_utils.js
@@ -28,7 +28,7 @@ export const setupRenderArea = (
   renderer.setViewport(x, overallHeight - y - viewportHeight, viewportWidth, viewportHeight);
   renderer.setScissor(x, overallHeight - y - viewportHeight, viewportWidth, viewportHeight);
   renderer.setScissorTest(true);
-  renderer.setClearColor(color, 1);
+  renderer.setClearColor(color, 0);
 };
 
 export const clearCanvas = (renderer: typeof THREE.WebGLRenderer) => {
@@ -55,7 +55,7 @@ export function renderToTexture(
 
   renderer.setViewport(0, 0 + height, width, height);
   renderer.setScissorTest(false);
-  renderer.setClearColor(clearColor, 1);
+  renderer.setClearColor(clearColor, 0);
 
   const renderTarget = new THREE.WebGLRenderTarget(width, height);
   const buffer = new Uint8Array(width * height * 4);
diff --git a/frontend/stylesheets/_variables.less b/frontend/stylesheets/_variables.less
index dda01f6be3d..79811365dd4 100644
--- a/frontend/stylesheets/_variables.less
+++ b/frontend/stylesheets/_variables.less
@@ -2,7 +2,6 @@
 @left-menu-width: 360px;
 @navbar-height: 48px;
 @standardViewportWidth: 380px;
-@mainColor: #2a3a48;
 @xyRed: rgb(200, 20, 20);
 @yzBlue: rgb(20, 20, 200);
 @xzGreen: rgb(20, 200, 20);
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
index 920b63b665e..734c5a3f226 100644
--- a/frontend/stylesheets/antd_overwrites.less
+++ b/frontend/stylesheets/antd_overwrites.less
@@ -158,11 +158,6 @@ label.ant-checkbox-wrapper {
   pointer-events: none;
 }
 
-// Make settings background plain white
-.ant-collapse-borderless {
-  background-color: white;
-}
-
 // The rules below are needed to have the row expand icon for tables of antd version 3.
 // The icon in version 4 does not work correctly in firefox.
 // See: https://github.com/ant-design/ant-design/issues/29303#issue-804593263
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index c1ac1f88748..ff3af3e68c6 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -1,2 +1,28 @@
 @import "../../node_modules/antd/dist/antd.dark.less";
 @import "./main.less";
+
+.ant-collapse-borderless {
+  background-color: @layout-sider-background;
+}
+
+.lm_tab:hover .lm_title,
+.lm_tab.lm_active .lm_title {
+  background: transparent !important;
+}
+
+.lm_header {
+  background: transparent;
+}
+
+.inputcatcher.TDView {
+  border-color: transparent;
+}
+
+.lm_content:hover {
+  border: 1px solid rgba(200, 200, 200, 0.6);
+}
+
+.lm_header .lm_tab .lm_title {
+  padding: 0px 5px;
+  color: @text-color;
+}
diff --git a/frontend/stylesheets/light.less b/frontend/stylesheets/light.less
index f86512f8b70..63641f06df7 100644
--- a/frontend/stylesheets/light.less
+++ b/frontend/stylesheets/light.less
@@ -2,6 +2,7 @@
 @import "./main.less";
 
 .ant-layout-sider,
+.ant-collapse-borderless,
 .ant-layout {
-  background: white;
+  background-color: white;
 }
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index f17fd148091..f63dce51816 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -28,7 +28,6 @@
 
 // ----------------------- MAIN STYLES
 body {
-  color: @mainColor;
   font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
     sans-serif;

From 96ae3014e382f202540ecfb77e580012984327e9 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sat, 17 Apr 2021 21:41:54 +0200
Subject: [PATCH 04/45] lint

---
 frontend/javascripts/style_dark.js  | 1 +
 frontend/javascripts/style_light.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/javascripts/style_dark.js b/frontend/javascripts/style_dark.js
index 44d8d36a609..7a3230c839c 100644
--- a/frontend/javascripts/style_dark.js
+++ b/frontend/javascripts/style_dark.js
@@ -1 +1,2 @@
+// @flow
 import "../stylesheets/dark.less";
diff --git a/frontend/javascripts/style_light.js b/frontend/javascripts/style_light.js
index b7976d3b991..08b6787026b 100644
--- a/frontend/javascripts/style_light.js
+++ b/frontend/javascripts/style_light.js
@@ -1 +1,2 @@
+// @flow
 import "../stylesheets/light.less";

From 95d84ab162bd0c4182a8dc72154cb66fc3142a1e Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 18 Apr 2021 14:26:30 +0200
Subject: [PATCH 05/45] tweaks

---
 .../javascripts/components/brain_spinner.js   |  48 ++-
 frontend/javascripts/navbar.js                |   2 +-
 frontend/stylesheets/_admin.less              |   2 +-
 frontend/stylesheets/_dashboard.less          | 251 --------------
 frontend/stylesheets/_general.less            |   2 +-
 frontend/stylesheets/_spotlight.less          | 306 ++++++++++++++++++
 frontend/stylesheets/_variables.less          |   2 -
 frontend/stylesheets/antd_overwrites.less     |   6 +
 frontend/stylesheets/dark.less                |   4 -
 .../stylesheets/goldenlayout_overwrites.less  |   2 +-
 frontend/stylesheets/light.less               |   6 -
 frontend/stylesheets/main.less                | 171 +---------
 .../react_sortable_tree_overwrites.less       |  18 +-
 .../stylesheets/trace_view/_action_bar.less   |  10 +-
 .../stylesheets/trace_view/_right_menu.less   |   5 +-
 .../stylesheets/trace_view/_tracing_view.less |  18 +-
 16 files changed, 385 insertions(+), 468 deletions(-)
 create mode 100644 frontend/stylesheets/_spotlight.less

diff --git a/frontend/javascripts/components/brain_spinner.js b/frontend/javascripts/components/brain_spinner.js
index caf8a554ae8..18656ea9b78 100644
--- a/frontend/javascripts/components/brain_spinner.js
+++ b/frontend/javascripts/components/brain_spinner.js
@@ -8,33 +8,29 @@ type Props = {
 
 export default function BrainSpinner({ message, isLoading = true }: Props) {
   return (
-    <div className="cover-whole-screen">
-      <div className="Aligner" style={{ height: "80%" }}>
-        <div className="Aligner-item Aligner-item--fixed">
-          <div style={{ width: 375 }}>
-            <img
-              src="/assets/images/brain.svg"
-              alt=""
-              style={{
-                width: 375,
-                height: 299,
-                marginLeft: "auto",
-                marginRight: "auto",
-                marginTop: "10%",
-              }}
+    <div className="brain-loading">
+      <div className="brain-loading-container">
+        <div className="brain-loading-content">
+          <img
+            src="/assets/images/brain.svg"
+            alt=""
+            style={{
+              width: 375,
+              height: 299,
+              marginLeft: "auto",
+              marginRight: "auto",
+              marginTop: "10%",
+            }}
+          />
+          {isLoading ? (
+            <div
+              className="brain-loading-bar"
+              style={{ width: "80%", marginLeft: "auto", marginRight: "auto", marginTop: 30 }}
             />
-            {isLoading ? (
-              <div
-                className="loader"
-                style={{ width: "80%", marginLeft: "auto", marginRight: "auto", marginTop: 30 }}
-              />
-            ) : null}
-            {message != null ? (
-              <div style={{ marginLeft: "auto", marginRight: "auto", marginTop: 30 }}>
-                {message}
-              </div>
-            ) : null}
-          </div>
+          ) : null}
+          {message != null ? (
+            <div style={{ marginLeft: "auto", marginRight: "auto", marginTop: 30 }}>{message}</div>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 9325aad17de..e465358b435 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -319,7 +319,7 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
         <Menu.Item
           key="theme"
           onClick={() => {
-            const styleEl = document.getElementById("primary-stylesheet");
+            const styleEl = ((document.getElementById("primary-stylesheet"): any): HTMLLinkElement);
             if (styleEl.href.includes("light")) {
               styleEl.href = styleEl.href.replace("light", "dark");
             } else {
diff --git a/frontend/stylesheets/_admin.less b/frontend/stylesheets/_admin.less
index 797e75e8c2f..3ed67c376ed 100644
--- a/frontend/stylesheets/_admin.less
+++ b/frontend/stylesheets/_admin.less
@@ -11,7 +11,7 @@
   }
   .clickable-icon:hover {
     cursor: pointer;
-    color: rgba(64, 169, 255, 1);
+    color: @primary-color;
   }
   .centered-table-item {
     text-align: center;
diff --git a/frontend/stylesheets/_dashboard.less b/frontend/stylesheets/_dashboard.less
index 712d9109737..602e8315142 100644
--- a/frontend/stylesheets/_dashboard.less
+++ b/frontend/stylesheets/_dashboard.less
@@ -1,243 +1,3 @@
-@smartphones: ~"only screen and (max-width: 600px)";
-
-.publication-description :first-child {
-  margin-top: 0px;
-}
-
-.gallery-dataset-col {
-  padding-bottom: 24px;
-  width: 100%;
-
-  @media @smartphones {
-    padding-bottom: 32px;
-  }
-}
-
-.not-highlighted-link {
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    text-decoration: none !important;
-  }
-}
-
-.absolute {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.dataset-thumbnail {
-  flex: 3;
-  display: inline-block;
-  background-color: black;
-
-  @media @smartphones {
-    height: 55%;
-    width: 100%;
-    display: block;
-  }
-}
-
-.dataset-thumbnail-image {
-  transition: transform 0.3s ease-in-out;
-  background-size: cover;
-  background-position: center;
-  &.segmentation {
-    opacity: 0.2;
-  }
-}
-
-.dataset-thumbnail-overlay {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100px;
-  margin: 10px;
-  border-radius: 3px;
-  background-color: rgba(35, 33, 33, 0.77);
-  padding: 5px 15px;
-  color: rgba(255, 255, 255, 0.95);
-  z-index: 101;
-}
-
-.datasets-scrollbar-spacer {
-  background: linear-gradient(
-    to left,
-    rgba(0, 0, 0, 0.7) 0%,
-    rgba(0, 0, 0, 0.7) 70%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  width: 108px;
-  height: 100%;
-  z-index: 101;
-}
-
-.dataset-published-grid {
-  position: absolute;
-  padding: 4px;
-  margin-right: 7px;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  justify-content: center;
-}
-
-.dataset-click-hint {
-  opacity: 0;
-  text-align: center;
-  color: white;
-  z-index: 100;
-  line-height: 400px;
-  font-size: 20px;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.6);
-    opacity: 1;
-  }
-}
-
-.publication-description {
-  display: flex;
-  flex-direction: column;
-  flex: 2;
-  height: 100%;
-  padding: 24px;
-  overflow-y: auto;
-  background-color: white;
-  z-index: 1;
-
-  @media @smartphones {
-    height: 45%;
-    width: 100%;
-    display: block;
-  }
-
-  h3 {
-    font-size: 20px;
-    margin-bottom: 0px;
-    padding-bottom: 16px;
-    padding-right: 16px;
-    word-wrap: break-word;
-    @media @smartphones {
-      font-size: 32px;
-      padding-bottom: 24px;
-    }
-  }
-
-  .publication-description-body {
-    width: 100%;
-    overflow-y: auto;
-    @media @smartphones {
-      height: 243px;
-    }
-  }
-
-  p {
-    font-size: 14px;
-
-    @media @smartphones {
-      font-size: 18px;
-    }
-  }
-}
-
-#add-missing-dataset-image {
-  background-image: url("/assets/images/add-missing-dataset-thumbnail.jpg");
-}
-
-.antd-spotlight-popover-card {
-  .ant-popover-inner-content {
-    padding: 0;
-  }
-  .ant-popover-inner {
-    overflow: hidden;
-  }
-
-  .ant-popover-inner,
-  .ant-popover-arrow {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
-  }
-
-  h3 {
-    font-size: 18px;
-  }
-  .publication-description-body {
-    font-size: 10px;
-  }
-  .publication-description {
-    padding: 4px;
-  }
-}
-
-.spotlight-popover-card {
-  height: 200px;
-  width: 400px;
-  position: relative;
-  overflow: hidden;
-}
-
-.spotlight-item-card {
-  height: 400px;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
-  transform: translateZ(0);
-
-  &:hover {
-    box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.22), 0 5px 15px hsla(0, 0%, 0%, 0.1);
-    transform: translateY(-2px) translateZ(0);
-
-    .dataset-thumbnail-image {
-      transform: scale(1.1);
-      filter: contrast(1.1);
-    }
-  }
-
-  @media @smartphones {
-    height: 700px;
-
-    & > div > div {
-      flex-direction: column;
-    }
-  }
-
-  .ant-card-body {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.mini-dataset-thumbnail-grid {
-  display: grid;
-  grid-gap: 10px;
-  padding: 5px;
-  margin-top: auto;
-}
-
-.mini-dataset-thumbnail {
-  opacity: 0.5;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  background-size: cover;
-
-  &.segmentation {
-    opacity: 0.2 !important;
-  }
-  &:hover,
-  &.active {
-    opacity: 1;
-  }
-  &:active {
-    transform: scale(1.05);
-  }
-}
-
 .dataset-actions {
   & > a {
     display: block;
@@ -267,17 +27,6 @@
   }
 }
 
-.spotlight-hero-button {
-  margin-right: 50px;
-  margin-bottom: 30px;
-  display: inline-block;
-  color: rgba(255, 255, 255, 0.8);
-
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-  }
-}
-
 .welcome-header-content {
   max-width: 1600px;
   margin: auto;
diff --git a/frontend/stylesheets/_general.less b/frontend/stylesheets/_general.less
index 171c538c88a..698b0ba5428 100644
--- a/frontend/stylesheets/_general.less
+++ b/frontend/stylesheets/_general.less
@@ -37,7 +37,7 @@ p {
 }
 
 .bordered {
-  border: 1px solid #d9d9d9;
+  border: 1px solid @border-color-base;
   border-radius: 4px;
   padding: 4px 11px;
   width: fit-content;
diff --git a/frontend/stylesheets/_spotlight.less b/frontend/stylesheets/_spotlight.less
new file mode 100644
index 00000000000..93eaa4d02f8
--- /dev/null
+++ b/frontend/stylesheets/_spotlight.less
@@ -0,0 +1,306 @@
+@smartphones: ~"only screen and (max-width: 600px)";
+
+.publication-description :first-child {
+  margin-top: 0px;
+}
+
+.gallery-dataset-col {
+  padding-bottom: 24px;
+  width: 100%;
+
+  @media @smartphones {
+    padding-bottom: 32px;
+  }
+}
+
+.not-highlighted-link {
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    text-decoration: none !important;
+  }
+}
+
+.absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.dataset-thumbnail {
+  flex: 3;
+  display: inline-block;
+  background-color: black;
+
+  @media @smartphones {
+    height: 55%;
+    width: 100%;
+    display: block;
+  }
+}
+
+.dataset-thumbnail-image {
+  transition: transform 0.3s ease-in-out;
+  background-size: cover;
+  background-position: center;
+  &.segmentation {
+    opacity: 0.2;
+  }
+}
+
+.dataset-thumbnail-overlay {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100px;
+  margin: 10px;
+  border-radius: 3px;
+  background-color: rgba(35, 33, 33, 0.77);
+  padding: 5px 15px;
+  color: rgba(255, 255, 255, 0.95);
+  z-index: 101;
+}
+
+.datasets-scrollbar-spacer {
+  background: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.7) 70%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  width: 108px;
+  height: 100%;
+  z-index: 101;
+}
+
+.dataset-published-grid {
+  position: absolute;
+  padding: 4px;
+  margin-right: 7px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  justify-content: center;
+}
+
+.dataset-click-hint {
+  opacity: 0;
+  text-align: center;
+  color: white;
+  z-index: 100;
+  line-height: 400px;
+  font-size: 20px;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 1;
+  }
+}
+
+.publication-description {
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+  height: 100%;
+  padding: 24px;
+  overflow-y: auto;
+  background-color: white;
+  z-index: 1;
+
+  @media @smartphones {
+    height: 45%;
+    width: 100%;
+    display: block;
+  }
+
+  h3 {
+    font-size: 20px;
+    margin-bottom: 0px;
+    padding-bottom: 16px;
+    padding-right: 16px;
+    word-wrap: break-word;
+    @media @smartphones {
+      font-size: 32px;
+      padding-bottom: 24px;
+    }
+  }
+
+  .publication-description-body {
+    width: 100%;
+    overflow-y: auto;
+    @media @smartphones {
+      height: 243px;
+    }
+  }
+
+  p {
+    font-size: 14px;
+
+    @media @smartphones {
+      font-size: 18px;
+    }
+  }
+}
+
+.spotlight-item-card {
+  height: 400px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  transform: translateZ(0);
+
+  &:hover {
+    box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.22), 0 5px 15px hsla(0, 0%, 0%, 0.1);
+    transform: translateY(-2px) translateZ(0);
+
+    .dataset-thumbnail-image {
+      transform: scale(1.1);
+      filter: contrast(1.1);
+    }
+  }
+
+  @media @smartphones {
+    height: 700px;
+
+    & > div > div {
+      flex-direction: column;
+    }
+  }
+
+  .ant-card-body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+#add-missing-dataset-image {
+  background-image: url("/assets/images/add-missing-dataset-thumbnail.jpg");
+}
+
+.mini-dataset-thumbnail-grid {
+  display: grid;
+  grid-gap: 10px;
+  padding: 5px;
+  margin-top: auto;
+}
+
+.mini-dataset-thumbnail {
+  opacity: 0.5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background-size: cover;
+
+  &.segmentation {
+    opacity: 0.2 !important;
+  }
+  &:hover,
+  &.active {
+    opacity: 1;
+  }
+  &:active {
+    transform: scale(1.05);
+  }
+}
+
+.spotlight-hero-button {
+  margin-right: 50px;
+  margin-bottom: 30px;
+  display: inline-block;
+  color: rgba(255, 255, 255, 0.8);
+
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+  }
+}
+
+#oxalis-header {
+  margin-bottom: 20px;
+  margin-top: 20px;
+  text-align: center;
+  height: 100px;
+  vertical-align: middle;
+  display: inline-block;
+  font-size: 80px;
+  font-size: 80px;
+  line-height: normal;
+  color: #000;
+  margin-left: 30px;
+
+  img {
+    height: 100px;
+    width: 100px;
+  }
+
+  @media @smartphones {
+    font-size: 2rem;
+
+    img {
+      height: 60px;
+      width: 60px;
+    }
+  }
+}
+
+.container-with-hidden-icon {
+  .hidden-icon {
+    visibility: hidden;
+  }
+  &:hover {
+    .hidden-icon {
+      visibility: visible;
+    }
+  }
+}
+
+#spotlight-footnote {
+  text-align: center;
+  margin: 30px 0;
+}
+
+.spotlight-registration-form {
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.38);
+
+  @media (max-width: 992px) {
+    margin: 12px;
+  }
+}
+
+.nice-scrollbar {
+  // These only work in chrome
+  &::-webkit-scrollbar-button {
+    display: block;
+    height: 5px;
+    border-radius: 0px;
+    background-color: rgba(255, 255, 255, 0);
+  }
+  &::-webkit-scrollbar-button:hover {
+    background-color: rgba(255, 255, 255, 0);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+    border-radius: 5px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #9c9c9c;
+    border-radius: 5px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: rgba(255, 255, 255, 0);
+  }
+  &::-webkit-scrollbar-track:hover {
+    background-color: rgba(255, 255, 255, 0);
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  // This is for firefox, to avoid showing a white line next to the scrollbar
+  scrollbar-width: thin;
+}
diff --git a/frontend/stylesheets/_variables.less b/frontend/stylesheets/_variables.less
index 79811365dd4..1a3b05bcf23 100644
--- a/frontend/stylesheets/_variables.less
+++ b/frontend/stylesheets/_variables.less
@@ -1,7 +1,5 @@
-@navbar-bottom-offset: 70px;
 @left-menu-width: 360px;
 @navbar-height: 48px;
-@standardViewportWidth: 380px;
 @xyRed: rgb(200, 20, 20);
 @yzBlue: rgb(20, 20, 200);
 @xzGreen: rgb(20, 200, 20);
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
index 734c5a3f226..0809eb7907c 100644
--- a/frontend/stylesheets/antd_overwrites.less
+++ b/frontend/stylesheets/antd_overwrites.less
@@ -1,3 +1,9 @@
+.ant-layout-sider,
+.ant-collapse-borderless,
+.ant-layout {
+  background-color: @body-background;
+}
+
 .ant-layout-header {
   padding: 0 20px;
 
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index ff3af3e68c6..d702673fa20 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -1,10 +1,6 @@
 @import "../../node_modules/antd/dist/antd.dark.less";
 @import "./main.less";
 
-.ant-collapse-borderless {
-  background-color: @layout-sider-background;
-}
-
 .lm_tab:hover .lm_title,
 .lm_tab.lm_active .lm_title {
   background: transparent !important;
diff --git a/frontend/stylesheets/goldenlayout_overwrites.less b/frontend/stylesheets/goldenlayout_overwrites.less
index 25937b1cec1..5cef50c75ea 100644
--- a/frontend/stylesheets/goldenlayout_overwrites.less
+++ b/frontend/stylesheets/goldenlayout_overwrites.less
@@ -61,7 +61,7 @@
     .lm_title {
       padding: 0px 5px;
       // These properties are copied from antd's styling:
-      color: rgba(0, 0, 0, 0.65);
+      color: @text-color;
       font-size: 14px;
       font-weight: 400;
       font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont,
diff --git a/frontend/stylesheets/light.less b/frontend/stylesheets/light.less
index 63641f06df7..9877ca6e2b4 100644
--- a/frontend/stylesheets/light.less
+++ b/frontend/stylesheets/light.less
@@ -1,8 +1,2 @@
 @import "../../node_modules/antd/dist/antd.less";
 @import "./main.less";
-
-.ant-layout-sider,
-.ant-collapse-borderless,
-.ant-layout {
-  background-color: white;
-}
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index f63dce51816..d3d30e1f672 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -15,6 +15,7 @@
 @import "_variables.less";
 @import "_general.less";
 @import "_dashboard.less";
+@import "_spotlight.less";
 @import "trace_view/_tracing_view.less";
 @import "trace_view/_user_settings_view.less";
 @import "trace_view/_action_bar.less";
@@ -45,7 +46,7 @@ body {
 .save-error {
   .ant-layout-header,
   .ant-menu {
-    background-color: #c00 !important;
+    background-color: @error-color !important;
   }
 }
 
@@ -111,34 +112,6 @@ td.nowrap * {
   }
 }
 
-#oxalis-header {
-  margin-bottom: 20px;
-  margin-top: 20px;
-  text-align: center;
-  height: 100px;
-  vertical-align: middle;
-  display: inline-block;
-  font-size: 80px;
-  font-size: 80px;
-  line-height: normal;
-  color: #000;
-  margin-left: 30px;
-
-  img {
-    height: 100px;
-    width: 100px;
-  }
-
-  @media @smartphones {
-    font-size: 2rem;
-
-    img {
-      height: 60px;
-      width: 60px;
-    }
-  }
-}
-
 .centered-content {
   padding: 50px;
   width: 100%;
@@ -146,32 +119,6 @@ td.nowrap * {
   margin: auto;
 }
 
-.container-with-hidden-icon {
-  .hidden-icon {
-    visibility: hidden;
-  }
-  &:hover {
-    .hidden-icon {
-      visibility: visible;
-    }
-  }
-}
-
-#spotlight-footnote {
-  text-align: center;
-  margin: 30px 0;
-}
-
-.spotlight-registration-form {
-  background-color: white;
-  padding: 20px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.38);
-
-  @media (max-width: 992px) {
-    margin: 12px;
-  }
-}
-
 #impressum {
   h5 {
     margin-top: 2em;
@@ -182,10 +129,6 @@ td.nowrap * {
   float: right !important;
 }
 
-.pull-left {
-  float: left !important;
-}
-
 // Fixing font awesome
 .btn [class^="fa-"],
 .nav [class^="fa-"],
@@ -227,10 +170,6 @@ i.withoutIconMargin,
   flex-grow: 1;
 }
 
-.flex-column-for-ant-tabs-container > div.ant-tabs-content {
-  flex-grow: 1;
-}
-
 .flex-overflow {
   overflow-y: auto;
   flex-grow: 1;
@@ -245,10 +184,6 @@ i.withoutIconMargin,
   width: 135px;
 }
 
-img.img-50 {
-  width: 47%;
-}
-
 @media (min-width: 1200px) {
   .container {
     width: 1170px;
@@ -287,26 +222,11 @@ img.img-50 {
   padding-right: 15px;
 }
 
-.text {
-  padding: 2em 0;
-  ul {
-    padding: 1.5em;
-    list-style: square;
-    li {
-      padding-bottom: 10px;
-    }
-  }
-}
-
 .icon-big {
   font-size: 180px;
   color: rgb(58, 144, 255);
 }
 
-.errorChainCollapse .ant-collapse-header {
-  padding: 12px 0 0 32px !important;
-}
-
 @keyframes highlight-background {
   0% {
     background: #f6ff2e9c;
@@ -315,95 +235,47 @@ img.img-50 {
   }
 }
 
-.nice-scrollbar {
-  // These only work in chrome
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 5px;
-    border-radius: 0px;
-    background-color: rgba(255, 255, 255, 0);
-  }
-  &::-webkit-scrollbar-button:hover {
-    background-color: rgba(255, 255, 255, 0);
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-    border-radius: 5px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: #9c9c9c;
-    border-radius: 5px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: rgba(255, 255, 255, 0);
-  }
-  &::-webkit-scrollbar-track:hover {
-    background-color: rgba(255, 255, 255, 0);
-  }
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  // This is for firefox, to avoid showing a white line next to the scrollbar
-  scrollbar-width: thin;
-}
-
-#retoggle-mount-root > div {
-  top: 500px !important;
-}
-
-.cover-whole-screen {
+// Brain loading spinner
+.brain-loading {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgb(252, 252, 252);
+  background: @body-background;
   z-index: 300;
 }
 
-// Flex helper
-
-.Aligner {
+.brain-loading-container {
   display: flex;
   align-items: center;
   min-height: 24em;
   justify-content: center;
+  height: 80%;
 }
 
-.Aligner-item {
+.brain-loading-content {
   flex: 1;
-}
-
-.Aligner-item--top {
-  align-self: flex-start;
-}
-
-.Aligner-item--bottom {
-  align-self: flex-end;
-}
-
-.Aligner-item--fixed {
   flex: none;
   max-width: 50%;
+  width: 375px;
 }
 
-// Minimalistic progress bar
-.loader {
+.brain-loading-bar {
   height: 2px;
   width: 100%;
   position: relative;
   overflow: hidden;
-  background-color: #ddd;
+  background-color: @slider-track-background-color;
 }
-.loader:before {
+.brain-loading-bar:before {
   display: block;
   position: absolute;
   content: "";
   left: -200px;
   width: 200px;
   height: 2px;
-  background-color: #9f9f9f; // gray
+  background-color: @slider-rail-background-color; // gray
   animation: loading 1.5s ease infinite;
 }
 
@@ -437,27 +309,12 @@ img.img-50 {
   }
 }
 
-.highlight-togglable-button.ant-btn {
-  background-color: #2373c1 !important;
-  &:not(:hover) {
-    border-color: #2098de !important;
-  }
-}
-
-.feature-highlight-row {
-  flex-direction: row-reverse;
-}
-
-@smartphones .feature-highlight-row {
-  flex-direction: row;
-  float: none;
-}
-
 .link-in-progress {
   cursor: wait;
 }
 
 .keyboard-key-icon {
+  // TODO
   border: 2px solid #888;
   border-radius: 2px;
   min-width: 26px;
diff --git a/frontend/stylesheets/react_sortable_tree_overwrites.less b/frontend/stylesheets/react_sortable_tree_overwrites.less
index 1d41926400a..d1b32280cf5 100644
--- a/frontend/stylesheets/react_sortable_tree_overwrites.less
+++ b/frontend/stylesheets/react_sortable_tree_overwrites.less
@@ -8,6 +8,7 @@
   -webkit-box-shadow: none;
   box-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .rst__row {
@@ -50,7 +51,7 @@
 .rst__row.group-type,
 .rst__row.tree-type {
   &:hover:before {
-    color: rgba(0, 0, 0, 0.65);
+    color: @text-color;
     content: "\f0b2";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
@@ -68,14 +69,14 @@
 // Highlight the row when hovering and show the group settings icon for groups
 .rst__rowLabel {
   border-radius: 2px;
-  color: rgba(0, 0, 0, 0.65);
+  color: @text-color;
   height: 24px;
   .group-actions-icon {
     display: none;
   }
   &:hover {
-    background-color: #e6f7ff;
-    color: #40a9ff;
+    background-color: @body-background;
+    color: @link-color;
     cursor: pointer;
     .group-actions-icon {
       display: inline-block;
@@ -86,6 +87,7 @@
 .rst__rowSearchMatch {
   outline: none;
   .rst__rowLabel {
+    // TODO
     background-color: #bae7ff;
   }
 }
@@ -94,7 +96,7 @@
 .rst__collapseButton,
 .rst__expandButton {
   background: none;
-  background-color: white;
+  background-color: @body-background;
   -webkit-box-shadow: none;
   box-shadow: none;
   &:before {
@@ -129,10 +131,8 @@
 // Show the hierarchy lines less prominently
 .rst__lineBlock,
 .rst__lineChildren {
-  &:before {
-    background-color: rgba(0, 0, 0, 0.25);
-  }
+  &:before,
   &:after {
-    background-color: rgba(0, 0, 0, 0.25);
+    background-color: @border-color-base;
   }
 }
diff --git a/frontend/stylesheets/trace_view/_action_bar.less b/frontend/stylesheets/trace_view/_action_bar.less
index 79a8b0595ea..ac2594957f8 100644
--- a/frontend/stylesheets/trace_view/_action_bar.less
+++ b/frontend/stylesheets/trace_view/_action_bar.less
@@ -66,5 +66,13 @@
 
 .selected-layout-item {
   font-weight: bold;
-  background-color: rgb(230, 247, 255);
+  background-color: @layout-body-background;
+}
+
+.highlight-togglable-button.ant-btn {
+  // TODO
+  background-color: #2373c1 !important;
+  &:not(:hover) {
+    border-color: #2098de !important;
+  }
 }
diff --git a/frontend/stylesheets/trace_view/_right_menu.less b/frontend/stylesheets/trace_view/_right_menu.less
index b0ed8ac3383..8b0ec936870 100644
--- a/frontend/stylesheets/trace_view/_right_menu.less
+++ b/frontend/stylesheets/trace_view/_right_menu.less
@@ -29,6 +29,7 @@
   }
 
   .tree-hierarchy-header {
+    // TODO
     color: rgba(24, 144, 255, 0.9);
     margin-left: 16px;
     margin-right: auto;
@@ -43,6 +44,7 @@
   }
 
   .selected-tree-node {
+    // TODO
     background-color: rgba(148, 247, 153, 0.9);
   }
 
@@ -53,6 +55,7 @@
     }
   }
   .rst__rowSearchMatch .rst__rowLabel {
+    // TODO
     background-color: rgb(135, 213, 255);
   }
 }
@@ -69,7 +72,7 @@
   h5 {
     font-size: 16px;
     margin-bottom: 0;
-    color: rgba(0, 0, 0, 0.65);
+    color: @text-color;
   }
   max-height: 21px;
   overflow: hidden;
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index e0f01534931..f3afcf065c0 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -136,15 +136,18 @@
 .node-context-menu {
   z-index: 100;
   border-radius: 6px;
-  color: rgba(0, 0, 0, 0.65);
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: @text-color;
+  background: @component-background;
+  box-shadow: @box-shadow-base;
   .node-context-menu-item {
     font-size: 12px;
     height: 30px;
     line-height: 30px;
     padding: 0px 10px;
   }
+  .ant-menu {
+    border-right: none;
+  }
 }
 .node-context-menu-overlay {
   width: 100%;
@@ -154,8 +157,8 @@
 }
 
 #version-restore-sider {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border-left: 1px solid #e8e8e8;
+  box-shadow: @box-shadow-base;
+  border-left: 1px solid @border-color-base;
   padding-top: 15px;
   position: fixed;
   right: 0;
@@ -189,6 +192,7 @@
 }
 
 .isosurface-list-item:hover {
+  // TODO
   background-color: #e6f7ff !important;
 }
 
@@ -304,10 +308,10 @@
   }
 
   .ant-btn-danger {
-    background: #ea7d09;
+    background: @error-color;
 
     &:hover {
-      background: #ea7d09;
+      background: @error-color;
       color: white;
     }
   }

From e9c0cb1a75b9a0c8f28b84114781132bbd82cd66 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 18 Apr 2021 14:45:56 +0200
Subject: [PATCH 06/45] tweaks

---
 .../oxalis/view/right-menu/meshes_view.js       | 11 ++++-------
 .../react_sortable_tree_overwrites.less         |  3 +--
 .../stylesheets/trace_view/_right_menu.less     | 17 +++++++++++++++--
 .../stylesheets/trace_view/_tracing_view.less   |  5 -----
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/right-menu/meshes_view.js b/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
index 56b48b00db0..9874d20c9ad 100644
--- a/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
@@ -44,6 +44,7 @@ import { readFileAsArrayBuffer } from "libs/read_file";
 import { setImportingMeshStateAction } from "oxalis/model/actions/ui_actions";
 import { trackAction } from "oxalis/model/helpers/analytics";
 import { jsConvertCellIdToHSLA } from "oxalis/shaders/segmentation.glsl";
+import classNames from "classnames";
 
 export const stlIsosurfaceConstants = {
   isosurfaceMarker: [105, 115, 111], // ASCII codes for ISO
@@ -305,13 +306,9 @@ class MeshesView extends React.Component<
         >
           <div style={{ display: "flex" }}>
             <div
-              className="isosurface-list-item"
-              style={{
-                paddingLeft: 5,
-                paddingRight: 5,
-                backgroundColor: segmentId === isCenteredCell ? "#91d5ff" : "white",
-                borderRadius: 2,
-              }}
+              className={classNames("isosurface-list-item", {
+                "is-centered-cell": segmentId === isCenteredCell,
+              })}
               onClick={() => {
                 this.props.changeActiveIsosurfaceId(segmentId);
                 moveTo(seedPosition);
diff --git a/frontend/stylesheets/react_sortable_tree_overwrites.less b/frontend/stylesheets/react_sortable_tree_overwrites.less
index d1b32280cf5..01fe029fb19 100644
--- a/frontend/stylesheets/react_sortable_tree_overwrites.less
+++ b/frontend/stylesheets/react_sortable_tree_overwrites.less
@@ -87,8 +87,7 @@
 .rst__rowSearchMatch {
   outline: none;
   .rst__rowLabel {
-    // TODO
-    background-color: #bae7ff;
+    background-color: @blue-2;
   }
 }
 
diff --git a/frontend/stylesheets/trace_view/_right_menu.less b/frontend/stylesheets/trace_view/_right_menu.less
index 8b0ec936870..0dbe4db732d 100644
--- a/frontend/stylesheets/trace_view/_right_menu.less
+++ b/frontend/stylesheets/trace_view/_right_menu.less
@@ -5,6 +5,8 @@
   flex-grow: 1;
   min-height: 600px;
   width: 100%;
+  // No dark mode
+  background-color: white;
 }
 
 .flex-center {
@@ -15,6 +17,18 @@
   height: 100%;
 }
 
+.isosurface-list-item {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 2px;
+  &.is-centered-cell {
+    background-color: @blue-3;
+  }
+  &:hover {
+    background-color: @blue-1;
+  }
+}
+
 #tree-list {
   height: inherit;
   display: flex;
@@ -55,8 +69,7 @@
     }
   }
   .rst__rowSearchMatch .rst__rowLabel {
-    // TODO
-    background-color: rgb(135, 213, 255);
+    background-color: @blue-3;
   }
 }
 
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index f3afcf065c0..2882b732451 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -191,11 +191,6 @@
   margin-bottom: 12px;
 }
 
-.isosurface-list-item:hover {
-  // TODO
-  background-color: #e6f7ff !important;
-}
-
 #portal-navbarTracingSlot {
   width: 100%;
   line-height: normal;

From 0f79958c7ea06febe44e993566d2c532066209f0 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 18 Apr 2021 14:58:58 +0200
Subject: [PATCH 07/45] version restore

---
 .../view/action-bar/share_modal_view.js       |  4 +-
 .../oxalis/view/version_entry_group.js        |  3 +-
 .../javascripts/oxalis/view/version_list.js   |  2 +-
 .../javascripts/oxalis/view/version_view.js   |  2 +-
 .../stylesheets/trace_view/_tracing_view.less | 39 ++++++++++++-------
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js b/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
index c1196011a7a..19d31c72f3f 100644
--- a/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
+++ b/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
@@ -172,7 +172,7 @@ export default function ShareModalView(props: Props) {
           </Hint>
         </Col>
       </Row>
-      <Divider style={{ margin: "18px 0", color: "rgba(0, 0, 0, 0.65)" }}>
+      <Divider style={{ margin: "18px 0" }}>
         <i className={`fas fa-${iconMap[visibility]}`} />
         Visibility
       </Divider>
@@ -208,7 +208,7 @@ export default function ShareModalView(props: Props) {
           </RadioGroup>
         </Col>
       </Row>
-      <Divider style={{ margin: "18px 0", color: "rgba(0, 0, 0, 0.65)" }}>
+      <Divider style={{ margin: "18px 0" }}>
         <ShareAltOutlined />
         Team Sharing
       </Divider>
diff --git a/frontend/javascripts/oxalis/view/version_entry_group.js b/frontend/javascripts/oxalis/view/version_entry_group.js
index a490a90e31b..ae68f89925c 100644
--- a/frontend/javascripts/oxalis/view/version_entry_group.js
+++ b/frontend/javascripts/oxalis/view/version_entry_group.js
@@ -47,7 +47,7 @@ export default class VersionEntryGroup extends React.Component<Props, State> {
     const GroupHeader = () => (
       <List.Item
         style={{ cursor: "pointer" }}
-        className="version-entry"
+        className="version-entry version-entry-header"
         onClick={this.toggleExpand}
       >
         <List.Item.Meta
@@ -60,7 +60,6 @@ export default class VersionEntryGroup extends React.Component<Props, State> {
           avatar={
             <Avatar
               size="small"
-              style={{ backgroundColor: "transparent", color: "rgba(0, 0, 0, 0.65)" }}
               icon={this.state.expanded ? <CaretDownOutlined /> : <CaretRightOutlined />}
             />
           }
diff --git a/frontend/javascripts/oxalis/view/version_list.js b/frontend/javascripts/oxalis/view/version_list.js
index 07859b2e3d6..a6a90e37d74 100644
--- a/frontend/javascripts/oxalis/view/version_list.js
+++ b/frontend/javascripts/oxalis/view/version_list.js
@@ -149,7 +149,7 @@ class VersionList extends React.Component<Props, State> {
         locale={VERSION_LIST_PLACEHOLDER}
         renderItem={batchesOrDateString =>
           _.isString(batchesOrDateString) ? (
-            <List.Item style={{ fontWeight: "bold", backgroundColor: "#f5f5f5" }}>
+            <List.Item className="version-section">
               <div style={{ margin: "auto" }}>{batchesOrDateString}</div>
             </List.Item>
           ) : (
diff --git a/frontend/javascripts/oxalis/view/version_view.js b/frontend/javascripts/oxalis/view/version_view.js
index 21fdb5e159e..8a872b2debf 100644
--- a/frontend/javascripts/oxalis/view/version_view.js
+++ b/frontend/javascripts/oxalis/view/version_view.js
@@ -66,7 +66,7 @@ class VersionView extends React.Component<Props, State> {
             shape="circle"
             icon={<CloseOutlined />}
           />
-          <div style={{ fontSize: 12, marginBottom: 8, color: "rgba(0, 0, 0, 0.65)" }}>
+          <div style={{ fontSize: 12, marginBottom: 8 }}>
             <Alert
               type="info"
               message={
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index 2882b732451..d6010d05c0c 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -165,23 +165,34 @@
   z-index: 1000;
   top: @navbar-height;
   bottom: 0;
-}
 
-.version-entry {
-  padding: 3px;
-  &:hover:not(.active-version-entry) {
-    background-color: #e6f7ff;
+  .version-section {
+    font-weight: bold;
+    background-color: @layout-body-background;
+  }
+
+  .version-entry-header {
+    .ant-avatar {
+      color: @text-color;
+      background-color: transparent;
+    }
+  }
+  .version-entry {
+    padding: 3px;
+    &:hover:not(.active-version-entry) {
+      background-color: @blue-1;
+    }
+  }
+  .version-entry-indented {
+    padding-left: 40px;
+  }
+  .active-version-entry {
+    background-color: @blue-2;
   }
-}
-.version-entry-indented {
-  padding-left: 40px;
-}
-.active-version-entry {
-  background-color: #bae7ff;
-}
 
-.close-button > i {
-  margin-right: 0px;
+  .close-button > i {
+    margin-right: 0px;
+  }
 }
 
 .info-tab-block {

From 03b97e5403286fa8e79e1e7ac3eb88ac5833cbaa Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 18 Apr 2021 22:11:10 +0200
Subject: [PATCH 08/45] tweaks

---
 frontend/javascripts/admin/welcome_ui.js      | 28 ++---------
 .../javascripts/dashboard/spotlight_view.js   |  7 +--
 .../view/right-menu/dataset_info_tab_view.js  |  6 +--
 .../view/right-menu/mapping_info_view.js      |  2 +-
 frontend/stylesheets/_dashboard.less          | 47 ++++++++++++++-----
 frontend/stylesheets/_spotlight.less          |  4 +-
 frontend/stylesheets/dark.less                | 12 +++++
 frontend/stylesheets/main.less                |  3 +-
 .../stylesheets/trace_view/_action_bar.less   |  8 ----
 .../stylesheets/trace_view/_right_menu.less   |  5 +-
 .../stylesheets/trace_view/_tracing_view.less | 20 +++++++-
 11 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/frontend/javascripts/admin/welcome_ui.js b/frontend/javascripts/admin/welcome_ui.js
index 8a89cf2ceca..5d7ee9391f2 100644
--- a/frontend/javascripts/admin/welcome_ui.js
+++ b/frontend/javascripts/admin/welcome_ui.js
@@ -33,7 +33,7 @@ const WhatsNextAction = ({ title, description, icon, onClick, href, to }: WhatsN
     <React.Fragment>
       {icon}
       <div className="label">
-        <h1>{title}</h1>
+        <h2>{title}</h2>
         <p>{description}</p>
       </div>
       <RightOutlined className="chevron" />
@@ -66,9 +66,8 @@ type WhatsNextHeaderProps = {
 export const WhatsNextHeader = ({ activeUser, onDismiss }: WhatsNextHeaderProps) => (
   <div>
     <div
+      className="welcome-header-wrapper"
       style={{
-        backgroundColor: "rgba(88, 88, 88, 0.4)",
-        backgroundImage: "linear-gradient(0deg, rgb(255 255 255) 0%, rgb(231 247 255) 70%)",
         position: "relative",
       }}
     >
@@ -80,27 +79,8 @@ export const WhatsNextHeader = ({ activeUser, onDismiss }: WhatsNextHeaderProps)
       <div className="welcome-header-content">
         <img className="wk-logo" src="/assets/images/oxalis.svg" alt="webKnossos Logo" />
         <div className="text-and-button-container">
-          <h1
-            style={{
-              color: "#1F2937",
-              marginLeft: 56,
-              fontWeight: 200,
-              fontSize: 64,
-              lineHeight: "150%",
-              marginBottom: 0,
-            }}
-          >
-            Welcome to webKnossos!
-          </h1>
-          <div
-            style={{
-              margin: "0 20px 0px 60px",
-              fontWeight: 300,
-              fontSize: 20,
-              lineHeight: "150%",
-              color: "#6B7280",
-            }}
-          >
+          <h1>Welcome to webKnossos!</h1>
+          <div className="subtitle">
             <p
               style={{
                 fontSize: 20,
diff --git a/frontend/javascripts/dashboard/spotlight_view.js b/frontend/javascripts/dashboard/spotlight_view.js
index 4acd5df79df..0b3e0ddf2a1 100644
--- a/frontend/javascripts/dashboard/spotlight_view.js
+++ b/frontend/javascripts/dashboard/spotlight_view.js
@@ -34,12 +34,7 @@ const WelcomeHeader = ({ history }) => (
       backgroundSize: "cover",
     }}
   >
-    <div
-      style={{
-        backgroundColor: "rgba(88, 88, 88, 0.4)",
-        backgroundImage: "linear-gradient(0deg, #222222 0%, rgba(23, 103, 139, 0.73) 70%)",
-      }}
-    >
+    <div className="welcome-header-wrapper">
       <div className="welcome-header-content">
         <Row type="flex" align="middle" style={{ color: "white" }}>
           <Col xs={{ span: 0 }} xl={{ span: 4 }}>
diff --git a/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js b/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js
index ad746877c5d..a6f7e0a590a 100644
--- a/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js
@@ -392,8 +392,8 @@ class DatasetInfoTabView extends React.PureComponent<Props> {
           <tr>
             <td style={{ paddingRight: 4, paddingTop: 10, verticalAlign: "top" }}>
               <img
+                className="info-tab-icon"
                 src="/assets/images/icon-downsampling.svg"
-                style={{ width: 24, height: 24 }}
                 alt="Resolution"
               />
             </td>
@@ -420,8 +420,8 @@ class DatasetInfoTabView extends React.PureComponent<Props> {
                 <tr>
                   <td style={{ paddingRight: 4, verticalAlign: "top" }}>
                     <img
+                      className="info-tab-icon"
                       src="/assets/images/icon-voxelsize.svg"
-                      style={{ width: 24, height: 24 }}
                       alt="Voxel size"
                     />
                   </td>
@@ -432,8 +432,8 @@ class DatasetInfoTabView extends React.PureComponent<Props> {
                 <tr>
                   <td style={{ paddingRight: 4, paddingTop: 10, verticalAlign: "top" }}>
                     <img
+                      className="info-tab-icon"
                       src="/assets/images/icon-extent.svg"
-                      style={{ width: 24, height: 24 }}
                       alt="Dataset extent"
                     />
                   </td>
diff --git a/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js b/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
index 4dce0c3a08e..fbd04e88de7 100644
--- a/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
@@ -73,7 +73,7 @@ type State = {
 
 const convertHSLAToCSSString = ([h, s, l, a]) => `hsla(${360 * h}, ${100 * s}%, ${100 * l}%, ${a})`;
 export const convertCellIdToCSS = (id: number, customColors: ?Array<number>, alpha?: number) =>
-  convertHSLAToCSSString(jsConvertCellIdToHSLA(id, customColors, alpha));
+  id === 0 ? "transparent" : convertHSLAToCSSString(jsConvertCellIdToHSLA(id, customColors, alpha));
 
 const hasSegmentation = () => Model.getSegmentationLayer() != null;
 
diff --git a/frontend/stylesheets/_dashboard.less b/frontend/stylesheets/_dashboard.less
index 602e8315142..c9205e69ff7 100644
--- a/frontend/stylesheets/_dashboard.less
+++ b/frontend/stylesheets/_dashboard.less
@@ -27,6 +27,10 @@
   }
 }
 
+.welcome-header-wrapper {
+  background-color: @component-background;
+  background-image: linear-gradient(0deg, @body-background 0%, @blue-1 70%);
+}
 .welcome-header-content {
   max-width: 1600px;
   margin: auto;
@@ -49,6 +53,23 @@
     margin: auto;
     display: inline-block;
 
+    h1 {
+      color: @text-color;
+      margin-left: 56px;
+      font-weight: 200;
+      font-size: 64px;
+      line-height: 150%;
+      margin-bottom: 0;
+    }
+
+    .subtitle {
+      margin: 0 20px 0px 60px;
+      font-weight: 300;
+      font-size: 20px;
+      line-height: 150%;
+      color: @text-color-secondary;
+    }
+
     .whats-next-actions-grid {
       display: flex;
       flex-wrap: wrap;
@@ -75,17 +96,17 @@
           margin-left: 12px;
         }
 
-        h1 {
+        h2 {
           font-size: 16px;
           line-height: 18px;
-          color: #0d232d;
+          color: @text-color;
           margin-bottom: 4px;
         }
 
         p {
           font-size: 14px;
           line-height: 18px;
-          color: #6b7280;
+          color: @text-color;
           margin: 0;
         }
 
@@ -95,26 +116,26 @@
           margin: 8px;
         }
 
-        background: #ffffff;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        background: @component-background;
+        box-shadow: @box-shadow-base;
         border-radius: 3px;
       }
 
       a:hover {
-        background: #3b82f6;
+        background: @blue-7;
 
         .chevron,
         .action-icon {
-          color: #eff6ff;
+          color: @blue-1;
         }
 
-        h1 {
-          color: #eff6ff;
-        }
+        // h1 {
+        //   color: @blue-1;
+        // }
 
-        p {
-          color: #bfdbfe;
-        }
+        // p {
+        //   color: @blue-2;
+        // }
       }
     }
   }
diff --git a/frontend/stylesheets/_spotlight.less b/frontend/stylesheets/_spotlight.less
index 93eaa4d02f8..da2011e1f15 100644
--- a/frontend/stylesheets/_spotlight.less
+++ b/frontend/stylesheets/_spotlight.less
@@ -108,7 +108,7 @@
   height: 100%;
   padding: 24px;
   overflow-y: auto;
-  background-color: white;
+  background-color: @component-background;
   z-index: 1;
 
   @media @smartphones {
@@ -156,7 +156,7 @@
   transform: translateZ(0);
 
   &:hover {
-    box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.22), 0 5px 15px hsla(0, 0%, 0%, 0.1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.22), 0 5px 15px rgba(0, 0, 0, 0.1);
     transform: translateY(-2px) translateZ(0);
 
     .dataset-thumbnail-image {
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index d702673fa20..5fa4b0d595b 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -1,6 +1,18 @@
 @import "../../node_modules/antd/dist/antd.dark.less";
 @import "./main.less";
 
+.welcome-header-wrapper {
+  background-image: linear-gradient(0deg, @body-background 0%, @blue-2 70%);
+}
+.welcome-header-content .wk-logo {
+  filter: invert(1);
+  opacity: 0.8;
+}
+
+.info-tab-block .info-tab-icon {
+  filter: invert(1);
+}
+
 .lm_tab:hover .lm_title,
 .lm_tab.lm_active .lm_title {
   background: transparent !important;
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index d3d30e1f672..85aec753fca 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -314,8 +314,7 @@ i.withoutIconMargin,
 }
 
 .keyboard-key-icon {
-  // TODO
-  border: 2px solid #888;
+  border: 2px solid @border-color-base;
   border-radius: 2px;
   min-width: 26px;
   min-height: 26px;
diff --git a/frontend/stylesheets/trace_view/_action_bar.less b/frontend/stylesheets/trace_view/_action_bar.less
index ac2594957f8..4634a54a208 100644
--- a/frontend/stylesheets/trace_view/_action_bar.less
+++ b/frontend/stylesheets/trace_view/_action_bar.less
@@ -68,11 +68,3 @@
   font-weight: bold;
   background-color: @layout-body-background;
 }
-
-.highlight-togglable-button.ant-btn {
-  // TODO
-  background-color: #2373c1 !important;
-  &:not(:hover) {
-    border-color: #2098de !important;
-  }
-}
diff --git a/frontend/stylesheets/trace_view/_right_menu.less b/frontend/stylesheets/trace_view/_right_menu.less
index 0dbe4db732d..a08a1a21ad7 100644
--- a/frontend/stylesheets/trace_view/_right_menu.less
+++ b/frontend/stylesheets/trace_view/_right_menu.less
@@ -43,8 +43,6 @@
   }
 
   .tree-hierarchy-header {
-    // TODO
-    color: rgba(24, 144, 255, 0.9);
     margin-left: 16px;
     margin-right: auto;
     position: absolute;
@@ -58,8 +56,7 @@
   }
 
   .selected-tree-node {
-    // TODO
-    background-color: rgba(148, 247, 153, 0.9);
+    background-color: rgba(@green-7, 0.8);
   }
 
   .rst__rowLabel {
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index d6010d05c0c..5b8501716d7 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -200,6 +200,11 @@
     margin-bottom: 0px;
   }
   margin-bottom: 12px;
+
+  .info-tab-icon {
+    width: 24px;
+    height: 24px;
+  }
 }
 
 #portal-navbarTracingSlot {
@@ -227,6 +232,7 @@
   @dark-bg: #383d48;
   @dark-fg: #f1f1f1;
   @dark-border: #585868;
+  @primary-bg: #2174c1;
   @primary-border: #1890ff;
   @hover-border: #40a9ff;
 
@@ -274,7 +280,7 @@
   }
 
   .ant-btn-primary {
-    background-color: #2174c1 !important;
+    background-color: @primary-bg !important;
   }
 
   // Radio button
@@ -307,6 +313,10 @@
     background-color: @dark-border;
   }
 
+  .ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child {
+    border-right-color: @primary-border;
+  }
+
   // Primary button in button group
   .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) {
     border-right-color: @dark-border;
@@ -321,4 +331,12 @@
       color: white;
     }
   }
+
+  // Settings icon
+  .highlight-togglable-button.ant-btn {
+    background-color: @primary-bg !important;
+    &:not(:hover) {
+      border-color: @primary-border !important;
+    }
+  }
 }

From 5234ca1c809033ffc7b4ffc796de06fc3c21629b Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 18 Apr 2021 22:33:40 +0200
Subject: [PATCH 09/45] tweaks

---
 .../admin/user/permissions_and_teams_modal_view.js   |  2 +-
 frontend/javascripts/admin/welcome_ui.js             |  7 +------
 .../dashboard/advanced_dataset/dataset_table.js      | 12 ++----------
 3 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js b/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
index f5fbaf01bcf..110324f9c47 100644
--- a/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
+++ b/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
@@ -228,7 +228,7 @@ class PermissionsAndTeamsModalView extends React.PureComponent<TeamRoleModalProp
 
   getPermissionSelection(onlyEditingSingleUser: boolean, isUserAdmin: boolean) {
     const roleStyle = { fontWeight: "bold" };
-    const explanationStyle = { color: "rgba(0, 0, 0, 0.55", paddingBottom: 12 };
+    const explanationStyle = { paddingBottom: 12 };
     return (
       <React.Fragment>
         <h4>
diff --git a/frontend/javascripts/admin/welcome_ui.js b/frontend/javascripts/admin/welcome_ui.js
index 5d7ee9391f2..9aa73b9323a 100644
--- a/frontend/javascripts/admin/welcome_ui.js
+++ b/frontend/javascripts/admin/welcome_ui.js
@@ -65,12 +65,7 @@ type WhatsNextHeaderProps = {
 
 export const WhatsNextHeader = ({ activeUser, onDismiss }: WhatsNextHeaderProps) => (
   <div>
-    <div
-      className="welcome-header-wrapper"
-      style={{
-        position: "relative",
-      }}
-    >
+    <div className="welcome-header-wrapper" style={{ position: "relative" }}>
       <div style={{ position: "absolute", right: 0, top: 0, margin: 8 }}>
         <Tooltip title="Don't show this again" placement="left">
           <CloseOutlined onClick={onDismiss} />
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
index 1ca9c21421b..4c631b41a9f 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
@@ -233,17 +233,9 @@ class DatasetTable extends React.PureComponent<Props, State> {
           sortOrder={sortedInfo.columnKey === "isActive" && sortedInfo.order}
           render={(isActive: boolean) =>
             isActive ? (
-              <CheckCircleOutlined
-                style={{
-                  fontSize: 20,
-                }}
-              />
+              <CheckCircleOutlined style={{ fontSize: 20 }} />
             ) : (
-              <CloseCircleOutlined
-                style={{
-                  fontSize: 20,
-                }}
-              />
+              <CloseCircleOutlined style={{ fontSize: 20 }} />
             )
           }
         />

From 1959a3afe61fc570fce44880c0aeb3b2a5e5c8b8 Mon Sep 17 00:00:00 2001
From: Florian M <florian@scm.io>
Date: Mon, 19 Apr 2021 13:26:36 +0200
Subject: [PATCH 10/45] store theme setting in postgres

---
 app/controllers/UserController.scala          | 12 +++++++++
 app/models/user/MultiUser.scala               | 18 ++++++++++---
 app/models/user/Theme.scala                   |  8 ++++++
 app/models/user/UserService.scala             |  1 +
 conf/evolutions/070-dark-theme.sql            | 27 +++++++++++++++++++
 .../reversions/068-pricing-plan.sql           |  4 +--
 conf/evolutions/reversions/070-dark-theme.sql | 25 +++++++++++++++++
 conf/webknossos.latest.routes                 |  1 +
 tools/postgres/schema.sql                     |  5 +++-
 9 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 app/models/user/Theme.scala
 create mode 100644 conf/evolutions/070-dark-theme.sql
 create mode 100644 conf/evolutions/reversions/070-dark-theme.sql

diff --git a/app/controllers/UserController.scala b/app/controllers/UserController.scala
index 9d13576c7ab..e5b9f832354 100755
--- a/app/controllers/UserController.scala
+++ b/app/controllers/UserController.scala
@@ -17,6 +17,7 @@ import play.api.libs.json._
 import play.api.mvc._
 import utils.ObjectId
 import javax.inject.Inject
+import models.user.Theme.Theme
 
 import scala.concurrent.ExecutionContext
 
@@ -386,4 +387,15 @@ class UserController @Inject()(userService: UserService,
       } yield Ok(updatedJs)
     }
 
+  def updateSelectedTheme(userId: String): Action[Theme] =
+    sil.SecuredAction.async(validateJson[Theme]) { implicit request =>
+      for {
+        userIdValidated <- ObjectId.parse(userId) ?~> "user.id.invalid"
+        _ <- bool2Fox(request.identity._id == userIdValidated) ?~> "notAllowed" ~> FORBIDDEN
+        _ <- multiUserDAO.updateSelectedTheme(request.identity._multiUser, request.body)
+        updatedUser <- userDAO.findOne(userIdValidated)
+        updatedJs <- userService.publicWrites(updatedUser, request.identity)
+      } yield Ok(updatedJs)
+    }
+
 }
diff --git a/app/models/user/MultiUser.scala b/app/models/user/MultiUser.scala
index 80c0b0d0788..990ce7ccbab 100644
--- a/app/models/user/MultiUser.scala
+++ b/app/models/user/MultiUser.scala
@@ -6,6 +6,7 @@ import com.scalableminds.util.tools.{Fox, JsonHelper}
 import javax.inject.Inject
 import slick.jdbc.PostgresProfile.api._
 import com.scalableminds.webknossos.schema.Tables._
+import models.user.Theme.Theme
 import play.api.libs.json.Format.GenericFormat
 import play.api.libs.json.{JsObject, Json}
 import slick.lifted.Rep
@@ -20,6 +21,7 @@ case class MultiUser(
     isSuperUser: Boolean,
     _lastLoggedInIdentity: Option[ObjectId] = None,
     novelUserExperienceInfos: JsObject = Json.obj(),
+    selectedTheme: Theme = Theme.auto,
     created: Long = System.currentTimeMillis(),
     isDeleted: Boolean = false
 )
@@ -33,7 +35,8 @@ class MultiUserDAO @Inject()(sqlClient: SQLClient)(implicit ec: ExecutionContext
 
   def parse(r: MultiusersRow): Fox[MultiUser] =
     for {
-      novelUserExperienceInfos <- JsonHelper.parseJsonToFox[JsObject](r.noveluserexperienceinfos)
+      novelUserExperienceInfos <- JsonHelper.parseJsonToFox[JsObject](r.noveluserexperienceinfos).toFox
+      theme <- Theme.fromString(r.selectedtheme).toFox
     } yield {
       MultiUser(
         ObjectId(r._Id),
@@ -42,6 +45,7 @@ class MultiUserDAO @Inject()(sqlClient: SQLClient)(implicit ec: ExecutionContext
         r.issuperuser,
         r._Lastloggedinidentity.map(ObjectId(_)),
         novelUserExperienceInfos,
+        theme,
         r.created.getTime,
         r.isdeleted
       )
@@ -51,9 +55,9 @@ class MultiUserDAO @Inject()(sqlClient: SQLClient)(implicit ec: ExecutionContext
     val novelUserExperienceInfosString = sanitize(u.novelUserExperienceInfos.toString)
     for {
       _ <- run(sqlu"""insert into webknossos.multiusers(_id, email, passwordInfo_hasher, passwordInfo_password,
-                       isSuperUser, novelUserExperienceInfos, created, isDeleted)
+                       isSuperUser, novelUserExperienceInfos, selectedTheme, created, isDeleted)
                      values(${u._id}, ${u.email}, '#${sanitize(u.passwordInfo.hasher)}', ${u.passwordInfo.password},
-                      ${u.isSuperUser}, '#$novelUserExperienceInfosString',
+                      ${u.isSuperUser}, '#$novelUserExperienceInfosString', '#${u.selectedTheme}',
                      ${new java.sql.Timestamp(u.created)}, ${u.isDeleted})
           """)
     } yield ()
@@ -94,6 +98,14 @@ class MultiUserDAO @Inject()(sqlClient: SQLClient)(implicit ec: ExecutionContext
                         where _id = $multiUserId""")
     } yield ()
 
+  def updateSelectedTheme(multiUserId: ObjectId, selectedTheme: Theme)(implicit ctx: DBAccessContext): Fox[Unit] =
+    for {
+      _ <- assertUpdateAccess(multiUserId)
+      _ <- run(sqlu"""update webknossos.multiusers set
+                            selectedTheme = '#$selectedTheme'
+                        where _id = $multiUserId""")
+    } yield ()
+
   def removeLastLoggedInIdentitiesWithOrga(organizationId: ObjectId): Fox[Unit] =
     for {
       _ <- run(sqlu"""
diff --git a/app/models/user/Theme.scala b/app/models/user/Theme.scala
new file mode 100644
index 00000000000..48b47c7f624
--- /dev/null
+++ b/app/models/user/Theme.scala
@@ -0,0 +1,8 @@
+package models.user
+
+import com.scalableminds.util.enumeration.ExtendedEnumeration
+
+object Theme extends ExtendedEnumeration {
+  type Theme = Value
+  val light, dark, auto = Value
+}
diff --git a/app/models/user/UserService.scala b/app/models/user/UserService.scala
index dc308a41143..b650903fad5 100755
--- a/app/models/user/UserService.scala
+++ b/app/models/user/UserService.scala
@@ -331,6 +331,7 @@ class UserService @Inject()(conf: WkConf,
         "isEditable" -> isEditable,
         "organization" -> organization.name,
         "novelUserExperienceInfos" -> novelUserExperienceInfos,
+        "selectedTheme" -> multiUser.selectedTheme,
         "created" -> user.created,
         "lastTaskTypeId" -> user.lastTaskTypeId.map(_.toString)
       )
diff --git a/conf/evolutions/070-dark-theme.sql b/conf/evolutions/070-dark-theme.sql
new file mode 100644
index 00000000000..af7bd118dcd
--- /dev/null
+++ b/conf/evolutions/070-dark-theme.sql
@@ -0,0 +1,27 @@
+-- https://github.com/scalableminds/webknossos/pull/5407
+
+START TRANSACTION;
+
+DROP VIEW webknossos.userInfos;
+DROP VIEW webknossos.multiUsers_;
+
+CREATE TYPE webknossos.THEME AS ENUM ('light', 'dark', 'auto');
+ALTER TABLE webknossos.multiUsers ADD COLUMN selectedTheme webknossos.THEME NOT NULL DEFAULT 'auto';
+
+CREATE VIEW webknossos.multiUsers_ AS SELECT * FROM webknossos.multiUsers WHERE NOT isDeleted;
+
+-- identical to previous (has to be dropped first because of the dependency)
+CREATE VIEW webknossos.userInfos AS
+SELECT
+u._id AS _user, m.email, u.firstName, u.lastname, o.displayName AS organization_displayName,
+u.isDeactivated, u.isDatasetManager, u.isAdmin, m.isSuperUser,
+u._organization, o.name AS organization_name, u.created AS user_created,
+m.created AS multiuser_created, u._multiUser, m._lastLoggedInIdentity, u.lastActivity
+FROM webknossos.users_ u
+JOIN webknossos.organizations_ o ON u._organization = o._id
+JOIN webknossos.multiUsers_ m on u._multiUser = m._id;
+
+
+UPDATE webknossos.releaseInformation SET schemaVersion = 70;
+
+COMMIT TRANSACTION;
diff --git a/conf/evolutions/reversions/068-pricing-plan.sql b/conf/evolutions/reversions/068-pricing-plan.sql
index 0bd0a43e0ff..e0937bc6fb3 100644
--- a/conf/evolutions/reversions/068-pricing-plan.sql
+++ b/conf/evolutions/reversions/068-pricing-plan.sql
@@ -3,8 +3,8 @@ START TRANSACTION;
 DROP VIEW webknossos.userInfos;
 DROP VIEW webknossos.organizations_;
 
-ALTER TABLE webknossos.organizations DROP COLUMN;
-DROP TYPE webknossos.PRICING_PLANS AS ENUM ('Basic', 'Premium', 'Pilot', 'Custom');
+ALTER TABLE webknossos.organizations DROP COLUMN pricingPlan;
+DROP TYPE webknossos.PRICING_PLANS;
 
 CREATE VIEW webknossos.organizations_ AS SELECT * FROM webknossos.organizations WHERE NOT isDeleted;
 
diff --git a/conf/evolutions/reversions/070-dark-theme.sql b/conf/evolutions/reversions/070-dark-theme.sql
new file mode 100644
index 00000000000..3cdcaab5b15
--- /dev/null
+++ b/conf/evolutions/reversions/070-dark-theme.sql
@@ -0,0 +1,25 @@
+START TRANSACTION;
+
+DROP VIEW webknossos.userInfos;
+DROP VIEW webknossos.multiUsers_;
+
+ALTER TABLE webknossos.multiUsers DROP COLUMN selectedTheme;
+DROP TYPE webknossos.THEME;
+
+CREATE VIEW webknossos.multiUsers_ AS SELECT * FROM webknossos.multiUsers WHERE NOT isDeleted;
+
+-- identical to previous (has to be dropped first because of the dependency)
+CREATE VIEW webknossos.userInfos AS
+SELECT
+u._id AS _user, m.email, u.firstName, u.lastname, o.displayName AS organization_displayName,
+u.isDeactivated, u.isDatasetManager, u.isAdmin, m.isSuperUser,
+u._organization, o.name AS organization_name, u.created AS user_created,
+m.created AS multiuser_created, u._multiUser, m._lastLoggedInIdentity, u.lastActivity
+FROM webknossos.users_ u
+JOIN webknossos.organizations_ o ON u._organization = o._id
+JOIN webknossos.multiUsers_ m on u._multiUser = m._id;
+
+
+UPDATE webknossos.releaseInformation SET schemaVersion = 69;
+
+COMMIT TRANSACTION;
diff --git a/conf/webknossos.latest.routes b/conf/webknossos.latest.routes
index 500a051dae1..6f511f1b468 100644
--- a/conf/webknossos.latest.routes
+++ b/conf/webknossos.latest.routes
@@ -48,6 +48,7 @@ GET           /users/:id                                                       c
 PATCH         /users/:id                                                       controllers.UserController.update(id: String)
 PUT           /users/:id/taskTypeId                                            controllers.UserController.updateLastTaskTypeId(id: String)
 PUT           /users/:id/novelUserExperienceInfos                              controllers.UserController.updateNovelUserExperienceInfos(id: String)
+PUT           /users/:id/selectedTheme                                         controllers.UserController.updateSelectedTheme(id: String)
 GET           /users/:id/tasks                                                 controllers.UserController.userTasks(id: String, isFinished: Option[Boolean], limit: Option[Int], pageNumber: Option[Int], includeTotalCount: Option[Boolean])
 GET           /users/:id/loggedTime                                            controllers.UserController.userLoggedTime(id: String)
 POST          /users/loggedTime                                                controllers.UserController.usersLoggedTime
diff --git a/tools/postgres/schema.sql b/tools/postgres/schema.sql
index d0d0161edce..d49228998b3 100644
--- a/tools/postgres/schema.sql
+++ b/tools/postgres/schema.sql
@@ -21,7 +21,7 @@ START TRANSACTION;
 CREATE TABLE webknossos.releaseInformation (
   schemaVersion BIGINT NOT NULL
 );
-INSERT INTO webknossos.releaseInformation(schemaVersion) values(69);
+INSERT INTO webknossos.releaseInformation(schemaVersion) values(70);
 COMMIT TRANSACTION;
 
 
@@ -323,6 +323,8 @@ CREATE TABLE webknossos.user_dataSetLayerConfigurations(
   CONSTRAINT viewConfigurationIsJsonObject CHECK(jsonb_typeof(viewConfiguration) = 'object')
 );
 
+
+CREATE TYPE webknossos.THEME AS ENUM ('light', 'dark', 'auto');
 CREATE TABLE webknossos.multiUsers(
   _id CHAR(24) PRIMARY KEY DEFAULT '',
   email VARCHAR(512) NOT NULL UNIQUE CHECK (email ~* '^.+@.+$'),
@@ -331,6 +333,7 @@ CREATE TABLE webknossos.multiUsers(
   isSuperUser BOOLEAN NOT NULL DEFAULT false,
   novelUserExperienceInfos JSONB NOT NULL DEFAULT '{}'::json,
   created TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  selectedTheme webknossos.THEME NOT NULL DEFAULT 'auto',
   _lastLoggedInIdentity CHAR(24) DEFAULT NULL,
   isDeleted BOOLEAN NOT NULL DEFAULT false,
   CONSTRAINT nuxInfoIsJsonObject CHECK(jsonb_typeof(novelUserExperienceInfos) = 'object')

From 2121fa37575dab736e11cb0d48802d79b1638392 Mon Sep 17 00:00:00 2001
From: Florian M <florian@scm.io>
Date: Mon, 19 Apr 2021 13:38:27 +0200
Subject: [PATCH 11/45] adapt test db + snapshots to selectedTheme property

---
 .../backend-snapshot-tests/misc.e2e.js.md     |   1 +
 .../backend-snapshot-tests/misc.e2e.js.snap   | Bin 1198 -> 1222 bytes
 .../backend-snapshot-tests/users.e2e.js.md    |  12 ++++++++++++
 .../backend-snapshot-tests/users.e2e.js.snap  | Bin 2142 -> 2193 bytes
 test/db/multiusers.csv                        |  12 ++++++------
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.md b/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.md
index 420c4ca91af..5db36f1cc79 100644
--- a/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.md
+++ b/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.md
@@ -45,6 +45,7 @@ Generated by [AVA](https://avajs.dev).
       lastTaskTypeId: null,
       novelUserExperienceInfos: {},
       organization: 'Organization_X',
+      selectedTheme: 'auto',
       teams: [
         {
           id: '570b9f4b2a7c0e3b008da6ec',
diff --git a/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.snap b/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.snap
index f14bbf54af7325307a0bf6948b4ceae037795a4c..18862622448826475e1d734e0b310874beb8a085 100644
GIT binary patch
literal 1222
zcmV;%1UdUbRzV<BZeeh9Xm4~Nb}|YA0FC>OONG`lNtmil$e27w+8>Ju00000000B6
zR$piwMI4^Fy?@Cixr=E-6cG_h1xs#C&g9ZiXwoDSO<GAWwe;mWyE}I`&EC$rGneE9
z^`R)DQV<0D(3dD8hzR;%DMf-0rA4KE_d)23ihmxg&jx?H_a}FA8xzHYkDZ(O=C{B3
z&G*f04k4tWPfpzadFtx+y(?=jeqsCi4UD|sFCm0}_+aRdjnBS(^}V-Wd}`<D_C4(P
zejZ2Y{+~CdZ%#kBmb&u#gV__8ZS41E5?;KRKOe_&{{?tn1iT6O0`NWHD1^TNcn5G3
za32tbs80f}0fumN5J%4#m#8T*ZZ%V>6vF)o_aU4FPUsNU5RMGuL1I}8+@-AO%n?Zh
zmHtR5rSOJ`ZS##eYEwxYL{VoZ5gx$!F1)(Q9VS)DXWgnOtx#gsnsg;%(qh7_3c<KD
z%ZY0>`;U~Qtcc_3bb-6o@+d2lA{`ZGT9RUVgBoiN7lNz79#w*^(3h&rrDDb^GbeaO
z57W&GcV&(h3d>}3-YU{1>J(+^+@{Y6htT87jNy(M=eS)h)8$=ySY2R=S@bknH;B8$
zi+iOpz{DIa^F>EU;+Qm;l(@tVG4Bw=rdBZHP^D_v%=AJv>b>gP&B14zCEcyxD0ho#
ztFbd_VG`R5o`-5#B5h|Z>InG9r6hSO^Tf_u5LtQWBQSeyh4Kn@W;}IJYtcDNO%5UI
zHNlU8jO&Vw%(yP8;ZU=cOeWiu{*VJt3AhTl3-}dzN=9e_KmnHl9|67t{0<lfxlIEu
z0^S0A1^8)y^$#j5h?y=WvQg7;^v+x%lEVroLd%4;N;y&$)XmSFY*x%K*r>_Nz6*BR
zT#x{@P?u5IR8_4#1?CEQnv`j?Ct44y@ItKRijij~bz`cKvBt=xsnd+5>sgCT(1J20
z&cuu<**a~Rvva|$-4g0(0!AI~)XKanf@PKhwbn(mOdK$#8yu*YiFu1juRy_sKAQ;X
zC(2~4QT@Mysvq}=?Uf48@|s$w0gsdeG3II&x>&E7*6;7g5p8!zMjXCQ?NzAsd~0hK
zokG`P(g)rk4ttqMI8IvcIMdddKd(&b7jQC~prl-hw&m&_gnk;Q+R}(fO3K2MeW(K6
z>zX3lP^WC;ouisEio@?hfcF7gfKQvj8h#76`OSBLT3?MAX2YxzgnN<KOkjLn^PLH;
zAED*Vg682cG(-M7=b-r<;1$4DSXn@%E5%zt`4+GPcp{?Eqh0g`pezAi1AM5`V_mM+
z_P32ux6QcGu#Kti9}_v)m46g<*lCkt%-h8L`KR|!U@Ds(GsY)%E1R7%vKf6$rv+<V
z^=(iBs`-Kv82^t6OdKSEgH#~Xc8qH}JSPArQKt-XhYWjt6@j3hM@^Nzf$A!Y<Ji~G
zyzPBJ0s7#mKL%I=RPa7N!Lco%d<^&o@Ef2Hj^ks174>G&x-=A3&j9~>N32$CPWHHR
z;j}!(9S4H&J?hoNMC02kI0B5HHC-aj(m^)dtiMb(aCP^dKkVJ}aLwBsZl@9#@_1I)
k^@FZ2;5Ja!7m)w|x4xcM*8ggSQ?SCn0Z*jxqKFFs0GQlWHUIzs

literal 1198
zcmV;f1X24zRzV<BZeeh9Xm4~Nb}|YA0IXAH>E~YeTt1Eo6_x{StRIUA00000000B6
zR!wXhMHrp&`Y*qBNE-!IRa{V!sNy9FiQTGFZ4w|NX&`k<RUw(#-LXB%ddKX{CNYO{
zsHi}oo+`ni9N>b)fddC1>LKFPst4M050!c<ATAUnP9VNr|HPhbNI+P6+VRXc-+uGv
zy_qc{gf#T!nOi^RKH0f@ZQaGM?R>k9k^lQSg3yD{M}OV?>YK~gKYZi4zfSDj#X;|t
zBtj2=+dh5s^y3@pYwtZSoVjA-pf^6?=Su|haS{(*g6CU+_W@r6?gLIh`b&V105<^-
z0ddIsEZ_!U6vsz!eA!r|ro_0@OsCTb4<S5=a0+4~N3e!)Yy^)G%X*2slvSKLB8i|f
z7>T5nxKU!;d~=T4RMJ+UXhx<G9>(|wcy&8=jChh4Tu)S2D6tyta3y2PV#4%<VB9Hi
z;#%$gXR1=x#i>lD%w4ZG!D^&JCxn@iq>|aB#=66W;A*mCO0pIDw#Qs5@>Y#G;VXKQ
zZq>Ofi>zE;B3tuTg)UO3BC8j+f{17YJ*~_b>zQ$Z+g^<>?S@Cy1y-3w&yfv-xQo29
zUm3$p%+VTOaD*g|NyCE%*0>?&9b(wj3XeEa_Y9kveySGVtFGN1e7Q~OE`Jl;tz@j$
z&SZp1Y(IGk*s?^%p0=nX;2)Qgl&CBbyJSIT<(*H#?DZAO>(t5n>Y&zwbDo+UQZzZi
z$3ezTMaJ^3OBy)RZlzMGE~SsG!Ltsy4!8q&1W19h3jhLm7w{S2HsB|~6Ck%)z?*=p
zfbD~ouQHY}T}ot&&uIMiTsc<6N=%H_2<y-|?g{Fa@@Ly@1!PT_ycRg%UY7#~Kq=H^
z6gE^<YG0YTLY^Zv+U|)r(<*Th)^Wu63$wbBD^FXKWY*N_w597=i_FlnG9}4G-jr;E
zc8uA(VAgF1b#wqm9qu%0+!NsvOM_CIf>|OCn9>bT)X&7c#iUPAc)*}dgbWI0ve9Dy
z&oK6reqc9K(E@L%JPrFnMG#`KQKt({&a|OmNB-#Ak#UD_P<s`ap6_hUf>YjekPLz^
zh{N6?5{{D2JC?gTOBaLWN44GLF-b{H_(F~pp!*d~5o4rRjLF_nO&P^e6B00h09<Y-
zYdI*|<)A><Dr*`s%$EIP2=^nuIe_s8THrNkeFrUn7BnCE%}DUhu_!{v0LuUoRTdE2
zQ{u-E@+sgR;CD4Vz9)P<hR|`q>i{pNgeUfRRXf-WM$-&aM#~JQGG&N~BJ9dPN;T?q
zi7Vl6V(H@Z2N#gbW+#oQS>4KJb4GSrpVVpDno`{uR)A`$umYz3V*xXVDc~>+Om`j3
znhwtyz**EQL);_7{y;?_s8>;2Wmi#CWl5a)9-6oOPa?n|9Ns4Zi-0;lz$ZB2pZQ+^
z?f`xP41%Rk0#?-XUfZLgxa#cS3r4KgZBF*NMBxm4kvk3~;rsB_$3*LEDLey=pEq41
z&FWz`+-$x~HL$mPb076@Zn(H@4tGwK3wbK5>-u5W7jnic>kFy>|65;Qr|N&T!W^vd
MZ)FIhg<1;$09`~tIsgCw

diff --git a/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/users.e2e.js.md b/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/users.e2e.js.md
index b8967eec209..87d2bb9b524 100644
--- a/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/users.e2e.js.md
+++ b/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/users.e2e.js.md
@@ -25,6 +25,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -59,6 +60,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -83,6 +85,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -107,6 +110,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'light',
         teams: [
           {
             id: '69882b370d889b84020efd4f',
@@ -138,6 +142,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -179,6 +184,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -213,6 +219,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -237,6 +244,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'auto',
         teams: [
           {
             id: '570b9f4b2a7c0e3b008da6ec',
@@ -261,6 +269,7 @@ Generated by [AVA](https://avajs.dev).
         lastTaskTypeId: null,
         novelUserExperienceInfos: {},
         organization: 'Organization_X',
+        selectedTheme: 'light',
         teams: [
           {
             id: '69882b370d889b84020efd4f',
@@ -291,6 +300,7 @@ Generated by [AVA](https://avajs.dev).
       lastTaskTypeId: null,
       novelUserExperienceInfos: {},
       organization: 'Organization_X',
+      selectedTheme: 'auto',
       teams: [
         {
           id: '570b9f4b2a7c0e3b008da6ec',
@@ -330,6 +340,7 @@ Generated by [AVA](https://avajs.dev).
       lastTaskTypeId: null,
       novelUserExperienceInfos: {},
       organization: 'Organization_X',
+      selectedTheme: 'auto',
       teams: [
         {
           id: '570b9f4b2a7c0e3b008da6ec',
@@ -369,6 +380,7 @@ Generated by [AVA](https://avajs.dev).
       lastTaskTypeId: null,
       novelUserExperienceInfos: {},
       organization: 'Organization_X',
+      selectedTheme: 'auto',
       teams: [
         {
           id: '570b9f4b2a7c0e3b008da6ec',
diff --git a/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/users.e2e.js.snap b/frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/users.e2e.js.snap
index fabd37d4b5ccd5231ab1ecc185f4f86ad7f98b42..b7c67b5b54e57973819c1e6f610de8cf8f74d1c6 100644
GIT binary patch
literal 2193
zcmV;C2yXX5RzV<BZeeh9Xm4~Nb}|YA04$zI4B(CO>ZAJLppU1_#2<?Y00000000B+
zntzNOWf{lc+1b6@`>{Xn`cs5dnt%w6%+Bo2%wnPK^?J62_Nu)~A=)}W-f6eo?p}81
zE?jHHQk7`wA10nOHbF{lDwIY=#TqoIQAFqoG;%>yei#)K+CW?CRV>8s&hBmZ-repV
zcP(9TF8O3;-+A_Zo_XJApLw2nZiEoxC&AbF-#qtn@}8%UoVejT^64gy<o+`4gv>j*
zJ^ZnF^s5UOpZ=M?_4GBIGa8>w$buDzkDT0pXzp9xw+y}c^PA^$&gg-w3AyDjtG8V8
z#}^iC`-10Rn_eHjjB`da0wLCq{;_gqqNk^E=>ENXubkb$Iio3=kd6IY{<FQ~-|KcP
zIW^~rO!teNGrCnF<i1~jbmzKXesagL@2%SW?59TCIcIbzPRMX*&d8i^b-nTUtXFT_
zy&`**b4INNgz%)%xdYD6`BWTl087DYuntV)8rnGDqD)2`<hZf3P$)#WX2N+1*TQj$
z`~*0ACU@kVQw0mdd7RUGbEkYxL%YvINDH_YP;e)B5d0OK0hjQE%m)VeGB^m1fKhO{
zmyjOtMQ_2XhHiZmHEhmPJPn7#j+!Be>;{j4Q=r{P$aNqI?gkHn!{8*C-ayFpKnHh$
zAA-MwU?ZcZsZ7lk5V;0)gRg-5!IR)^aH$_E!DqpC@LezrPJmfWge(F!xVMQ>6D(8n
z6No$tUIH_k2@%1qU?+G8JPD41X)T0A!RNr8U_W>kcw4dHt&Ey!<JANR*G9MyWIWSz
zd*y568jTFqY-&26y$w%vTD~5Rk@3-_mgpV(G`l}bGwT;E%o<v+ruWihB4uVjZlsfh
z3vyf+Oc;}Fp||(ZOoFBinq{VJvJ#oBy;4ikv5|)Sw2Yi5VHWkq6hV($QB%|uL!ePp
z5L8o>sl|N7pU5sU?8HERW>1K{VO%z0bLFcoxSC3*29xRjY+fSFNQ4vFPR-V`)Lx;b
zv<);<d7|b-c8Qs=a|={iptV=a+K!<Kd$6$jZ&zA<e@?J;rMw;KL3W*jIiVgcdt1+7
zA6=GTGd|$#NU~%{W~b5vw08|wdP#9>mZhvTyFIPx%myu$*sR%!bgHPMyJT?vTIMT(
zEbWD#QL|?wEwNSWx6_UpJ4(#(*;Gqr&#OOnoWmavP0b%Ws`#UP0sN8mwu|hK_ubt*
zF@I#&sfs_2)Q3O5d13u=@j3kQLxCyz<Kim*sMNDRvSO3-$1@LyCgzXqI#uyUB~Tas
zxF&Ex{ju{L{<wK+{@7W?AJq@OKd$}L^ojW+yG~X7ao5H4M_+GZ!$#Y&<B<vu>E}Fu
z#_%fvCeP%VbawnzFPrRo&tL*ikdRg|D>%OX@QtfKn5mkpDr#XBdFEpBs~82X)f9xP
zDhQV;5HY#RC}^vuV0u*rGs+ZnVDhDmf|=tK1e|JY+~)F{ZsdKG^Eovf@6>3Y4vy7u
z+k(X!?gznq4c9z2@KRo?_&FFF|M~h*p_KIY;w%I9f!~K1pJ*uC^<xk@39bwivOLU)
zH<pQ~AYz04;3-zzUnc%KL{5RL+6cL+jS&x&iT6Qd06YMOS@HHV@#7E~1y`fmU)j!x
z&nhdk_}X=ho{x)?UWkhZ`vXm6d+@8Pn$>wzC2^)P_aj}uHd5PwxT=b}qzI;}#&tC+
zhyt}ti4Dw^3}C}%B?F{M8X!-^fQhU?^nI`elQ&=@TTt5ox#AW?&({`+C2ySCQ#jgS
z7x)8s&3WTQNEe`BJJ<&fgJWQ(hmcQz&x5anUw~IV%x{i+&tGl4<8fbY)Yq$xEBLxd
z-52u}Go?NZ5AZc!V^+_jIPW(w!98FPc!(dL26!i#2K<yCO9TGN7t??l-h3JWot-#c
z4z_|l?0Z;WnTfxJ$W!1QFxOWz3+RH#P2di&mlbbxpQLs5By}4HZsWjh9Q=PiUERjP
z6#UU`9Jq}Gw{cK6FKXS!f!jE!Cx3Js2X5oQZ5+6b1NU`DUA^vjA8di!IB**W?yC*A
zaZo*vavKMA9>zcDPtuYw?wN<9SgTo(cc%Hp*uNLY2f#4k5!*ikmVzzd+u#s*A>TzH
zbHR<E4-A3FzzJ|^jUUl_5c?(Gjs5i%`){p}*nfNF*uM|M2Uxd#w^j1vnBXuN0k81Y
zs^p2s{-ed%|6y-2_Afsh`v-A)2Y48au(7{9n7;)Pf*>w|n`;Dfh;M<&Ht=KcJS*;Z
zV}E_dejjOrb3}AiHFZ^%q=+V|h8WQVU6f)<JgUcO6vo8lXk0KAAu6c4VOhE&E0!G9
zOe$EaWQw|}M~x_rs1ZG`#WhJVOlnZY&=o_DiGpevQAwALh^}KU#fssgAed5A)gxM5
zh{Xg^6J^;_Ekll4f}}(YQ;x;rQd}|>kqT186bun)x@N{On_<Ocimr<>Sfk385YuC(
zA)&;vEXj;f$&4F<q{cN_5EWCEBbpeYib^F>6fM{h({X3fSZ+<lh$2U5$)k`LaFoHq
zT93ngZ~Vq$?|h)pJI5S*aJnBnLuz%p`Qs271($QAYRm{Y3dikio7tanBHOamYHFnM
zOe+M1>zwe_!JQ3Xp+0ReNmKT+lua`OTJO7>&(p-^yNy*R#J%i-K<<A99%b*PEcfM~
zhscZIzpSXQ=570u>6E>(aI0R{+XtzZDVY6oW9{$zt9<`&jkPM>%V7N~kOn)!_rVAl
z&1FN#ZkB*e;G5ug;P}O_bp4afcEW4=%$y-zV;9`K=X~cq*Vaegv!Zg|vl+u*nrh9v
zyHM}u5~xScQ_cIUV&3z{*_wCG*}P|E;s1{A0taf>yiY^qIp9YUGp}~dy9y$o0bc_L
T-I}+)^Pc|!74bZkJU{>d?oUt7

literal 2142
zcmV-k2%+~uRzV<BZeeh9Xm4~Nb}|YA03$m9b`f>@To}e6b0y(0WFLzN00000000B+
znSXE;XBo%ey}e5=KQ4DiDNu(J%OA9iSoe1KcK0e$NJ87RO(P_XFm;0avt7vD#k)%|
zt(57sMVYp0f6x}SKd@DpI{qVdB!fB@9YqJGm{F!OT071-=#<vhQo$dH-`o2^^4_tR
z2Ck&cX6BQ9@7?F#=iT>x?s=c**&~FIAZdGp{rT@+Pd@p|_&=6CE1ha$Nd9juO30G$
z-4|J$5VtPxJT<0mKJ_ui>0LdSkn4L6j=#HW@4|oguG@a%N1s{BIK3^430e1tzPms2
z+oRXt`$gYhH~jt3m5kH-!nK50d;W6U9J{~2ar?KPe}2)t2FB^lh=klZeD}ZZ>-guu
zgDc-_KalBtjd6PKjT7?R{;MAz`00%gzPbC;cl~D7$ytokyF(`AP`Ld_`x7_3{foKB
zHh!Zgdz^84mwt*6mNYs~zyz6qg6lGH6X*j2;4-Em$^=$qGU_P9lv?3%m@v(R@e`(n
zVeG;HXdTR78K?OPEDYmwnvdq2Y+gh3Jv9FV+I@tq0U7Xha0na+%`Dat^no0B8tezh
zK-5o2m%liphF)!hsplA9xfzK>92K`iL<J9kec)9<0)z-)H5dYqf-!IuunmM<1A4$F
z@L~g{qNzf~%Mke`cmrI8<y!_UumkJ`N5Co29wcNru)$Zr9`HvHX`)oLRj9ZcA|D5<
zz?Z-a;2<~y7Bpk)zyNpvd<VP&PJk;~2<ZePEtHDOCaVY$2LHp5@y*WfO(4oN>KRkb
znTGS(-*BMI3iLCSOu$U4_F(DLyy2{wS-)a=R#yjAZO}~GDI<HWo=y^`jbR?f6iSjU
z<`;&{jBTcLGfNHGWZ9W)?lv`PmU<cr!%}iS+bHXe%bb?5M1xmloijy);}k=cOpE$T
z(9W*VbM{DKWM7zmVB9t^=jwM`a5t4sjV9B>*@6VUU=cgprRLPEnd?zg>K$gL`asQg
zcBNtG@(Wa5pmk8q=A4PzxzXb4pRTt0!MxzamGXC_N9lEH%M10Z*^T|9LuPkj&DfB$
zBQH(Zk$I`~h&i|hE4{M3HQgyIO>a+YI&+7bvhPxJb~;to(L14Y{aR=6@d<+ma;BQh
zUQjFRIER&;IX^4waIrF}4pv4l$3?cX=N@XFnw8P(<YHx4w${<gKG|AVE9*Rmm3^-D
zysWI##meNFY-P0A^sMZ^-w#jC%II}+v9f#WX=UH6ua$M3!^&PhKP&5Uu`=b-x3aar
zpFK4zqu0sB%KlVOD?44q%7Tn<VF&?fhzj3WDngum*H6cf{!R?g4f?=9XmS`Im=wlS
zLp8f9YM~YRYz&^J6tuc22)inXR45q5;9DpKQ8xv%T@_qjp<o*Z|0<<m&LjmPC#jjV
z$*ijB1;b+kPAbGYsm_j2DHS>pDyKpxLxohRxzw?!&5<g9UPFDpzpa>&`S+kT29ASB
zn6in6id`2Wavey5M`-cJ3h^I6WFL47%!*Lr!3uE+B1=IUJVuL$D#U*XkspJ%!R#m{
zKC41pfygrOd9a-ppIec=u(i_zt>Ekgt?2A@>MJ2T+mBzJYgpw^O>iEK`5)=}wXxb0
zNGJ-g2{LCWN<vdaj^|9v5NK~(Z346}tTq8*niG(wGJ&bAfcPQUg6U6SDqB!{0#em2
z5HHjg@DmC*(G9o`fycqG!7&hK2<ZSS*aCKf1K@99mX8n_d=_j4V?OHl#(dz_g2O(q
zS}?P!1t)!VjD0R=tHwSZ=)Q@qQR8!uj2OR;0c?;3_pp->cK<XF_HAtGVBgD@5B7Xj
zGJmi`=NvyF^Fc4j(nZQZ#T1`}$kX63I6;e7p6l}hge(B7z;M9*T%Yld`BFa{y^6Y5
zQLoP#=~dKc+8OCp)V+$jS5bGfGOwcURn)zT`iIlXyo$P4QTHn9UPaxj8h90TucGc%
z)M-=jss&y}-K(fye8+sLpN$h7vu_Eme61>a!I+koz4^1aejEG>oB{LUvAe(~@C0}X
z908}n0{lpC1cTraun)XNdvo6h?#%<N=gnu9H($cm(VO2~-J5Sh_h#Cgzu!#uDGcxo
z*bVluZkg=Vz4=ed-u%t8-aPNVi{AVeG*^N9!S34b`5;8bK>)6KaSitj@g9iufvw<0
zT0H1^^O@<*10)LLh-r#qXo@5VF;!4>KBjUSFT~}9s3lAhlZi`Wf-_`J<P=S}EKQbV
zOA=MX<Sa!nc+Jp6T{L4#OiQQ<Rp4~P)J<8}WL=8$oTBTZph<d6(=e87#c`A43_(=1
zn3~|?agJAcNwO46mqd#b<d|+q@pwW=2!_m?oDefOod>F>8gY!KTZy==X?z^BQ6!6t
zYjHytkcL>6V8l(qNa&oPBvgsxWkZo-Djzdt#T0m+w=j>mh9?u_`8DNZvJ^8X9BwR!
zs|1$UI^YVgfp00lCLSriCdL>$(cA?NlUgr!*>@mv5?sX)SDz7b6i(XNs4<*z{8e|V
z&(za6sfteFI>&wG)1;DUct{;hnyFlODraU!)WP>Pp09~<228pRh-Y~U0?&Yb^s`h%
zv+S!7d9C=`+%2lCGR;6Toyy%=d{jSe?W3leDNg(K#@gQxx_tl7jkU7TD=_<8!A7tR
zd>4#^cfowbD=UBnz6O4F@w3sR)6GUBYle*cL~bbE@FJND9mz2DjAYuYM>4mfd-eI|
zrO9GWnh%M-e1Y=P$I6k+{<D$HJ7@FKk0LBt1lEDgwe!-Q5ZMKeg8$VHd=?^lxdz-0
Uws?8z%#LLK4`!CceG)zZ0IugOY5)KL

diff --git a/test/db/multiusers.csv b/test/db/multiusers.csv
index b314e2f164d..64d24ee7da1 100644
--- a/test/db/multiusers.csv
+++ b/test/db/multiusers.csv
@@ -1,6 +1,6 @@
-_id,email,passwordInfo_hasher,passwordInfo_password,isSuperUser,novelUserExperienceInfos,created,_lastLoggedInIdentity,isDeleted
-'8fb0c6a674d0af7b003b23ea','user_A@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z',,f
-'8fb0c6a674d0af7b003b23eb','user_B@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z',,f
-'8fb0c6a674d0af7b003b23ec','user_C@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z',,f
-'8fb0c6a674d0af7b003b23ed','user_D@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z',,f
-'8fb0c6a674d0af7b003b23ee','user_E@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z',,f
+_id,email,passwordInfo_hasher,passwordInfo_password,isSuperUser,novelUserExperienceInfos,created,selectedTheme,_lastLoggedInIdentity,isDeleted
+'8fb0c6a674d0af7b003b23ea','user_A@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z','auto',,f
+'8fb0c6a674d0af7b003b23eb','user_B@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z','auto',,f
+'8fb0c6a674d0af7b003b23ec','user_C@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z','auto',,f
+'8fb0c6a674d0af7b003b23ed','user_D@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z','light',,f
+'8fb0c6a674d0af7b003b23ee','user_E@scalableminds.com','SCrypt','$2a$10$6xBhZRx30Hzb8ZK1ygpslekVHsWXKLbLfxPz.U1yM0r5lMR06ELeW',t,'{}','2016-04-11T12:57:49.000Z','dark',,f

From ea8f37356474b79a710e4edbb55af8d1f4201f88 Mon Sep 17 00:00:00 2001
From: Florian M <florian@scm.io>
Date: Mon, 19 Apr 2021 14:01:24 +0200
Subject: [PATCH 12/45] Pass selected theme to main html template

---
 app/controllers/DemoProxyController.scala | 12 ++++++++++--
 app/views/main.scala.html                 |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/controllers/DemoProxyController.scala b/app/controllers/DemoProxyController.scala
index 8d630a9123b..6faa138e0ab 100644
--- a/app/controllers/DemoProxyController.scala
+++ b/app/controllers/DemoProxyController.scala
@@ -3,7 +3,9 @@ package controllers
 import com.google.inject.Inject
 import com.mohiva.play.silhouette.api.Silhouette
 import com.mohiva.play.silhouette.api.actions.UserAwareRequest
+import com.scalableminds.util.accesscontext.GlobalAccessContext
 import com.scalableminds.util.tools.Fox
+import models.user.{MultiUserDAO, Theme}
 import oxalis.security.WkEnv
 import play.api.libs.ws.WSClient
 import play.api.mvc.{Action, AnyContent}
@@ -12,13 +14,19 @@ import utils.WkConf
 import scala.concurrent.ExecutionContext
 import scala.util.matching.Regex
 
-class DemoProxyController @Inject()(ws: WSClient, conf: WkConf, sil: Silhouette[WkEnv])(implicit ec: ExecutionContext)
+class DemoProxyController @Inject()(ws: WSClient, conf: WkConf, sil: Silhouette[WkEnv], multiUserDAO: MultiUserDAO)(
+    implicit ec: ExecutionContext)
     extends Controller {
 
   def proxyPageOrMainView: Action[AnyContent] = sil.UserAwareAction.async { implicit request =>
     if (matchesProxyPage(request)) {
       ws.url(conf.Proxy.prefix + request.uri).get().map(resp => Ok(resp.bodyAsBytes.utf8String).as("text/html"))
-    } else Fox.successful(Ok(views.html.main(conf)))
+    } else {
+      for {
+        multiUserOpt <- Fox.runOptional(request.identity)(user =>
+          multiUserDAO.findOne(user._multiUser)(GlobalAccessContext))
+      } yield Ok(views.html.main(conf, multiUserOpt.map(_.selectedTheme).getOrElse(Theme.auto).toString))
+    }
   }
 
   private def matchesProxyPage(request: UserAwareRequest[WkEnv, AnyContent]): Boolean =
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
index 90042ca38af..b7ad734fd36 100755
--- a/app/views/main.scala.html
+++ b/app/views/main.scala.html
@@ -1,10 +1,10 @@
-@( conf: utils.WkConf )
+@( conf: utils.WkConf, selectedTheme: String )
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <meta name="commit-hash" content="@(webknossos.BuildInfo.commitHash)" />
-    <title>@(conf.Application.title)</title>
+    <title>@(conf.Application.title) @(selectedTheme)</title>
     @if(conf.Features.isDemoInstance){
     <meta
       name="description"

From 3deea6c2ff21a5f05f16efb7a7554006d0cbeab0 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 19 Apr 2021 14:30:32 +0200
Subject: [PATCH 13/45] auto-detect theme by browser and read from backend if
 available

---
 app/views/main.scala.html | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
index b7ad734fd36..5b8a5ec8267 100755
--- a/app/views/main.scala.html
+++ b/app/views/main.scala.html
@@ -24,13 +24,27 @@
       media="screen"
       href="/assets/bundle/vendors~dark~light.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
-    <link
-      id="primary-stylesheet"
-      rel="stylesheet"
-      type="text/css"
-      media="screen"
-      href="/assets/bundle/dark.css?nocache=@(webknossos.BuildInfo.commitHash)"
-    />
+    <script>
+      let initialTheme = "@(selectedTheme)";
+      if (initialTheme === "auto") {
+        initialTheme = 
+          window.matchMedia('(prefers-color-scheme: dark)').media !== "not all" && 
+          window.matchMedia('(prefers-color-scheme: dark)').matches ? 
+            "dark" : 
+            "light";
+      }
+      document.documentElement.style.display = 'none';
+      document.head.insertAdjacentHTML(
+        'beforeend',
+        '<link ' +
+          'id="primary-stylesheet" ' +
+          'rel="stylesheet" ' +
+          'type="text/css" ' +
+          'media="screen" ' +
+          'href="/assets/bundle/' + initialTheme + '.css?nocache=@(webknossos.BuildInfo.commitHash)" ' +
+          'onload="document.documentElement.style.display = \'\'" ' + 
+        '/>');
+    </script>
     <script
       data-airbrake-project-id="@(conf.Airbrake.projectID)"
       data-airbrake-project-key="@(conf.Airbrake.projectKey)"

From c84f3b285b1c454cd743bf7a58afc8456efcb618 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Wed, 21 Apr 2021 11:17:14 +0200
Subject: [PATCH 14/45] tweaks

---
 frontend/javascripts/admin/onboarding.js      |  44 ++-
 .../javascripts/components/credits_footer.js  |   4 +-
 .../dashboard/publication_details_view.js     |  12 +-
 .../javascripts/dashboard/spotlight_view.js   | 276 ------------------
 frontend/javascripts/navbar.js                |  29 +-
 .../view/layouting/flex_layout_wrapper.js     |   2 +-
 frontend/javascripts/router.js                |   5 -
 frontend/stylesheets/_spotlight.less          |  47 ---
 frontend/stylesheets/antd_overwrites.less     |   8 +-
 .../stylesheets/flex_layout_overwrites.less   |  66 +++--
 frontend/stylesheets/main.less                |  54 ++--
 .../stylesheets/trace_view/_tracing_view.less | 120 ++++----
 12 files changed, 171 insertions(+), 496 deletions(-)
 delete mode 100644 frontend/javascripts/dashboard/spotlight_view.js

diff --git a/frontend/javascripts/admin/onboarding.js b/frontend/javascripts/admin/onboarding.js
index 1e4234b52d4..a5eec605256 100644
--- a/frontend/javascripts/admin/onboarding.js
+++ b/frontend/javascripts/admin/onboarding.js
@@ -24,6 +24,7 @@ import { getDatastores, sendInvitesForOrganization } from "admin/admin_rest_api"
 import DatasetImportView from "dashboard/dataset/dataset_import_view";
 import DatasetUploadView from "admin/dataset/dataset_upload_view";
 import RegistrationForm from "admin/auth/registration_form";
+import CreditsFooter from "components/credits_footer";
 import SampleDatasetsModal from "dashboard/dataset/sample_datasets_modal";
 import Toast from "libs/toast";
 import features from "features";
@@ -136,6 +137,7 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
           {icon}
         </div>
         <h1
+          className="onboarding-option-card-header"
           style={{
             fontSize: 20,
             lineHeight: "22px",
@@ -527,33 +529,29 @@ class OnboardingView extends React.PureComponent<Props, State> {
     const currentStepContent = availableSteps[this.state.currentStep].component();
 
     return (
-      <div
-        style={{
-          minHeight: "calc(100vh - 48px)",
-          display: "flex",
-          flexDirection: "column",
-          paddingBottom: 50,
-        }}
-      >
-        <Row type="flex" justify="center" style={{ padding: "20px 50px 70px" }} align="middle">
-          <Col span={18}>
-            <Steps current={this.state.currentStep} size="small" style={{ height: 25 }}>
-              {availableSteps.map(({ title }) => (
-                <Step title={title} key={title} />
-              ))}
-            </Steps>
-          </Col>
-        </Row>
-        <div style={{ flex: "1 1 auto", display: "flex" }}>
-          <Row type="flex" justify="center" style={{ flex: "1 1 auto" }} align="middle">
+      <>
+        <div className="onboarding">
+          <Row type="flex" justify="center" style={{ padding: "20px 50px 70px" }} align="middle">
             <Col span={18}>
-              <Row type="flex" justify="center" align="middle">
-                <Col span={24}>{currentStepContent}</Col>
-              </Row>
+              <Steps current={this.state.currentStep} size="small" style={{ height: 25 }}>
+                {availableSteps.map(({ title }) => (
+                  <Step title={title} key={title} />
+                ))}
+              </Steps>
             </Col>
           </Row>
+          <div style={{ flex: "1 1 auto", display: "flex" }}>
+            <Row type="flex" justify="center" style={{ flex: "1 1 auto" }} align="middle">
+              <Col span={18}>
+                <Row type="flex" justify="center" align="middle">
+                  <Col span={24}>{currentStepContent}</Col>
+                </Row>
+              </Col>
+            </Row>
+          </div>
         </div>
-      </div>
+        <CreditsFooter />
+      </>
     );
   };
 }
diff --git a/frontend/javascripts/components/credits_footer.js b/frontend/javascripts/components/credits_footer.js
index f5887d5a927..548e30c4aa6 100644
--- a/frontend/javascripts/components/credits_footer.js
+++ b/frontend/javascripts/components/credits_footer.js
@@ -6,8 +6,8 @@ import * as React from "react";
 const { Footer } = Layout;
 
 const creditsFooter = () => (
-  <Footer style={{ backgroundColor: "#ececec" }}>
-    <div id="credits">
+  <Footer id="credits">
+    <div>
       <div className="container">
         <h3>webKnossos Credits</h3>
         <p>
diff --git a/frontend/javascripts/dashboard/publication_details_view.js b/frontend/javascripts/dashboard/publication_details_view.js
index d4be7beafff..fe5c88c490b 100644
--- a/frontend/javascripts/dashboard/publication_details_view.js
+++ b/frontend/javascripts/dashboard/publication_details_view.js
@@ -7,7 +7,6 @@ import { getDatasets } from "admin/admin_rest_api";
 import type { APIDataset, APIMaybeUnimportedDataset } from "types/api_flow_types";
 import PublicationCard from "dashboard/publication_card";
 import { handleGenericError } from "libs/error_handling";
-import { SimpleHeader } from "dashboard/spotlight_view";
 import { Link } from "react-router-dom";
 
 const { Content } = Layout;
@@ -21,6 +20,17 @@ type State = {
   isLoading: boolean,
 };
 
+export const SimpleHeader = () => (
+  <div id="oxalis-header">
+    <img
+      src="/assets/images/oxalis.svg"
+      alt="webKnossos Logo"
+      style={{ verticalAlign: "middle" }}
+    />
+    webKnossos
+  </div>
+);
+
 class PublicationDetailView extends React.PureComponent<Props, State> {
   state = {
     datasets: [],
diff --git a/frontend/javascripts/dashboard/spotlight_view.js b/frontend/javascripts/dashboard/spotlight_view.js
deleted file mode 100644
index 0b3e0ddf2a1..00000000000
--- a/frontend/javascripts/dashboard/spotlight_view.js
+++ /dev/null
@@ -1,276 +0,0 @@
-// @flow
-import { Link, withRouter, type RouterHistory } from "react-router-dom";
-import { Spin, Layout, Row, Col, Card, Input } from "antd";
-import { connect } from "react-redux";
-import * as React from "react";
-
-import type { APIMaybeUnimportedDataset, APIUser } from "types/api_flow_types";
-import type { OxalisState } from "oxalis/store";
-import { checkAnyOrganizationExists, getDatasets } from "admin/admin_rest_api";
-import { handleGenericError } from "libs/error_handling";
-import PublicationView from "dashboard/publication_view";
-import CreditsFooter from "components/credits_footer";
-import features from "features";
-import SpotlightRegistrationForm from "admin/auth/spotlight_registration_form";
-
-const { Content } = Layout;
-const { Search } = Input;
-
-export const SimpleHeader = () => (
-  <div id="oxalis-header">
-    <img
-      src="/assets/images/oxalis.svg"
-      alt="webKnossos Logo"
-      style={{ verticalAlign: "middle" }}
-    />
-    webKnossos
-  </div>
-);
-
-const WelcomeHeader = ({ history }) => (
-  <div
-    style={{
-      backgroundImage: "url(/assets/images/cover.jpg)",
-      backgroundSize: "cover",
-    }}
-  >
-    <div className="welcome-header-wrapper">
-      <div className="welcome-header-content">
-        <Row type="flex" align="middle" style={{ color: "white" }}>
-          <Col xs={{ span: 0 }} xl={{ span: 4 }}>
-            <img
-              src="/assets/images/oxalis.svg"
-              alt="webKnossos Logo"
-              style={{ filter: "invert(1)", width: "100%" }}
-            />
-          </Col>
-          <Col xs={{ span: 24 }} xl={{ span: 13 }} lg={{ span: 16 }}>
-            <p
-              style={{
-                fontSize: 58,
-                textShadow: "rgba(0, 0, 0, 0.38) 0px 1px 6px",
-                fontWeight: 300,
-                marginLeft: 56,
-              }}
-            >
-              Welcome to webKnossos
-            </p>
-            <div
-              style={{
-                padding: "20px 60px",
-                textShadow: "rgba(0, 0, 0, 0.38) 0px 1px 6px",
-                color: "rgb(243, 243, 248)",
-              }}
-            >
-              <p
-                style={{
-                  fontSize: 20,
-                  lineHeight: 1.5,
-                  marginTop: 0,
-                }}
-              >
-                webKnossos is an open-source tool for annotating and exploring large 3D datasets
-              </p>
-              <ul
-                style={{
-                  fontSize: 19,
-                  paddingLeft: "1.2em",
-                }}
-              >
-                <li>Fly through your data for fast skeletonization and proof-reading</li>
-                <li>Create 3D training data for automated segmentations efficiently</li>
-                <li>Scale data reconstruction projects with crowdsourcing workflows</li>
-                <li>Share datasets and annotations with collaborating scientists</li>
-              </ul>
-            </div>
-
-            <div style={{ marginBottom: 20, paddingLeft: 60 }}>
-              <Link
-                to="/features"
-                className="spotlight-hero-button ant-btn ant-btn-lg ant-btn-background-ghost"
-              >
-                Learn More About the Features
-              </Link>
-              <Link
-                to="/pricing"
-                className="spotlight-hero-button ant-btn ant-btn-lg ant-btn-background-ghost"
-              >
-                Get Your Own webKnossos
-              </Link>
-            </div>
-          </Col>
-          <Col xs={{ span: 24 }} lg={{ span: 7 }} xl={{ span: 6 }}>
-            <div className="spotlight-registration-form">
-              <SpotlightRegistrationForm
-                onRegistered={() => {
-                  history.push("/dashboard");
-                }}
-              />
-              <p style={{ textAlign: "center" }}>
-                <Link to="/auth/login">Log in to existing account</Link>
-              </p>
-            </div>
-          </Col>
-        </Row>
-      </div>
-    </div>
-  </div>
-);
-
-const MissingDatasetCard = () => (
-  <div
-    style={{
-      display: "flex",
-      justifyContent: "center",
-      marginTop: 80,
-    }}
-  >
-    <Col className="gallery-dataset-col">
-      <a
-        href="https://goo.gl/forms/QICmEcQyid6gb8Kw1"
-        title="Click to add your missing dataset"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="not-highlighted-link"
-      >
-        <Card bodyStyle={{ padding: 0 }} className="spotlight-item-card" bordered={false}>
-          <div style={{ display: "flex", height: "100%" }}>
-            <div className="publication-description">
-              <h3>Your dataset is missing here?</h3>
-              <div className="publication-description-body nice-scrollbar">
-                If you want to add your own dataset to this publication library just click here. It
-                opens a form which will contact us so we can add your dataset.
-              </div>
-            </div>
-            <div className="dataset-thumbnail">
-              <div
-                style={{
-                  position: "relative",
-                  height: "100%",
-                  display: "flex",
-                  alignItems: "flex-end",
-                }}
-              >
-                <div
-                  className="dataset-click-hint absolute"
-                  style={{
-                    opacity: 1,
-                    backgroundColor: "rgba(0, 0, 0, 0.4)",
-                    fontSize: 220,
-                  }}
-                >
-                  ?
-                </div>
-                <div className="dataset-thumbnail-image absolute" id="add-missing-dataset-image" />
-              </div>
-            </div>
-          </div>
-        </Card>
-      </a>
-    </Col>
-  </div>
-);
-
-type StateProps = {|
-  activeUser: ?APIUser,
-|};
-type Props = StateProps;
-type PropsWithRouter = {| ...Props, history: RouterHistory |};
-
-type State = {
-  datasets: Array<APIMaybeUnimportedDataset>,
-  hasOrganizations: boolean,
-  isLoading: boolean,
-  searchQuery: string,
-};
-
-class SpotlightView extends React.PureComponent<PropsWithRouter, State> {
-  state = {
-    datasets: [],
-    hasOrganizations: true,
-    isLoading: true,
-    searchQuery: "",
-  };
-
-  componentDidMount() {
-    this.fetchData();
-  }
-
-  async fetchData(): Promise<void> {
-    try {
-      this.setState({ isLoading: true });
-      const [datasets, hasOrganizations] = await Promise.all([
-        getDatasets(),
-        checkAnyOrganizationExists(),
-      ]);
-      this.setState({ datasets, hasOrganizations });
-    } catch (error) {
-      handleGenericError(error);
-    } finally {
-      this.setState({ isLoading: false });
-    }
-  }
-
-  handleSearch = (event: SyntheticInputEvent<>) => {
-    this.setState({ searchQuery: event.target.value });
-  };
-
-  render() {
-    const useOnboardingFlow =
-      this.props.activeUser == null && (features().isDemoInstance || !this.state.hasOrganizations);
-
-    const search = (
-      <Search
-        style={{ width: 200, float: "right" }}
-        placeholder="Search Publication"
-        onPressEnter={this.handleSearch}
-        onChange={this.handleSearch}
-        value={this.state.searchQuery}
-      />
-    );
-
-    return (
-      <Layout>
-        {useOnboardingFlow ? <WelcomeHeader history={this.props.history} /> : <SimpleHeader />}
-        <Content className="centered-content">
-          <div className="pull-right">{this.state.datasets.length > 0 && search}</div>
-          <h3>Featured Publications</h3>
-          <div className="clearfix" style={{ margin: "20px 0px" }} />
-          <Spin size="large" spinning={this.state.isLoading}>
-            <div style={{ minHeight: "100px" }}>
-              {this.state.datasets.length === 0 && !this.state.isLoading ? (
-                <React.Fragment>
-                  <p style={{ textAlign: "center" }}>There are no publications yet.</p>
-                  <p style={{ textAlign: "center" }}>
-                    <Link to={useOnboardingFlow ? "/" : "/dashboard"}>
-                      Start importing your data
-                    </Link>{" "}
-                    or check out <a href="https://webknossos.org/">webknossos.org</a> for some
-                    published datasets.
-                  </p>
-                </React.Fragment>
-              ) : (
-                <PublicationView
-                  datasets={this.state.datasets}
-                  searchQuery={this.state.searchQuery}
-                />
-              )}
-            </div>
-          </Spin>
-          {features().isDemoInstance ? <MissingDatasetCard /> : null}
-          <div id="spotlight-footnote">
-            Visit <a href="https://publication.webknossos.org/">publication.webknossos.org</a> for
-            the original webKnossos publication website.
-          </div>
-        </Content>
-        <CreditsFooter />
-      </Layout>
-    );
-  }
-}
-
-const mapStateToProps = (state: OxalisState): StateProps => ({
-  activeUser: state.activeUser,
-});
-
-export default connect<Props, {||}, _, _, _, _>(mapStateToProps)(withRouter(SpotlightView));
diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 84065f28502..7da8306686e 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -5,12 +5,11 @@ import {
   TeamOutlined,
   BarChartOutlined,
   HomeOutlined,
-  RocketOutlined,
-  TrophyOutlined,
   QuestionCircleOutlined,
   UserOutlined,
 } from "@ant-design/icons";
 import { useHistory, Link } from "react-router-dom";
+import classnames from "classnames";
 import { connect } from "react-redux";
 import React from "react";
 
@@ -426,21 +425,6 @@ function Navbar({ activeUser, isAuthenticated, isInAnnotationView, hasOrganizati
     );
   }
 
-  if (!_isAuthenticated && features().isDemoInstance && !Utils.getIsInIframe()) {
-    menuItems.push(
-      <Menu.Item key="features">
-        <Link to="/features" style={{ fontWeight: 400 }}>
-          <RocketOutlined /> Features
-        </Link>
-      </Menu.Item>,
-      <Menu.Item key="pricing">
-        <Link to="/pricing" style={{ fontWeight: 400 }}>
-          <TrophyOutlined /> Pricing
-        </Link>
-      </Menu.Item>,
-    );
-  }
-
   if (!(_isAuthenticated || hideNavbarLogin)) {
     trailingNavItems.push(<AnonymousAvatar key="anonymous-avatar" />);
   }
@@ -457,14 +441,13 @@ function Navbar({ activeUser, isAuthenticated, isInAnnotationView, hasOrganizati
   // Don't highlight active menu items, when showing the narrow version of the navbar,
   // since this makes the icons appear more crowded.
   const selectedKeys = collapseAllNavItems ? [] : [history.location.pathname];
-  const separator = (
-    <div
-      style={{ height: "100%", marginLeft: 2, marginRight: 10, borderLeft: "1px #666879 solid" }}
-    />
-  );
+  const separator = <div className="navbar-separator" />;
 
   return (
-    <Header style={navbarStyle} className={collapseAllNavItems ? "collapsed-nav-header" : ""}>
+    <Header
+      style={navbarStyle}
+      className={classnames("navbar-header", { "collapsed-nav-header": collapseAllNavItems })}
+    >
       <Menu
         mode="horizontal"
         selectedKeys={selectedKeys}
diff --git a/frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.js b/frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.js
index 7db17632461..b7a157efa40 100644
--- a/frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.js
+++ b/frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.js
@@ -396,7 +396,7 @@ class FlexLayoutWrapper extends React.PureComponent<Props, State> {
             classNameMapper={this.classNameMapper}
           />
         </div>
-        <Footer className="footer">
+        <Footer className="statusbar-footer">
           <BorderToggleButton side="left" onClick={() => this.toggleBorder("left")} inFooter />
           <BorderToggleButton side="right" onClick={() => this.toggleBorder("right")} inFooter />
           <Statusbar />
diff --git a/frontend/javascripts/router.js b/frontend/javascripts/router.js
index 1f94ec84121..353ac6e7281 100644
--- a/frontend/javascripts/router.js
+++ b/frontend/javascripts/router.js
@@ -39,7 +39,6 @@ import RegistrationView from "admin/auth/registration_view";
 import ScriptCreateView from "admin/scripts/script_create_view";
 import ScriptListView from "admin/scripts/script_list_view";
 import SecuredRoute from "components/secured_route";
-import SpotlightView from "dashboard/spotlight_view";
 import StartResetPasswordView from "admin/auth/start_reset_password_view";
 import StatisticView from "admin/statistic/statistic_view";
 import TaskCreateFormView from "admin/task/task_create_form_view";
@@ -147,9 +146,6 @@ class ReactRouter extends React.Component<Props> {
                   if (isAuthenticated) {
                     return <DashboardView userId={null} isAdminView={false} initialTabKey={null} />;
                   }
-                  if (features().isDemoInstance) {
-                    return <SpotlightView />;
-                  }
                   return <Redirect to="/auth/login" />;
                 }}
               />
@@ -449,7 +445,6 @@ class ReactRouter extends React.Component<Props> {
                   return <FinishResetPasswordView resetToken={params.token} />;
                 }}
               />
-              <Route path="/spotlight" component={SpotlightView} />
               <Route
                 path="/datasets/:organizationName/:datasetName/view"
                 render={this.tracingViewMode}
diff --git a/frontend/stylesheets/_spotlight.less b/frontend/stylesheets/_spotlight.less
index ff31d92e357..e40845b661d 100644
--- a/frontend/stylesheets/_spotlight.less
+++ b/frontend/stylesheets/_spotlight.less
@@ -179,10 +179,6 @@
   }
 }
 
-#add-missing-dataset-image {
-  background-image: url("/assets/images/add-missing-dataset-thumbnail.jpg");
-}
-
 .mini-dataset-thumbnail-grid {
   display: grid;
   grid-gap: 10px;
@@ -207,44 +203,6 @@
   }
 }
 
-.spotlight-hero-button {
-  margin-right: 50px;
-  margin-bottom: 30px;
-  display: inline-block;
-  color: rgba(255, 255, 255, 0.8);
-
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-  }
-}
-
-#oxalis-header {
-  margin-bottom: 20px;
-  margin-top: 20px;
-  text-align: center;
-  height: 100px;
-  vertical-align: middle;
-  display: inline-block;
-  font-size: 80px;
-  line-height: normal;
-  color: #000;
-  margin-left: 30px;
-
-  img {
-    height: 100px;
-    width: 100px;
-  }
-
-  @media @smartphones {
-    font-size: 2rem;
-
-    img {
-      height: 60px;
-      width: 60px;
-    }
-  }
-}
-
 .container-with-hidden-icon {
   .hidden-icon {
     visibility: hidden;
@@ -256,11 +214,6 @@
   }
 }
 
-#spotlight-footnote {
-  text-align: center;
-  margin: 30px 0;
-}
-
 .spotlight-registration-form {
   background-color: white;
   padding: 20px;
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
index 0809eb7907c..67534feeb33 100644
--- a/frontend/stylesheets/antd_overwrites.less
+++ b/frontend/stylesheets/antd_overwrites.less
@@ -115,14 +115,10 @@ label.ant-checkbox-wrapper {
 
 // Remove Chinese Quote font, which is messing up our quotes
 .ant-alert {
-  font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
+  font-family: @font-family;
 }
 .ant-card {
-  font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
+  font-family: @font-family;
 }
 
 .antd-no-border-list .ant-list-item {
diff --git a/frontend/stylesheets/flex_layout_overwrites.less b/frontend/stylesheets/flex_layout_overwrites.less
index 5c47d7cdcb0..3faf5f8beb6 100644
--- a/frontend/stylesheets/flex_layout_overwrites.less
+++ b/frontend/stylesheets/flex_layout_overwrites.less
@@ -1,12 +1,24 @@
-.flexlayout__tab {
-  background-color: transparent;
-}
-.flexlayout__tabset {
+.flexlayout__tab,
+.flexlayout__tabset,
+.flexlayout__tabset_tabbar_outer,
+.flexlayout__border {
   background-color: transparent;
+  color: unset;
 }
 .flexlayout__tab_border,
 .flexlayout__tabset-selected {
-  background-color: white !important;
+  background-color: @body-background !important;
+}
+
+.flexlayout__tabset_tabbar_outer_top {
+  border-color: @border-color-base;
+}
+
+.flexlayout__border_left {
+  border-right: none;
+}
+.flexlayout__border_right {
+  border-left: none;
 }
 
 .flexlayout__tabset_tabbar_inner_tab_container_top {
@@ -15,14 +27,14 @@
 
 .flexlayout__splitter:hover,
 .flexlayout__splitter_drag {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(@text-color, 0.4);
 }
 .flexlayout__splitter {
   z-index: 21;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(@text-color, 0.1);
   &::before {
     content: "";
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgba(@text-color, 0);
   }
 }
 
@@ -49,31 +61,39 @@
   z-index: 100;
 }
 
-.flexlayout__tab_button--selected,
-.flexlayout__tab_button:hover {
-  background-color: white;
-  .flexlayout__tab_button_content {
-    background-color: white;
-    color: #1890ff;
-    border-bottom: 1px solid #1890ff;
-  }
-}
-
 .flexlayout__tab_button {
   margin: 0;
   padding: 0px 5px;
   line-height: 1;
   // These properties are copied from antd's styling:
-  color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   font-weight: 400;
-  font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
+  font-family: @font-family;
   &:hover {
     cursor: move;
   }
-  background-color: white;
+  background-color: @body-background;
+
+  .flexlayout__tab_button_content {
+    background-color: @body-background;
+    color: rgba(@text-color, 0.65);
+    border-bottom: 1px solid transparent;
+  }
+  &.flexlayout__tab_button--selected {
+    background-color: @body-background;
+    .flexlayout__tab_button_content {
+      background-color: @body-background;
+      color: @link-color;
+    }
+  }
+  &:hover {
+    background-color: @body-background;
+    .flexlayout__tab_button_content {
+      background-color: @body-background;
+      color: @link-color;
+      border-bottom: 1px solid @link-color;
+    }
+  }
 }
 
 .flexlayout-dont-overflow {
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index cc091928119..f8cacdc5ad2 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -27,10 +27,12 @@
 @import "flex_layout_overwrites.less";
 
 // ----------------------- MAIN STYLES
+@font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+  sans-serif;
+
 body {
-  font-family: "Titillium Web", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
+  font-family: @font-family;
   font-weight: 400;
   font-size: 16px;
   -webkit-font-smoothing: antialised;
@@ -103,44 +105,28 @@ td.nowrap * {
 }
 
 #credits {
-  max-width: 600px;
-  img {
-    margin-right: 10px;
-    width: 25%;
-    max-width: 100px;
+  background-color: @layout-footer-background;
+  & > div {
+    max-width: 600px;
+    img {
+      margin-right: 10px;
+      width: 25%;
+      max-width: 100px;
+    }
   }
 }
 
-<<<<<<< HEAD
-=======
-#oxalis-header {
-  margin-bottom: 20px;
-  margin-top: 20px;
-  text-align: center;
-  height: 100px;
-  vertical-align: middle;
-  display: inline-block;
-  font-size: 80px;
-  line-height: normal;
-  color: #000;
-  margin-left: 30px;
-
-  img {
-    height: 100px;
-    width: 100px;
-  }
-
-  @media @smartphones {
-    font-size: 2rem;
+.onboarding {
+  min-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 50px;
 
-    img {
-      height: 60px;
-      width: 60px;
-    }
+  .onboarding-option-card-header {
+    color: @geekblue-8;
   }
 }
 
->>>>>>> origin/master
 .centered-content {
   padding: 50px;
   width: 100%;
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index 59085befdee..99d66d53251 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -227,20 +227,42 @@
   }
 }
 
-// Dark mode for UI within navbar and footer
-@dark-bg: #383d48;
-@dark-fg: #f1f1f1;
-@dark-border: #585868;
-@primary-bg: #2174c1;
-@primary-border: #1890ff;
-@hover-border: #40a9ff;
-
-.ant-layout-header,
-.ant-layout-footer {
-  width: 100%;
+.navbar-header,
+.statusbar-footer {
+  // Dark mode for UI within navbar and footer
+  @dark-bg: #383d48;
+  @dark-fg: #f1f1f1;
+  @dark-border: #585868;
+  @primary-bg: #2174c1;
+  @primary-border: #1890ff;
+  @hover-border: #40a9ff;
+
+  background-color: @layout-header-background;
+  color: rgba(255, 255, 255, 0.67);
   z-index: 1000;
-  color: rgba(255, 255, 255, 0.67) !important;
-  background: #001529 !important;
+
+  &.statusbar-footer {
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    position: absolute;
+    height: @footer-height;
+    overflow: hidden;
+    font-size: 11px;
+    text-align: center;
+    padding: 0px;
+  }
+
+  &.navbar-header {
+    width: 100%;
+  }
+
+  .navbar-separator {
+    height: 100%;
+    margin-left: 2px;
+    margin-right: 10px;
+    border-left: 1px #666879 solid;
+  }
 
   .ant-select-arrow,
   .ant-badge-dot {
@@ -345,33 +367,21 @@
       border-color: @primary-border !important;
     }
   }
-}
-
-.footer {
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  position: absolute;
-  height: @footer-height;
-  overflow: hidden;
-  font-size: 11px;
-  text-align: center;
-  padding: 0px;
-}
-
-.center-item-using-flex {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-}
 
-.no-hover-highlighting {
-  &:hover,
-  &:focus,
-  &:active {
-    border-color: initial;
-    background-color: initial;
-    color: initial;
+  .left-border-button.footer-button,
+  .right-border-button.footer-button {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    height: auto;
+    color: @dark-fg;
+    background-color: inherit;
+  }
+  .left-border-button.footer-button {
+    left: 8px;
+  }
+  .right-border-button.footer-button {
+    right: 8px;
   }
 }
 
@@ -386,22 +396,6 @@
   }
 }
 
-.left-border-button.footer-button,
-.right-border-button.footer-button {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  height: auto;
-  color: @dark-fg;
-  background-color: inherit;
-}
-.left-border-button.footer-button {
-  left: 8px;
-}
-.right-border-button.footer-button {
-  right: 8px;
-}
-
 .flex-layout-container {
   left: 0px;
   top: 0px;
@@ -410,3 +404,19 @@
   position: absolute;
   overflow: hidden;
 }
+
+.no-hover-highlighting {
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: initial;
+    background-color: initial;
+    color: initial;
+  }
+}
+
+.center-item-using-flex {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}

From 42a240e6b78c089fe6e2d7bffcd7153e4b2ba87d Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Thu, 22 Apr 2021 09:56:15 +0200
Subject: [PATCH 15/45] more robust dark/light toggle

---
 frontend/javascripts/navbar.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 7da8306686e..ba491109fe9 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -319,10 +319,10 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
           key="theme"
           onClick={() => {
             const styleEl = ((document.getElementById("primary-stylesheet"): any): HTMLLinkElement);
-            if (styleEl.href.includes("light")) {
-              styleEl.href = styleEl.href.replace("light", "dark");
+            if (styleEl.href.includes("light.css")) {
+              styleEl.href = styleEl.href.replace("light.css", "dark.css");
             } else {
-              styleEl.href = styleEl.href.replace("dark", "light");
+              styleEl.href = styleEl.href.replace("dark.css", "light.css");
             }
           }}
         >

From 32d2b4ab2fd3bd022df46fced775dd438adb3f61 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Thu, 22 Apr 2021 11:10:10 +0200
Subject: [PATCH 16/45] dataset_settins_view.js

---
 .../javascripts/oxalis/view/settings/dataset_settings_view.js | 3 ++-
 frontend/stylesheets/main.less                                | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index f815e5fd1ba..4e6408c6182 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -16,6 +16,7 @@ import type { Dispatch } from "redux";
 import { connect } from "react-redux";
 import React, { useState } from "react";
 import _ from "lodash";
+import classnames from "classnames";
 
 import type { APIDataset } from "types/api_flow_types";
 import { AsyncButton, AsyncIconButton } from "components/async_clickables";
@@ -244,13 +245,13 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     return (
       <Tooltip title={tooltipText}>
         <EditOutlined
+          className={classnames({ "color-primary": isInEditMode })}
           onClick={() => this.props.onChangeLayer(layerName, "isInEditMode", !isInEditMode)}
           style={{
             position: "absolute",
             top: 4,
             right: 30,
             cursor: "pointer",
-            color: isInEditMode ? "rgb(24, 144, 255)" : null,
           }}
         />
       </Tooltip>
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index f8cacdc5ad2..71ee24c8e29 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -104,6 +104,10 @@ td.nowrap * {
   display: inline-block;
 }
 
+.color-primary {
+  color: @primary-color;
+}
+
 #credits {
   background-color: @layout-footer-background;
   & > div {

From aaa4d4e0edb257bed11a805b1ff4bd8a457f6bc3 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Thu, 22 Apr 2021 11:37:05 +0200
Subject: [PATCH 17/45] nml_upload_zone_container.js

---
 .../oxalis/view/nml_upload_zone_container.js  | 49 ++-----------------
 frontend/stylesheets/main.less                | 24 +++++++++
 2 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/nml_upload_zone_container.js b/frontend/javascripts/oxalis/view/nml_upload_zone_container.js
index 64ee5010118..8383e8f434a 100644
--- a/frontend/javascripts/oxalis/view/nml_upload_zone_container.js
+++ b/frontend/javascripts/oxalis/view/nml_upload_zone_container.js
@@ -33,31 +33,9 @@ type StateProps = {|
 type Props = {| ...StateProps, ...OwnProps |};
 
 function OverlayDropZone({ children }) {
-  const overlayStyle = {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    padding: "2.5em 0",
-    background: "rgba(0, 0, 0, 0.45)",
-    textAlign: "center",
-    zIndex: 1000,
-  };
-
   return (
-    <div style={overlayStyle}>
-      <div
-        style={{
-          width: 400,
-          height: 250,
-          background: "white",
-          borderRadius: 4,
-          margin: "0 auto",
-        }}
-      >
-        {children}
-      </div>
+    <div className="nml-upload-zone-overlay">
+      <div className="nml-upload-zone-modal">{children}</div>
     </div>
   );
 }
@@ -68,7 +46,7 @@ function NmlDropArea({ clickAllowed, isUpdateAllowed, getInputProps }) {
     <div style={{ textAlign: "center", cursor: "pointer" }}>
       {clickInput}
       <div>
-        <InboxOutlined style={{ fontSize: 180, color: "rgb(58, 144, 255)" }} />
+        <InboxOutlined style={{ fontSize: 180 }} className="color-primary" />
       </div>
       {isUpdateAllowed ? (
         <h5>Drop NML files here{clickAllowed ? " or click to select files" : null}...</h5>
@@ -121,13 +99,7 @@ class NmlUploadZoneContainer extends React.PureComponent<Props, State> {
         renderItem={file => (
           <List.Item>
             <List.Item.Meta
-              avatar={
-                <Avatar
-                  size="large"
-                  icon={<FileOutlined />}
-                  style={{ backgroundColor: "rgb(58, 144, 255)" }}
-                />
-              }
+              avatar={<Avatar size="large" icon={<FileOutlined />} className="bg-primary" />}
               title={
                 <span style={{ wordBreak: "break-word" }}>
                   {file.name}{" "}
@@ -169,18 +141,7 @@ class NmlUploadZoneContainer extends React.PureComponent<Props, State> {
             style={{ marginBottom: 12 }}
           />
         ) : null}
-        <Dropzone
-          multiple
-          disablePreview
-          style={{
-            position: "relative",
-            textAlign: "center",
-            border: "1px dashed #d9d9d9",
-            borderRadius: 4,
-            cursor: "pointer",
-          }}
-          onDrop={this.onDrop}
-        >
+        <Dropzone multiple disablePreview onDrop={this.onDrop}>
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <NmlDropArea
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index 71ee24c8e29..ed694bb943a 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -107,6 +107,9 @@ td.nowrap * {
 .color-primary {
   color: @primary-color;
 }
+.bg-primary {
+  background-color: @primary-color;
+}
 
 #credits {
   background-color: @layout-footer-background;
@@ -369,3 +372,24 @@ span.keyboard-key-icon:first-child,
 img.keyboard-mouse-icon:first-child {
   margin-left: 0px;
 }
+
+.nml-upload-zone-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 2.5em 0;
+  background: @modal-mask-bg;
+  text-align: center;
+  z-index: 1000;
+}
+.nml-upload-zone-modal {
+  position: relative;
+  top: 100px;
+  width: 400px;
+  height: 250px;
+  background: @modal-header-bg;
+  border-radius: 4px;
+  margin: 0 auto;
+}

From 6261ab52d1153864de8af6b309ddb9d725a2edc4 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Thu, 22 Apr 2021 12:25:07 +0200
Subject: [PATCH 18/45] styling

---
 frontend/javascripts/admin/onboarding.js      |  1 -
 .../dataset/simple_advanced_data_form.js      |  4 +-
 frontend/javascripts/libs/toast.js            |  7 +-
 .../view/layouting/tracing_layout_view.js     |  1 +
 .../view/settings/dataset_settings_view.js    | 11 +--
 frontend/stylesheets/_general.less            | 76 ---------------
 frontend/stylesheets/_utils.less              | 95 +++++++++++++++++++
 frontend/stylesheets/antd_overwrites.less     | 47 +++++++--
 frontend/stylesheets/main.less                | 73 ++------------
 .../stylesheets/trace_view/_tracing_view.less |  2 +-
 10 files changed, 155 insertions(+), 162 deletions(-)
 delete mode 100644 frontend/stylesheets/_general.less
 create mode 100644 frontend/stylesheets/_utils.less

diff --git a/frontend/javascripts/admin/onboarding.js b/frontend/javascripts/admin/onboarding.js
index a5eec605256..4b4738bf891 100644
--- a/frontend/javascripts/admin/onboarding.js
+++ b/frontend/javascripts/admin/onboarding.js
@@ -141,7 +141,6 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
           style={{
             fontSize: 20,
             lineHeight: "22px",
-            color: "#0d232d",
             marginBottom: 0,
           }}
         >
diff --git a/frontend/javascripts/dashboard/dataset/simple_advanced_data_form.js b/frontend/javascripts/dashboard/dataset/simple_advanced_data_form.js
index 338db0bf427..edaf16f7e5b 100644
--- a/frontend/javascripts/dashboard/dataset/simple_advanced_data_form.js
+++ b/frontend/javascripts/dashboard/dataset/simple_advanced_data_form.js
@@ -154,8 +154,8 @@ function SimpleLayerForm({ isReadOnlyDataset, layer, index }) {
   return (
     <Row gutter={48} style={{ width: "100%" }}>
       <Col span={5}>
-        <div style={{ paddingTop: 9, color: "rgba(0, 0, 0, 0.85)" }}>
-          {index + 1}. Layer &ldquo;{layer.name}&rdquo;:
+        <div style={{ paddingTop: 9 }}>
+          {index + 1}. Layer &ldquo;{layer.name}&rdquo;
         </div>
       </Col>
       <Col span={17}>
diff --git a/frontend/javascripts/libs/toast.js b/frontend/javascripts/libs/toast.js
index 6495fb0c08a..7df9f5011d7 100644
--- a/frontend/javascripts/libs/toast.js
+++ b/frontend/javascripts/libs/toast.js
@@ -87,12 +87,7 @@ const Toast = {
 
     if (type === "error") {
       toastConfig = Object.assign(toastConfig, {
-        icon: <CloseCircleOutlined className="alert-wiggle" style={{ color: "#a94442" }} />,
-        style: {
-          backgroundColor: "#f2dede",
-          borderColor: "#ebccd1",
-          color: "#a94442",
-        },
+        icon: <CloseCircleOutlined />,
       });
     }
 
diff --git a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
index 4421d8bbf44..7835bc03da8 100644
--- a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
+++ b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
@@ -326,6 +326,7 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
                           height: 30,
                           paddingTop: 4,
                           backgroundColor: "#f17a27",
+                          border: "none",
                           color: "white",
                         }}
                         message={
diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index 4e6408c6182..f1a51b3a5ab 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -461,15 +461,14 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
                       }}
                     >
                       <i
-                        className={`fas fa-adjust ${
-                          layerConfiguration.isInverted ? "flip-horizontally" : ""
-                        }`}
+                        className={classnames("fas", "fa-adjust", {
+                          "flip-horizontally": layerConfiguration.isInverted,
+                          "color-primary": layerConfiguration.isInverted,
+                          "color-text-secondary": !layerConfiguration.isInverted,
+                        })}
                         style={{
                           margin: 0,
                           transition: "transform 0.5s ease 0s",
-                          color: layerConfiguration.isInverted
-                            ? "rgba(24, 144, 255, 1.0)"
-                            : "rgba(0, 0, 0, 0.65)",
                         }}
                       />
                     </div>
diff --git a/frontend/stylesheets/_general.less b/frontend/stylesheets/_general.less
deleted file mode 100644
index 698b0ba5428..00000000000
--- a/frontend/stylesheets/_general.less
+++ /dev/null
@@ -1,76 +0,0 @@
-h1,
-.h1 {
-  font-size: 36px;
-}
-h2,
-.h2 {
-  font-size: 30px;
-}
-h3,
-.h3 {
-  font-size: 24px;
-}
-h4,
-.h4 {
-  font-size: 18px;
-}
-h5,
-.h5 {
-  font-size: 14px;
-}
-h6,
-.h6 {
-  font-size: 12px;
-}
-p {
-  margin: 0 0 10px;
-}
-
-.flip-horizontally {
-  -webkit-transform: scaleX(-1);
-  -moz-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
-  transform: scaleX(-1);
-
-  filter: FlipH;
-  -ms-filter: "FlipH";
-}
-
-.bordered {
-  border: 1px solid @border-color-base;
-  border-radius: 4px;
-  padding: 4px 11px;
-  width: fit-content;
-}
-
-.circle {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: 5px;
-}
-
-.centered-items {
-  display: flex;
-  flex-direction: row;
-}
-
-.centered-items > * {
-  margin: 6px;
-  font-size: 14;
-}
-
-.centered-items:first-child {
-  margin-left: 0px;
-}
-
-.centered-items:last-child {
-  margin-right: 0px;
-}
-
-.no-footer-modal {
-  .ant-modal-footer {
-    display: none;
-  }
-}
diff --git a/frontend/stylesheets/_utils.less b/frontend/stylesheets/_utils.less
new file mode 100644
index 00000000000..0a28b8ac648
--- /dev/null
+++ b/frontend/stylesheets/_utils.less
@@ -0,0 +1,95 @@
+.bold {
+  font-weight: bold;
+}
+
+// Only affect child items in tables
+td.nowrap * {
+  white-space: nowrap;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.flip-horizontally {
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  transform: scaleX(-1);
+
+  filter: FlipH;
+  -ms-filter: "FlipH";
+}
+
+.bordered {
+  border: 1px solid @border-color-base;
+  border-radius: 4px;
+  padding: 4px 11px;
+  width: fit-content;
+}
+
+// Color util classes
+.color-primary {
+  color: @primary-color;
+}
+.color-text {
+  color: @text-color;
+}
+.color-text-secondary {
+  color: @text-color-secondary;
+}
+.bg-primary {
+  background-color: @primary-color;
+}
+
+// Layout util classes
+.inline-block {
+  display: inline-block;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.flex-overflow {
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+.centered-items {
+  display: flex;
+  flex-direction: row;
+
+  & > * {
+    margin: 6px;
+    font-size: 14;
+  }
+
+  &:first-child {
+    margin-left: 0px;
+  }
+
+  &:last-child {
+    margin-right: 0px;
+  }
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.circle {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.no-footer-modal {
+  .ant-modal-footer {
+    display: none;
+  }
+}
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
index 67534feeb33..1f2ef212ad6 100644
--- a/frontend/stylesheets/antd_overwrites.less
+++ b/frontend/stylesheets/antd_overwrites.less
@@ -1,3 +1,25 @@
+h1 {
+  font-size: 36px;
+}
+h2 {
+  font-size: 30px;
+}
+h3 {
+  font-size: 24px;
+}
+h4 {
+  font-size: 18px;
+}
+h5 {
+  font-size: 14px;
+}
+h6 {
+  font-size: 12px;
+}
+p {
+  margin: 0 0 10px;
+}
+
 .ant-layout-sider,
 .ant-collapse-borderless,
 .ant-layout {
@@ -35,6 +57,24 @@
     resize: both;
   }
 
+  &.ant-notification-notice-error {
+    background-color: #f2dede;
+    border-color: #ebccd1;
+    color: #a94442;
+    .ant-notification-notice-message {
+      color: #a94442;
+    }
+    .ant-notification-notice-close {
+      color: #a94442;
+    }
+    .ant-notification-notice-icon {
+      animation-name: alert-wiggle;
+      animation-duration: 5s;
+      animation-delay: 0s;
+      animation-iteration-count: infinite;
+    }
+  }
+
   @keyframes alert-wiggle {
     0% {
       transform: translateX(0px) translateY(0px);
@@ -70,13 +110,6 @@
       transform: translateX(0px) translateY(0px);
     }
   }
-
-  .alert-wiggle {
-    animation-name: alert-wiggle;
-    animation-duration: 5s;
-    animation-delay: 0s;
-    animation-iteration-count: infinite;
-  }
 }
 
 .ant-notification-notice-message {
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index ed694bb943a..ed44bd84589 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -12,7 +12,7 @@
 @icon-url: "../../../../../frontend/stylesheets/iconfont/iconfont";
 
 @import "_variables.less";
-@import "_general.less";
+@import "_utils.less";
 @import "_dashboard.less";
 @import "_spotlight.less";
 @import "trace_view/_tracing_view.less";
@@ -75,19 +75,6 @@ body {
   }
 }
 
-.bold {
-  font-weight: bold;
-}
-
-// Only affect child items in tables
-td.nowrap * {
-  white-space: nowrap;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
 .fa-random {
   width: 14px;
   background-position: -217px -120px;
@@ -104,13 +91,6 @@ td.nowrap * {
   display: inline-block;
 }
 
-.color-primary {
-  color: @primary-color;
-}
-.bg-primary {
-  background-color: @primary-color;
-}
-
 #credits {
   background-color: @layout-footer-background;
   & > div {
@@ -147,10 +127,6 @@ td.nowrap * {
   }
 }
 
-.pull-right {
-  float: right !important;
-}
-
 // Fixing font awesome
 .btn [class^="fa-"],
 .nav [class^="fa-"],
@@ -186,17 +162,6 @@ i.without-icon-margin,
   margin-right: 0;
 }
 
-.flex-column {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.flex-overflow {
-  overflow-y: auto;
-  flex-grow: 1;
-}
-
 .monospace-id {
   // break long IDs
   word-wrap: break-word;
@@ -206,42 +171,24 @@ i.without-icon-margin,
   width: 135px;
 }
 
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px;
-  }
-}
-@media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
-}
-@media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
-}
-
-@media screen and (max-width: 968px) {
-  .container {
-    width: auto;
-    margin: 0 10px;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .hide-on-small-screen {
+.hide-on-small-screen {
+  @media (max-width: 1024px) {
     display: none !important;
   }
 }
 
 .container {
   padding-top: 20px;
-  margin-left: 20px;
-  margin-right: 20px;
+  margin-left: 10px;
+  margin-right: 10px;
   width: auto;
   padding-left: 15px;
   padding-right: 15px;
+
+  @media (min-width: 970px) {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
 }
 
 .icon-big {
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index 99d66d53251..b8f001c209f 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -389,7 +389,7 @@
 .right-border-button {
   border: none;
   padding: 0px 5px 0px 0px;
-  color: rgba(0, 0, 0, 0.65);
+  color: @text-color-secondary;
   i {
     font-size: 15px !important;
     margin: 0;

From e651eb03c5dea4105c228758fa79fbcb2635b4d0 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Thu, 22 Apr 2021 12:33:41 +0200
Subject: [PATCH 19/45] share_modal_view.js + meshes_view.js

---
 .../oxalis/view/action-bar/share_modal_view.js    |  2 +-
 .../oxalis/view/right-menu/meshes_view.js         | 15 ++++-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js b/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
index 19d31c72f3f..db3e3f3148c 100644
--- a/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
+++ b/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
@@ -35,8 +35,8 @@ function Hint({ children, style }) {
         ...style,
         marginBottom: 12,
         fontSize: 12,
-        color: "rgb(118, 118, 118)",
       }}
+      className="color-text-secondary"
     >
       {children}
     </div>
diff --git a/frontend/javascripts/oxalis/view/right-menu/meshes_view.js b/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
index 8465066186f..834ab36112e 100644
--- a/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
@@ -44,7 +44,7 @@ import { readFileAsArrayBuffer } from "libs/read_file";
 import { setImportingMeshStateAction } from "oxalis/model/actions/ui_actions";
 import { trackAction } from "oxalis/model/helpers/analytics";
 import { jsConvertCellIdToHSLA } from "oxalis/shaders/segmentation.glsl";
-import classNames from "classnames";
+import classnames from "classnames";
 
 export const stlIsosurfaceConstants = {
   isosurfaceMarker: [105, 115, 111], // ASCII codes for ISO
@@ -147,14 +147,6 @@ type DispatchProps = ExtractReturn<typeof mapDispatchToProps>;
 
 type Props = {| ...DispatchProps, ...StateProps |};
 
-const getCheckboxStyle = isLoaded =>
-  isLoaded
-    ? {}
-    : {
-        fontStyle: "italic",
-        color: "#989898",
-      };
-
 class MeshesView extends React.Component<
   Props,
   { currentlyEditedMesh: ?MeshMetaData, hoveredListItem: ?number },
@@ -302,7 +294,7 @@ class MeshesView extends React.Component<
         >
           <div style={{ display: "flex" }}>
             <div
-              className={classNames("isosurface-list-item", {
+              className={classnames("isosurface-list-item", {
                 "is-centered-cell": segmentId === isCenteredCell,
               })}
               onClick={() => {
@@ -338,7 +330,8 @@ class MeshesView extends React.Component<
               this.props.onChangeVisibility(mesh, event.target.checked);
             }}
             disabled={isLoading}
-            style={getCheckboxStyle(mesh.isLoaded)}
+            style={mesh.isLoaded ? null : { fontStyle: "italic" }}
+            className={classnames({ "color-text-secondary": !mesh.isLoaded })}
           >
             {mesh.description}
           </Checkbox>

From 2e60d8d3782b7b93ce5072f90218c93a44220016 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sat, 24 Apr 2021 22:04:20 +0200
Subject: [PATCH 20/45] styling

---
 app/views/main.scala.html                     |  2 +-
 .../javascripts/admin/time/time_line_view.js  | 16 +++++++------
 .../admin/user/experience_modal_view.js       |  6 +----
 .../user/permissions_and_teams_modal_view.js  |  6 ++---
 .../view/right-menu/dataset_info_tab_view.js  |  7 ++----
 .../view/right-menu/mapping_info_view.js      |  2 +-
 frontend/stylesheets/_utils.less              | 24 +++++++++++++++++++
 .../stylesheets/trace_view/_tracing_view.less | 12 ++++++++++
 8 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
index 5b8a5ec8267..3912893c159 100755
--- a/app/views/main.scala.html
+++ b/app/views/main.scala.html
@@ -4,7 +4,7 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <meta name="commit-hash" content="@(webknossos.BuildInfo.commitHash)" />
-    <title>@(conf.Application.title) @(selectedTheme)</title>
+    <title>@(conf.Application.title)</title>
     @if(conf.Features.isDemoInstance){
     <meta
       name="description"
diff --git a/frontend/javascripts/admin/time/time_line_view.js b/frontend/javascripts/admin/time/time_line_view.js
index f50cbe304cb..a0141744859 100644
--- a/frontend/javascripts/admin/time/time_line_view.js
+++ b/frontend/javascripts/admin/time/time_line_view.js
@@ -336,13 +336,15 @@ class TimeLineView extends React.PureComponent<Props, State> {
         <div style={{ marginTop: 20 }} />
         <Spin size="large" spinning={isLoading}>
           {timeTrackingData.length > 0 ? (
-            <TimeTrackingChart
-              columns={columns}
-              rows={rows}
-              timeAxisFormat={timeAxisFormat}
-              dateRange={dateRange}
-              timeTrackingData={timeTrackingData}
-            />
+            <div style={{ backgroundColor: "white" }}>
+              <TimeTrackingChart
+                columns={columns}
+                rows={rows}
+                timeAxisFormat={timeAxisFormat}
+                dateRange={dateRange}
+                timeTrackingData={timeTrackingData}
+              />
+            </div>
           ) : (
             <div style={{ textAlign: "center" }}>
               No Time Tracking Data for the Selected User or Date Range.
diff --git a/frontend/javascripts/admin/user/experience_modal_view.js b/frontend/javascripts/admin/user/experience_modal_view.js
index e2a66dcced7..852f29d49ec 100644
--- a/frontend/javascripts/admin/user/experience_modal_view.js
+++ b/frontend/javascripts/admin/user/experience_modal_view.js
@@ -312,11 +312,7 @@ class ExperienceModalView extends React.PureComponent<Props, State> {
                   >
                     <Badge
                       count={record.sharedByCount}
-                      style={
-                        isSharedByAll
-                          ? { backgroundColor: "#52c41a" }
-                          : { backgroundColor: "#fff", color: "#999" }
-                      }
+                      style={isSharedByAll ? { backgroundColor: "#52c41a" } : null}
                     />
                   </Tooltip>
                 );
diff --git a/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js b/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
index 110324f9c47..f26a2b28a13 100644
--- a/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
+++ b/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
@@ -254,19 +254,19 @@ class PermissionsAndTeamsModalView extends React.PureComponent<TeamRoleModalProp
           >
             <Radio value={PERMISSIONS.admin}>
               <div style={roleStyle}>Admin</div>
-              <div style={explanationStyle}>
+              <div style={explanationStyle} className="color-text-secondary">
                 Full administration capabilities. View and edit all datasets.
               </div>
             </Radio>
             <Radio value={PERMISSIONS.datasetManager}>
               <div style={roleStyle}>Dataset Manager</div>
-              <div style={explanationStyle}>
+              <div style={explanationStyle} className="color-text-secondary">
                 No administration capabilities. View and edit all datasets.
               </div>
             </Radio>
             <Radio value={PERMISSIONS.member}>
               <div style={roleStyle}>Member</div>
-              <div style={explanationStyle}>
+              <div style={explanationStyle} className="color-text-secondary">
                 No special permissions. Dataset access based on team memberships.
               </div>
             </Radio>
diff --git a/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js b/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js
index 558386b022f..b01b9ca4c13 100644
--- a/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js
@@ -149,13 +149,10 @@ class DatasetInfoTabView extends React.PureComponent<Props> {
   getKeyboardShortcuts(isDatasetViewMode: boolean) {
     return isDatasetViewMode ? (
       <div style={{ marginBottom: 25 }}>
-        <table style={{ marginRight: 20, marginTop: 25, maxWidth: 500, fontSize: 14 }}>
+        <table className="shortcut-table">
           <tbody>
             {shortcuts.map(shortcut => (
-              <tr
-                key={shortcut.key}
-                style={{ borderBottom: "1px solid #e8e8e8", borderTop: "1px solid #e8e8e8" }}
-              >
+              <tr key={shortcut.key}>
                 <td style={{ width: 200 }}>{shortcut.keybinding}</td>
                 <td>{shortcut.action}</td>
               </tr>
diff --git a/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js b/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
index 7dfa078d4b7..b79bc8230d8 100644
--- a/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
@@ -248,7 +248,7 @@ class MappingInfoView extends React.Component<Props, State> {
         <React.Fragment>
           {title}{" "}
           <Tooltip title={message["tracing.uint64_segmentation_warning"]}>
-            <WarningOutlined style={{ color: "rgb(255, 155, 85)" }} />
+            <WarningOutlined className="color-warning" />
           </Tooltip>
         </React.Fragment>
       ) : (
diff --git a/frontend/stylesheets/_utils.less b/frontend/stylesheets/_utils.less
index 0a28b8ac648..1c3aa43f71d 100644
--- a/frontend/stylesheets/_utils.less
+++ b/frontend/stylesheets/_utils.less
@@ -32,6 +32,21 @@ td.nowrap * {
 .color-primary {
   color: @primary-color;
 }
+.color-success {
+  color: @success-color;
+}
+.color-info {
+  color: @info-color;
+}
+.color-warning {
+  color: @warning-color;
+}
+.color-error {
+  color: @error-color;
+}
+.color-highlight {
+  color: @highlight-color;
+}
 .color-text {
   color: @text-color;
 }
@@ -41,6 +56,15 @@ td.nowrap * {
 .bg-primary {
   background-color: @primary-color;
 }
+.bg-success {
+  background-color: @success-color;
+}
+.bg-body {
+  background-color: @body-background;
+}
+.bg-component {
+  background-color: @component-background;
+}
 
 // Layout util classes
 .inline-block {
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index b8f001c209f..0015a7b5913 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -207,6 +207,18 @@
   }
 }
 
+.shortcut-table {
+  margin-right: 20px;
+  margin-top: 25px;
+  max-width: 500px;
+  font-size: 14px;
+
+  tr {
+    border-bottom: 1px solid @border-color-base;
+    border-top: 1px solid @border-color-base;
+  }
+}
+
 #portal-navbarTracingSlot {
   width: 100%;
   line-height: normal;

From 491133e59b99ab2fee93a73f9da65bf6a679e11f Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 26 Apr 2021 16:50:17 +0200
Subject: [PATCH 21/45] dataset_upload_view.js

---
 .../admin/dataset/dataset_upload_view.js      | 55 ++++---------------
 frontend/stylesheets/main.less                | 27 +++++++++
 2 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/frontend/javascripts/admin/dataset/dataset_upload_view.js b/frontend/javascripts/admin/dataset/dataset_upload_view.js
index 2a5e60a6e86..c863b58f8d9 100644
--- a/frontend/javascripts/admin/dataset/dataset_upload_view.js
+++ b/frontend/javascripts/admin/dataset/dataset_upload_view.js
@@ -14,8 +14,9 @@ import {
 } from "antd";
 import { InfoCircleOutlined, FileOutlined, FolderOutlined, InboxOutlined } from "@ant-design/icons";
 import { connect } from "react-redux";
-import React, { useMemo } from "react";
+import React from "react";
 import moment from "moment";
+import classnames from "classnames";
 import _ from "lodash";
 import { useDropzone } from "react-dropzone";
 
@@ -630,36 +631,6 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
   }
 }
 
-const baseStyle: Object = {
-  flex: 1,
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  padding: "20px",
-  borderWidth: 2,
-  borderRadius: 2,
-  borderColor: "#eeeeee",
-  borderStyle: "dashed",
-  backgroundColor: "#fafafa",
-  color: "rgba(0, 0, 0, 0.85)",
-  fontSize: 16,
-  outline: "none",
-  transition: "border .24s ease-in-out",
-  cursor: "pointer",
-};
-
-const activeStyle: Object = {
-  borderColor: "#2196f3",
-};
-
-const acceptStyle: Object = {
-  borderColor: "#00e676",
-};
-
-const rejectStyle: Object = {
-  borderColor: "#ff1744",
-};
-
 function FileUploadArea({ fileList, onChange }) {
   const onDropAccepted = acceptedFiles => {
     // file.path should be set by react-dropzone (which uses file-selector::toFileWithPath).
@@ -673,16 +644,6 @@ function FileUploadArea({ fileList, onChange }) {
   });
   const acceptedFiles = fileList;
 
-  const style: Object = useMemo(
-    () => ({
-      ...baseStyle,
-      ...(isDragActive ? activeStyle : {}),
-      ...(isDragAccept ? acceptStyle : {}),
-      ...(isDragReject ? rejectStyle : {}),
-    }),
-    [isDragActive, isDragReject, isDragAccept],
-  );
-
   const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
 
   const showSmallFileList = files.length > 10;
@@ -725,9 +686,17 @@ function FileUploadArea({ fileList, onChange }) {
 
   return (
     <div>
-      <div {...getRootProps({ style })}>
+      <div
+        {...getRootProps({
+          className: classnames("dataset-upload-dropzone", {
+            "dataset-upload-dropzone-active": isDragActive,
+            "dataset-upload-dropzone-accept": isDragAccept,
+            "dataset-upload-dropzone-rejct": isDragReject,
+          }),
+        })}
+      >
         <input {...getInputProps()} />
-        <InboxOutlined style={{ fontSize: 48, color: "#41a9ff" }} />
+        <InboxOutlined style={{ fontSize: 48 }} className="color-primary" />
         <p style={{ maxWidth: 800, textAlign: "center", marginTop: 8 }}>
           Drag your file(s) to this area to upload them. Either add individual image files, a zip
           archive or a folder.{" "}
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index ed44bd84589..0278e00a8b7 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -340,3 +340,30 @@ img.keyboard-mouse-icon:first-child {
   border-radius: 4px;
   margin: 0 auto;
 }
+.dataset-upload-dropzone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 2px;
+  border-color: @border-color-base;
+  border-style: dashed;
+  background-color: @component-background;
+  color: @text-color;
+  font-size: 16px;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+  cursor: pointer;
+
+  &.dataset-upload-dropzone-active {
+    border-color: @primary-color;
+  }
+  &.dataset-upload-dropzone-accept {
+    border-color: @success-color;
+  }
+  &.dataset-upload-dropzone-reject {
+    border-color: @error-color;
+  }
+}

From 38c27f945e049881fa359ed2a08dbc15e36bec09 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 26 Apr 2021 17:33:57 +0200
Subject: [PATCH 22/45] dataset_import_view.js

---
 frontend/javascripts/dashboard/dataset/dataset_import_view.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/javascripts/dashboard/dataset/dataset_import_view.js b/frontend/javascripts/dashboard/dataset/dataset_import_view.js
index 37f17c55e4a..c3a0d773ccc 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_import_view.js
+++ b/frontend/javascripts/dashboard/dataset/dataset_import_view.js
@@ -672,13 +672,13 @@ class DatasetImportView extends React.PureComponent<Props, State> {
 
     const errorIcon = (
       <Tooltip title="Some fields in this tab require your attention.">
-        <ExclamationCircleOutlined style={{ color: "#f5222d", marginLeft: 4 }} />
+        <ExclamationCircleOutlined className="color-error" style={{ marginLeft: 4 }} />
       </Tooltip>
     );
     const { hasNoAllowedTeams } = this.state;
     const hasNoAllowedTeamsWarning = hasNoAllowedTeams ? (
       <Tooltip title="Please double-check some fields here.">
-        <ExclamationCircleOutlined style={{ color: "#faad14", marginLeft: 4 }} />
+        <ExclamationCircleOutlined className="color-warning" style={{ marginLeft: 4 }} />
       </Tooltip>
     ) : null;
 

From 6c3e224460887c3736c7fda6ffe2652d232dd070 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 26 Apr 2021 17:58:03 +0200
Subject: [PATCH 23/45] util classes to css vars

---
 .../admin/dataset/dataset_upload_view.js      |  2 +-
 .../admin/user/experience_modal_view.js       |  2 +-
 .../user/permissions_and_teams_modal_view.js  |  8 +--
 .../advanced_dataset/dataset_action_view.js   |  6 +--
 .../dashboard/dataset/dataset_import_view.js  |  4 +-
 .../view/action-bar/share_modal_view.js       |  2 +-
 .../view/layouting/tracing_layout_view.js     |  4 +-
 .../oxalis/view/nml_upload_zone_container.js  | 10 +++-
 .../view/right-menu/mapping_info_view.js      |  2 +-
 .../oxalis/view/right-menu/meshes_view.js     |  7 +--
 .../view/settings/dataset_settings_view.js    |  7 +--
 frontend/stylesheets/_utils.less              | 51 ++++++-------------
 frontend/stylesheets/main.less                |  2 +-
 13 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/frontend/javascripts/admin/dataset/dataset_upload_view.js b/frontend/javascripts/admin/dataset/dataset_upload_view.js
index c863b58f8d9..0d23a800ba7 100644
--- a/frontend/javascripts/admin/dataset/dataset_upload_view.js
+++ b/frontend/javascripts/admin/dataset/dataset_upload_view.js
@@ -696,7 +696,7 @@ function FileUploadArea({ fileList, onChange }) {
         })}
       >
         <input {...getInputProps()} />
-        <InboxOutlined style={{ fontSize: 48 }} className="color-primary" />
+        <InboxOutlined style={{ fontSize: 48, color: "var(--ant-primary)" }} />
         <p style={{ maxWidth: 800, textAlign: "center", marginTop: 8 }}>
           Drag your file(s) to this area to upload them. Either add individual image files, a zip
           archive or a folder.{" "}
diff --git a/frontend/javascripts/admin/user/experience_modal_view.js b/frontend/javascripts/admin/user/experience_modal_view.js
index 852f29d49ec..3b9c78848fa 100644
--- a/frontend/javascripts/admin/user/experience_modal_view.js
+++ b/frontend/javascripts/admin/user/experience_modal_view.js
@@ -312,7 +312,7 @@ class ExperienceModalView extends React.PureComponent<Props, State> {
                   >
                     <Badge
                       count={record.sharedByCount}
-                      style={isSharedByAll ? { backgroundColor: "#52c41a" } : null}
+                      style={isSharedByAll ? { backgroundColor: "var(--ant-success)" } : null}
                     />
                   </Tooltip>
                 );
diff --git a/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js b/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
index f26a2b28a13..fd6aee85bf2 100644
--- a/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
+++ b/frontend/javascripts/admin/user/permissions_and_teams_modal_view.js
@@ -228,7 +228,7 @@ class PermissionsAndTeamsModalView extends React.PureComponent<TeamRoleModalProp
 
   getPermissionSelection(onlyEditingSingleUser: boolean, isUserAdmin: boolean) {
     const roleStyle = { fontWeight: "bold" };
-    const explanationStyle = { paddingBottom: 12 };
+    const explanationStyle = { paddingBottom: 12, color: "var(--ant-text-secondary)" };
     return (
       <React.Fragment>
         <h4>
@@ -254,19 +254,19 @@ class PermissionsAndTeamsModalView extends React.PureComponent<TeamRoleModalProp
           >
             <Radio value={PERMISSIONS.admin}>
               <div style={roleStyle}>Admin</div>
-              <div style={explanationStyle} className="color-text-secondary">
+              <div style={explanationStyle}>
                 Full administration capabilities. View and edit all datasets.
               </div>
             </Radio>
             <Radio value={PERMISSIONS.datasetManager}>
               <div style={roleStyle}>Dataset Manager</div>
-              <div style={explanationStyle} className="color-text-secondary">
+              <div style={explanationStyle}>
                 No administration capabilities. View and edit all datasets.
               </div>
             </Radio>
             <Radio value={PERMISSIONS.member}>
               <div style={roleStyle}>Member</div>
-              <div style={explanationStyle} className="color-text-secondary">
+              <div style={explanationStyle}>
                 No special permissions. Dataset access based on team memberships.
               </div>
             </Radio>
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.js
index 84bb1e02c43..bf3311a257d 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.js
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.js
@@ -84,7 +84,7 @@ const getNewTracingMenu = (maybeUnimportedDataset: APIMaybeUnimportedDataset) =>
   }
 };
 
-const disabledStyle = { pointerEvents: "none", color: "rgba(0, 0, 0, 0.25)" };
+const disabledStyle = { pointerEvents: "none", color: "var(--ant-disabled)" };
 function getDisabledWhenReloadingStyle(isReloading) {
   return isReloading ? disabledStyle : null;
 }
@@ -110,16 +110,16 @@ function NewAnnotationLink({ dataset, isReloading }) {
           </LinkWithDisabled>
           <span
             style={{
-              color: "#abadaf",
               marginLeft: 8,
               marginRight: 8,
+              color: "var(--ant-border-base)",
             }}
           >
             |
           </span>
           <Dropdown overlay={newTracingMenu}>
             <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-              <DownOutlined style={{ color: "#56a1e7" }} />
+              <DownOutlined style={{ color: "var(--ant-link)" }} />
             </a>
           </Dropdown>
         </div>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_import_view.js b/frontend/javascripts/dashboard/dataset/dataset_import_view.js
index c3a0d773ccc..5199d20a262 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_import_view.js
+++ b/frontend/javascripts/dashboard/dataset/dataset_import_view.js
@@ -672,13 +672,13 @@ class DatasetImportView extends React.PureComponent<Props, State> {
 
     const errorIcon = (
       <Tooltip title="Some fields in this tab require your attention.">
-        <ExclamationCircleOutlined className="color-error" style={{ marginLeft: 4 }} />
+        <ExclamationCircleOutlined style={{ marginLeft: 4, color: "var(--ant-error)" }} />
       </Tooltip>
     );
     const { hasNoAllowedTeams } = this.state;
     const hasNoAllowedTeamsWarning = hasNoAllowedTeams ? (
       <Tooltip title="Please double-check some fields here.">
-        <ExclamationCircleOutlined className="color-warning" style={{ marginLeft: 4 }} />
+        <ExclamationCircleOutlined style={{ marginLeft: 4, color: "var(--ant-warning)" }} />
       </Tooltip>
     ) : null;
 
diff --git a/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js b/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
index db3e3f3148c..54930b9f0eb 100644
--- a/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
+++ b/frontend/javascripts/oxalis/view/action-bar/share_modal_view.js
@@ -35,8 +35,8 @@ function Hint({ children, style }) {
         ...style,
         marginBottom: 12,
         fontSize: 12,
+        color: "var(--ant-text-secondary)",
       }}
-      className="color-text-secondary"
     >
       {children}
     </div>
diff --git a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
index 7835bc03da8..01c8fc5d23d 100644
--- a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
+++ b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
@@ -321,11 +321,11 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
                   {isDatasetOnScratchVolume ? (
                     <Tooltip title={messages["dataset.is_scratch"]}>
                       <Alert
-                        className="hide-on-small-screen"
+                        className="hide-on-small-screen bg-warning"
                         style={{
                           height: 30,
                           paddingTop: 4,
-                          backgroundColor: "#f17a27",
+                          backgroundColor: "var(--ant-warning)",
                           border: "none",
                           color: "white",
                         }}
diff --git a/frontend/javascripts/oxalis/view/nml_upload_zone_container.js b/frontend/javascripts/oxalis/view/nml_upload_zone_container.js
index 8383e8f434a..5d1e3fbb83a 100644
--- a/frontend/javascripts/oxalis/view/nml_upload_zone_container.js
+++ b/frontend/javascripts/oxalis/view/nml_upload_zone_container.js
@@ -46,7 +46,7 @@ function NmlDropArea({ clickAllowed, isUpdateAllowed, getInputProps }) {
     <div style={{ textAlign: "center", cursor: "pointer" }}>
       {clickInput}
       <div>
-        <InboxOutlined style={{ fontSize: 180 }} className="color-primary" />
+        <InboxOutlined style={{ fontSize: 180, color: "var(--ant-primary)" }} />
       </div>
       {isUpdateAllowed ? (
         <h5>Drop NML files here{clickAllowed ? " or click to select files" : null}...</h5>
@@ -99,7 +99,13 @@ class NmlUploadZoneContainer extends React.PureComponent<Props, State> {
         renderItem={file => (
           <List.Item>
             <List.Item.Meta
-              avatar={<Avatar size="large" icon={<FileOutlined />} className="bg-primary" />}
+              avatar={
+                <Avatar
+                  size="large"
+                  icon={<FileOutlined />}
+                  style={{ backgroundColor: "var(--ant-primary)" }}
+                />
+              }
               title={
                 <span style={{ wordBreak: "break-word" }}>
                   {file.name}{" "}
diff --git a/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js b/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
index b79bc8230d8..5446dc2ef90 100644
--- a/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js
@@ -248,7 +248,7 @@ class MappingInfoView extends React.Component<Props, State> {
         <React.Fragment>
           {title}{" "}
           <Tooltip title={message["tracing.uint64_segmentation_warning"]}>
-            <WarningOutlined className="color-warning" />
+            <WarningOutlined style={{ color: "var(--ant-warning)" }} />
           </Tooltip>
         </React.Fragment>
       ) : (
diff --git a/frontend/javascripts/oxalis/view/right-menu/meshes_view.js b/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
index 834ab36112e..55d2cf3fb63 100644
--- a/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/meshes_view.js
@@ -225,7 +225,7 @@ class MeshesView extends React.Component<
             this.props.onStlUpload(file);
           }}
           showUploadList={false}
-          style={{ fontSize: 16, color: "#2a3a48", cursor: "pointer" }}
+          style={{ fontSize: 16, cursor: "pointer" }}
           disabled={!this.props.allowUpdate || this.props.isImporting}
         >
           <Tooltip
@@ -330,8 +330,9 @@ class MeshesView extends React.Component<
               this.props.onChangeVisibility(mesh, event.target.checked);
             }}
             disabled={isLoading}
-            style={mesh.isLoaded ? null : { fontStyle: "italic" }}
-            className={classnames({ "color-text-secondary": !mesh.isLoaded })}
+            style={
+              mesh.isLoaded ? null : { fontStyle: "italic", color: "var(--ant-text-secondary)" }
+            }
           >
             {mesh.description}
           </Checkbox>
diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index f1a51b3a5ab..91f17544006 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -245,13 +245,13 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     return (
       <Tooltip title={tooltipText}>
         <EditOutlined
-          className={classnames({ "color-primary": isInEditMode })}
           onClick={() => this.props.onChangeLayer(layerName, "isInEditMode", !isInEditMode)}
           style={{
             position: "absolute",
             top: 4,
             right: 30,
             cursor: "pointer",
+            color: isInEditMode ? "var(--ant-primary)" : null,
           }}
         />
       </Tooltip>
@@ -463,12 +463,13 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
                       <i
                         className={classnames("fas", "fa-adjust", {
                           "flip-horizontally": layerConfiguration.isInverted,
-                          "color-primary": layerConfiguration.isInverted,
-                          "color-text-secondary": !layerConfiguration.isInverted,
                         })}
                         style={{
                           margin: 0,
                           transition: "transform 0.5s ease 0s",
+                          color: layerConfiguration.isInverted
+                            ? "var(--ant-primary)"
+                            : "var(--ant-text-secondary)",
                         }}
                       />
                     </div>
diff --git a/frontend/stylesheets/_utils.less b/frontend/stylesheets/_utils.less
index 1c3aa43f71d..062597edcc7 100644
--- a/frontend/stylesheets/_utils.less
+++ b/frontend/stylesheets/_utils.less
@@ -28,42 +28,21 @@ td.nowrap * {
   width: fit-content;
 }
 
-// Color util classes
-.color-primary {
-  color: @primary-color;
-}
-.color-success {
-  color: @success-color;
-}
-.color-info {
-  color: @info-color;
-}
-.color-warning {
-  color: @warning-color;
-}
-.color-error {
-  color: @error-color;
-}
-.color-highlight {
-  color: @highlight-color;
-}
-.color-text {
-  color: @text-color;
-}
-.color-text-secondary {
-  color: @text-color-secondary;
-}
-.bg-primary {
-  background-color: @primary-color;
-}
-.bg-success {
-  background-color: @success-color;
-}
-.bg-body {
-  background-color: @body-background;
-}
-.bg-component {
-  background-color: @component-background;
+// Export antd color vars
+:root {
+  --ant-primary: @primary-color;
+  --ant-success: @success-color;
+  --ant-info: @info-color;
+  --ant-warning: @warning-color;
+  --ant-error: @error-color;
+  --ant-highlight: @highlight-color;
+  --ant-text: @text-color;
+  --ant-text-secondary: @text-color-secondary;
+  --ant-link: @link-color;
+  --ant-border-base: @border-color-base;
+  --ant-body-background: @body-background;
+  --ant-component-background: @component-background;
+  --ant-disabled: @disabled-color;
 }
 
 // Layout util classes
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index 0278e00a8b7..b3d70815e46 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -348,7 +348,7 @@ img.keyboard-mouse-icon:first-child {
   padding: 20px;
   border-width: 2px;
   border-radius: 2px;
-  border-color: @border-color-base;
+  border-color: @text-color-secondary;
   border-style: dashed;
   background-color: @component-background;
   color: @text-color;

From 2e53ba74438549ce862e870b8852497c97b92a63 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 26 Apr 2021 18:30:52 +0200
Subject: [PATCH 24/45] persisting the selected theme from the navbar

---
 frontend/javascripts/admin/admin_rest_api.js | 11 ++++
 frontend/javascripts/navbar.js               | 62 ++++++++++++++------
 frontend/javascripts/types/api_flow_types.js |  3 +
 3 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/frontend/javascripts/admin/admin_rest_api.js b/frontend/javascripts/admin/admin_rest_api.js
index de1c99a22fc..d95e11380f7 100644
--- a/frontend/javascripts/admin/admin_rest_api.js
+++ b/frontend/javascripts/admin/admin_rest_api.js
@@ -38,6 +38,7 @@ import {
   APIAnnotationTypeEnum,
   type APIUpdateActionBatch,
   type APIUser,
+  type APIUserTheme,
   type APIUserLoggedTime,
   type ExperienceDomainList,
   type HybridServerTracing,
@@ -226,6 +227,16 @@ export function updateLastTaskTypeIdOfUser(
   });
 }
 
+export function updateSelectedThemeOfUser(
+  userId: string,
+  selectedTheme: APIUserTheme,
+): Promise<APIUser> {
+  return Request.sendJSONReceiveJSON(`/api/users/${userId}/selectedTheme`, {
+    method: "PUT",
+    data: JSON.stringify(selectedTheme),
+  });
+}
+
 export async function getAuthToken(): Promise<string> {
   const { token } = await Request.receiveJSON("/api/auth/token");
   return token;
diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index ba491109fe9..3a5cadeb51e 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -3,6 +3,7 @@ import { Avatar, Layout, Menu, Popover } from "antd";
 import {
   SwapOutlined,
   TeamOutlined,
+  CheckOutlined,
   BarChartOutlined,
   HomeOutlined,
   QuestionCircleOutlined,
@@ -14,10 +15,15 @@ import { connect } from "react-redux";
 import React from "react";
 
 import Toast from "libs/toast";
-import type { APIUser } from "types/api_flow_types";
+import type { APIUser, APIUserTheme } from "types/api_flow_types";
 import { PortalTarget } from "oxalis/view/layouting/portal_utils";
-import { getBuildInfo, getUsersOrganizations, switchToOrganization } from "admin/admin_rest_api";
-import { logoutUserAction } from "oxalis/model/actions/user_actions";
+import {
+  getBuildInfo,
+  getUsersOrganizations,
+  switchToOrganization,
+  updateSelectedThemeOfUser,
+} from "admin/admin_rest_api";
+import { logoutUserAction, setActiveUserAction } from "oxalis/model/actions/user_actions";
 import { trackVersion } from "oxalis/model/helpers/analytics";
 import { useFetch } from "libs/react_helpers";
 import LoginForm from "admin/auth/login_form";
@@ -267,7 +273,7 @@ function DashboardSubMenu({ collapse, ...other }) {
 }
 
 function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
-  const { firstName, lastName, organization: organizationName } = activeUser;
+  const { firstName, lastName, organization: organizationName, selectedTheme } = activeUser;
   const usersOrganizations = useFetch(getUsersOrganizations, [], []);
 
   const activeOrganization = usersOrganizations.find(org => org.name === organizationName);
@@ -282,6 +288,27 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
     await switchToOrganization(org.name);
   };
 
+  const setSelectedTheme = async (theme: APIUserTheme) => {
+    let newTheme = theme;
+    if (newTheme === "auto") {
+      newTheme =
+        window.matchMedia("(prefers-color-scheme: dark)").media !== "not all" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+    }
+    const styleEl = ((document.getElementById("primary-stylesheet"): any): HTMLLinkElement);
+    const oldThemeMatch = styleEl.href.match(/[a-z]+\.css/);
+    const oldTheme = oldThemeMatch != null ? oldThemeMatch[0] : null;
+    if (oldTheme !== newTheme) {
+      styleEl.href = styleEl.href.replace(/[a-z]+\.css/, `${newTheme}.css`);
+    }
+    if (selectedTheme !== theme) {
+      const newUser = await updateSelectedThemeOfUser(activeUser.id, theme);
+      Store.dispatch(setActiveUserAction(newUser));
+    }
+  };
+
   const isMultiMember = switchableOrganizations.length > 0;
 
   return (
@@ -315,19 +342,20 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
         <Menu.Item key="token">
           <Link to="/auth/token">Auth Token</Link>
         </Menu.Item>
-        <Menu.Item
-          key="theme"
-          onClick={() => {
-            const styleEl = ((document.getElementById("primary-stylesheet"): any): HTMLLinkElement);
-            if (styleEl.href.includes("light.css")) {
-              styleEl.href = styleEl.href.replace("light.css", "dark.css");
-            } else {
-              styleEl.href = styleEl.href.replace("dark.css", "light.css");
-            }
-          }}
-        >
-          Toggle Theme
-        </Menu.Item>
+        <Menu.SubMenu title="Theme" key="theme">
+          {[["auto", "System-default"], ["light", "Light"], ["dark", "Dark"]].map(
+            ([key, label]) => (
+              <Menu.Item
+                key={key}
+                onClick={() => {
+                  setSelectedTheme(key);
+                }}
+              >
+                {selectedTheme === key && <CheckOutlined />} {label}
+              </Menu.Item>
+            ),
+          )}
+        </Menu.SubMenu>
         <Menu.Item key="logout">
           <a href="/" onClick={handleLogout}>
             Logout
diff --git a/frontend/javascripts/types/api_flow_types.js b/frontend/javascripts/types/api_flow_types.js
index 4bc01c03841..272113fd76c 100644
--- a/frontend/javascripts/types/api_flow_types.js
+++ b/frontend/javascripts/types/api_flow_types.js
@@ -204,6 +204,8 @@ export type NovelUserExperienceInfoType = {|
   hasSeenDashboardWelcomeBanner?: boolean,
 |};
 
+export type APIUserTheme = "auto" | "light" | "dark";
+
 export type APIUser = APIUserBase & {
   +created: number,
   +experiences: ExperienceMap,
@@ -215,6 +217,7 @@ export type APIUser = APIUserBase & {
   +lastTaskTypeId: ?string,
   +organization: string,
   +novelUserExperienceInfos: NovelUserExperienceInfoType,
+  +selectedTheme: APIUserTheme,
 };
 
 export type APITimeInterval = {

From 7975f09d7334ba384043ae220758a90d718869fc Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 26 Apr 2021 18:34:36 +0200
Subject: [PATCH 25/45] changelog

---
 CHANGELOG.unreleased.md  | 1 +
 MIGRATIONS.unreleased.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index d7f5699ca4d..8f17b0d885e 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added a screenshot of the 3D view when using the screenshot functionality in the tracing view. [#5324](https://github.com/scalableminds/webknossos/pull/5324)
 - Tiff export jobs of volume annotations now show the link back to the annotation in the jobs list. [#5378](https://github.com/scalableminds/webknossos/pull/5378)
 - Added support for flight- and oblique-mode when having non-uint8 dataset layers. [#5396](https://github.com/scalableminds/webknossos/pull/5396)
+- Added a dark theme for webKnossos. [#5407](https://github.com/scalableminds/webknossos/pull/5407)
 
 ### Changed
 - webKnossos is now part of the [image.sc support community](https://forum.image.sc/tag/webknossos). [#5332](https://github.com/scalableminds/webknossos/pull/5332)
diff --git a/MIGRATIONS.unreleased.md b/MIGRATIONS.unreleased.md
index 165fdb878a9..dc347b38b97 100644
--- a/MIGRATIONS.unreleased.md
+++ b/MIGRATIONS.unreleased.md
@@ -11,3 +11,4 @@ User-facing changes are documented in the [changelog](CHANGELOG.released.md).
 ### Postgres Evolutions:
 - [068-pricing-plan.sql](conf/evolutions/068-pricing-plan.sql)
 - [069-tasktype-project-unique-per-orga.sql](conf/evolutions/069-tasktype-project-unique-per-orga.sql)
+- [070-dark-theme.sql](conf/evolutions/070-dark-theme.sql)

From 8c84691f6992ef47cded486178e11e4d7bc0e0e5 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Mon, 26 Apr 2021 18:53:11 +0200
Subject: [PATCH 26/45] tweaks

---
 frontend/javascripts/admin/onboarding.js         | 16 ++++++++++++----
 .../oxalis/view/action-bar/save_button.js        |  2 +-
 frontend/stylesheets/_utils.less                 |  1 +
 frontend/stylesheets/main.less                   |  4 ----
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/javascripts/admin/onboarding.js b/frontend/javascripts/admin/onboarding.js
index 4b4738bf891..e398ac2b083 100644
--- a/frontend/javascripts/admin/onboarding.js
+++ b/frontend/javascripts/admin/onboarding.js
@@ -115,7 +115,7 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-around",
-          boxShadow: "0px 0px 4px rgba(0, 0, 0, 0.25)",
+          boxShadow: "var(--ant-box-shadow-base)",
           borderRadius: 3,
           border: 0,
         }}
@@ -124,7 +124,7 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
           className="without-icon-margin"
           style={{
             fontSize: 32,
-            background: "#1790ff",
+            background: "var(--ant-primary)",
             borderRadius: "30px",
             padding: "6px 14px",
             color: "white",
@@ -137,7 +137,6 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
           {icon}
         </div>
         <h1
-          className="onboarding-option-card-header"
           style={{
             fontSize: 20,
             lineHeight: "22px",
@@ -146,7 +145,16 @@ export function OptionCard({ icon, header, children, action, height }: OptionCar
         >
           {header}
         </h1>
-        <p style={{ fontSize: 14, lineHeight: "18px", color: "#6b7280", margin: 0 }}>{children}</p>
+        <p
+          style={{
+            fontSize: 14,
+            lineHeight: "18px",
+            color: "var(--ant-text-secondary)",
+            margin: 0,
+          }}
+        >
+          {children}
+        </p>
         <p>{action}</p>
       </Card>
     </div>
diff --git a/frontend/javascripts/oxalis/view/action-bar/save_button.js b/frontend/javascripts/oxalis/view/action-bar/save_button.js
index d2f51b7e67e..f309491ac15 100644
--- a/frontend/javascripts/oxalis/view/action-bar/save_button.js
+++ b/frontend/javascripts/oxalis/view/action-bar/save_button.js
@@ -105,7 +105,7 @@ class SaveButton extends React.PureComponent<Props, State> {
         onClick={this.props.onClick}
         icon={this.getSaveButtonIcon()}
         className={this.props.className}
-        style={{ background: showUnsavedWarning ? "#e33f36" : null }}
+        style={{ background: showUnsavedWarning ? "var(--ant-error)" : null }}
       >
         {this.shouldShowProgress() ? (
           <span style={{ marginLeft: 8 }}>{Math.floor((progressFraction || 0) * 100)} %</span>
diff --git a/frontend/stylesheets/_utils.less b/frontend/stylesheets/_utils.less
index 062597edcc7..9990598efe7 100644
--- a/frontend/stylesheets/_utils.less
+++ b/frontend/stylesheets/_utils.less
@@ -43,6 +43,7 @@ td.nowrap * {
   --ant-body-background: @body-background;
   --ant-component-background: @component-background;
   --ant-disabled: @disabled-color;
+  --ant-box-shadow-base: @box-shadow-base;
 }
 
 // Layout util classes
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index b3d70815e46..51670bc8214 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -108,10 +108,6 @@ body {
   display: flex;
   flex-direction: column;
   padding-bottom: 50px;
-
-  .onboarding-option-card-header {
-    color: @geekblue-8;
-  }
 }
 
 .centered-content {

From dfac310548f253afba2a96d841d54895181b9b4b Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Wed, 28 Apr 2021 12:43:32 +0200
Subject: [PATCH 27/45] beta flag

---
 frontend/javascripts/navbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 3a5cadeb51e..3b8536575bc 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -343,7 +343,7 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
           <Link to="/auth/token">Auth Token</Link>
         </Menu.Item>
         <Menu.SubMenu title="Theme" key="theme">
-          {[["auto", "System-default"], ["light", "Light"], ["dark", "Dark"]].map(
+          {[["auto", "System-default"], ["light", "Light"], ["dark", "Dark (beta)"]].map(
             ([key, label]) => (
               <Menu.Item
                 key={key}

From 4cbdf9d99ffd71befe5c9ba8ab3e00f9cdfaaf11 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 15:35:08 +0200
Subject: [PATCH 28/45] improve colors for welcome-actions

---
 frontend/stylesheets/_dashboard.less | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/stylesheets/_dashboard.less b/frontend/stylesheets/_dashboard.less
index d15d4c9da06..6c964a1cd91 100644
--- a/frontend/stylesheets/_dashboard.less
+++ b/frontend/stylesheets/_dashboard.less
@@ -106,7 +106,7 @@
         p {
           font-size: 14px;
           line-height: 18px;
-          color: @text-color;
+          color: @text-color-secondary;
           margin: 0;
         }
 
@@ -122,20 +122,20 @@
       }
 
       a:hover {
-        background: @blue-7;
+        background: @blue-6;
 
         .chevron,
         .action-icon {
-          color: @blue-1;
+          color: @text-color-dark;
         }
 
-        // h1 {
-        //   color: @blue-1;
-        // }
+        h2 {
+          color: @text-color-dark;
+        }
 
-        // p {
-        //   color: @blue-2;
-        // }
+        p {
+          color: @text-color-secondary-dark;
+        }
       }
     }
   }

From 5a63a33ae5b6567b80efb7c9a559748af91df095 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 16:12:59 +0200
Subject: [PATCH 29/45] improve colors in dataset table; alert box and setting
 sliders

---
 .../dashboard/advanced_dataset/dataset_table.js  |  1 +
 frontend/stylesheets/_dashboard.less             |  4 ++++
 frontend/stylesheets/antd_overwrites.less        |  8 ++++----
 frontend/stylesheets/dark.less                   | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
index 4c631b41a9f..406c3d3ede4 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.js
@@ -179,6 +179,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
               <Link
                 to={`/datasets/${dataset.owningOrganization}/${dataset.name}/view`}
                 title="View Dataset"
+                className="incognito-link"
               >
                 {dataset.name}
               </Link>
diff --git a/frontend/stylesheets/_dashboard.less b/frontend/stylesheets/_dashboard.less
index 6c964a1cd91..9ceb364b0d4 100644
--- a/frontend/stylesheets/_dashboard.less
+++ b/frontend/stylesheets/_dashboard.less
@@ -151,3 +151,7 @@ pre.dataset-import-folder-structure-hint {
   box-shadow: inset 0em 0em 4px 0px #9e9e9e6b;
   padding: 4px;
 }
+
+.incognito-link {
+  color: @text-color;
+}
diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
index 1f2ef212ad6..f02a5ac4d6e 100644
--- a/frontend/stylesheets/antd_overwrites.less
+++ b/frontend/stylesheets/antd_overwrites.less
@@ -61,10 +61,10 @@ p {
     background-color: #f2dede;
     border-color: #ebccd1;
     color: #a94442;
-    .ant-notification-notice-message {
-      color: #a94442;
-    }
-    .ant-notification-notice-close {
+    .ant-notification-notice-message,
+    .ant-collapse-header,
+    .ant-notification-notice-close,
+    .ant-collapse-content-box {
       color: #a94442;
     }
     .ant-notification-notice-icon {
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index 5fa4b0d595b..a45c74cdae3 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -34,3 +34,19 @@
   padding: 0px 5px;
   color: @text-color;
 }
+
+a:hover {
+  color: @blue-8;
+}
+
+.ant-slider-track,
+.ant-slider-handle {
+  background-color: @blue-4;
+}
+
+.ant-slider:hover {
+  .ant-slider-track,
+  .ant-slider-handle {
+    background-color: @blue-5;
+  }
+}

From eeddb7d2a102b421ff2d2ef1586b71dc4776dcaf Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 16:19:56 +0200
Subject: [PATCH 30/45] fix group-icon in root node of tree tab

---
 .../oxalis/view/right-menu/tree_hierarchy_view.js           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/right-menu/tree_hierarchy_view.js b/frontend/javascripts/oxalis/view/right-menu/tree_hierarchy_view.js
index b748e8c7376..f6caa716c18 100644
--- a/frontend/javascripts/oxalis/view/right-menu/tree_hierarchy_view.js
+++ b/frontend/javascripts/oxalis/view/right-menu/tree_hierarchy_view.js
@@ -375,9 +375,13 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
     // This method can be used to add props to each node of the SortableTree component
     const { node } = params;
     const nodeProps = {};
+    const isRoot = node.id === MISSING_GROUP_ID;
     if (node.type === TYPE_GROUP) {
       nodeProps.title = this.renderGroupActionsDropdown(node);
-      nodeProps.className = "group-type";
+      if (!isRoot) {
+        // Only render the group icon if it's not the root.
+        nodeProps.className = "group-type";
+      }
     } else {
       const tree = this.props.trees[parseInt(node.id, 10)];
       const rgbColorString = tree.color.map(c => Math.round(c * 255)).join(",");

From 9e50b216fd8ddd05ae94fb0bed5dc933a2abf556 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 16:50:47 +0200
Subject: [PATCH 31/45] improve loading screen colors

---
 frontend/stylesheets/dark.less | 4 ++++
 frontend/stylesheets/main.less | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index a45c74cdae3..33fc971c77a 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -13,6 +13,10 @@
   filter: invert(1);
 }
 
+.brain-loading-content img {
+  filter: invert(1) contrast(0.7);
+}
+
 .lm_tab:hover .lm_title,
 .lm_tab.lm_active .lm_title {
   background: transparent !important;
diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index 51670bc8214..27656e30726 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -231,7 +231,7 @@ i.without-icon-margin,
   width: 100%;
   position: relative;
   overflow: hidden;
-  background-color: @slider-track-background-color;
+  background-color: @border-color-base;
 }
 .brain-loading-bar:before {
   display: block;
@@ -240,7 +240,7 @@ i.without-icon-margin,
   left: -200px;
   width: 200px;
   height: 2px;
-  background-color: @slider-rail-background-color; // gray
+  background-color: @text-color-secondary;
   animation: loading 1.5s ease infinite;
 }
 

From 0d80b2aca4c28b8c7533bf6c72ff515b98be55f8 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 17:14:14 +0200
Subject: [PATCH 32/45] use correct sidebar-icon in tab title if dark mode is
 enabled

---
 .../oxalis/view/components/border_toggle_button.js       | 9 ++++++++-
 frontend/stylesheets/dark.less                           | 4 ++++
 frontend/stylesheets/light.less                          | 4 ++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/components/border_toggle_button.js b/frontend/javascripts/oxalis/view/components/border_toggle_button.js
index 36495184a1d..b9df4c280fe 100644
--- a/frontend/javascripts/oxalis/view/components/border_toggle_button.js
+++ b/frontend/javascripts/oxalis/view/components/border_toggle_button.js
@@ -3,6 +3,7 @@ import * as React from "react";
 import { Button, Tooltip } from "antd";
 import { connect } from "react-redux";
 import type { OxalisState, BorderOpenStatus } from "oxalis/store";
+import { document } from "libs/window";
 
 type OwnProps = {|
   onClick: () => void,
@@ -14,7 +15,13 @@ type StateProps = {|
 |};
 type Props = {| ...OwnProps, ...StateProps |};
 
+function useIsDarkMode() {
+  const style = getComputedStyle(document.body);
+  return parseInt(style.getPropertyValue("--is-dark-mode")) === 1;
+}
+
 function BorderToggleButton(props: Props) {
+  const isDarkMode = useIsDarkMode();
   const { onClick, side, borderOpenStatus, inFooter } = props;
   const placement = side === "left" ? "right" : "left";
   const iconKind = borderOpenStatus[side] ? "hide" : "show";
@@ -23,7 +30,7 @@ function BorderToggleButton(props: Props) {
     inFooter === true ? "footer-button" : "flexlayout__tab_toolbar_button"
   }`;
   const imageSrc = `/assets/images/icon-sidebar-${iconKind}-${side}-${
-    inFooter ? "dark" : "bright"
+    inFooter || isDarkMode ? "dark" : "bright"
   }.svg`;
 
   return (
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index 33fc971c77a..9910b128a18 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -1,6 +1,10 @@
 @import "../../node_modules/antd/dist/antd.dark.less";
 @import "./main.less";
 
+:root {
+  --is-dark-mode: 1;
+}
+
 .welcome-header-wrapper {
   background-image: linear-gradient(0deg, @body-background 0%, @blue-2 70%);
 }
diff --git a/frontend/stylesheets/light.less b/frontend/stylesheets/light.less
index 9877ca6e2b4..0c917a637b7 100644
--- a/frontend/stylesheets/light.less
+++ b/frontend/stylesheets/light.less
@@ -1,2 +1,6 @@
 @import "../../node_modules/antd/dist/antd.less";
 @import "./main.less";
+
+:root {
+  --is-dark-mode: 0;
+}

From aa3a87f988e6e2d32dad69c418b81376eddb70d0 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 17:17:46 +0200
Subject: [PATCH 33/45] fix space before layout-entry in actions menu

---
 .../javascripts/oxalis/view/action-bar/tracing_actions_view.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.js b/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.js
index 8f0eee67dbe..2aa8457748c 100644
--- a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.js
+++ b/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.js
@@ -147,7 +147,8 @@ export const LayoutMenu = (props: LayoutMenuProps) => {
       {...others}
       title={
         <span style={{ display: "inline-block", minWidth: 120 }}>
-          <LayoutOutlined /> Layout
+          <LayoutOutlined />
+          Layout
           <Tooltip placement="top" title={layoutMissingHelpTitle}>
             <InfoCircleOutlined
               style={{ color: "gray", marginRight: 36 }}

From 3fcb1d649e1ab6b0b290bf0b9f763eb5d9e84f91 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 17:25:37 +0200
Subject: [PATCH 34/45] improve border color in dataset-upload-view

---
 frontend/stylesheets/main.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
index 27656e30726..362f4a3685c 100644
--- a/frontend/stylesheets/main.less
+++ b/frontend/stylesheets/main.less
@@ -344,7 +344,7 @@ img.keyboard-mouse-icon:first-child {
   padding: 20px;
   border-width: 2px;
   border-radius: 2px;
-  border-color: @text-color-secondary;
+  border-color: fade(@text-color-secondary, 30%);
   border-style: dashed;
   background-color: @component-background;
   color: @text-color;

From 16a128f2746162ca5596d6359cacb9089656a62d Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Thu, 29 Apr 2021 17:49:57 +0200
Subject: [PATCH 35/45] switch bright/dark sidebar buttons via pure CSS

---
 .../view/components/border_toggle_button.js   | 15 +++------
 frontend/stylesheets/dark.less                | 13 +++++---
 frontend/stylesheets/light.less               |  4 ---
 .../stylesheets/trace_view/_tracing_view.less | 32 +++++++++++++++++++
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/components/border_toggle_button.js b/frontend/javascripts/oxalis/view/components/border_toggle_button.js
index b9df4c280fe..98f03c699d7 100644
--- a/frontend/javascripts/oxalis/view/components/border_toggle_button.js
+++ b/frontend/javascripts/oxalis/view/components/border_toggle_button.js
@@ -3,7 +3,6 @@ import * as React from "react";
 import { Button, Tooltip } from "antd";
 import { connect } from "react-redux";
 import type { OxalisState, BorderOpenStatus } from "oxalis/store";
-import { document } from "libs/window";
 
 type OwnProps = {|
   onClick: () => void,
@@ -15,13 +14,7 @@ type StateProps = {|
 |};
 type Props = {| ...OwnProps, ...StateProps |};
 
-function useIsDarkMode() {
-  const style = getComputedStyle(document.body);
-  return parseInt(style.getPropertyValue("--is-dark-mode")) === 1;
-}
-
 function BorderToggleButton(props: Props) {
-  const isDarkMode = useIsDarkMode();
   const { onClick, side, borderOpenStatus, inFooter } = props;
   const placement = side === "left" ? "right" : "left";
   const iconKind = borderOpenStatus[side] ? "hide" : "show";
@@ -29,9 +22,9 @@ function BorderToggleButton(props: Props) {
   const className = `${side}-border-button no-hover-highlighting ${
     inFooter === true ? "footer-button" : "flexlayout__tab_toolbar_button"
   }`;
-  const imageSrc = `/assets/images/icon-sidebar-${iconKind}-${side}-${
-    inFooter || isDarkMode ? "dark" : "bright"
-  }.svg`;
+  const imageClass = `center-item-using-flex icon-sidebar-toggle icon-sidebar-${iconKind}-${side}-${
+    inFooter ? "dark" : "bright"
+  }`;
 
   return (
     <Tooltip title={tooltipTitle} placement={placement}>
@@ -47,7 +40,7 @@ function BorderToggleButton(props: Props) {
         onMouseDown={evt => evt.stopPropagation()}
         onTouchStart={evt => evt.preventDefault()}
       >
-        <img className="center-item-using-flex" src={imageSrc} alt="Border Toggle Button" />
+        <div className={imageClass} />
       </Button>
     </Tooltip>
   );
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index 9910b128a18..5e34cbe2693 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -1,10 +1,6 @@
 @import "../../node_modules/antd/dist/antd.dark.less";
 @import "./main.less";
 
-:root {
-  --is-dark-mode: 1;
-}
-
 .welcome-header-wrapper {
   background-image: linear-gradient(0deg, @body-background 0%, @blue-2 70%);
 }
@@ -58,3 +54,12 @@ a:hover {
     background-color: @blue-5;
   }
 }
+
+// Change the bright versions to dark, too
+.icon-sidebar-hide-left-bright {
+  background-image: url(/assets/images/icon-sidebar-hide-left-dark.svg);
+}
+
+.icon-sidebar-hide-right-bright {
+  background-image: url(/assets/images/icon-sidebar-hide-right-dark.svg);
+}
diff --git a/frontend/stylesheets/light.less b/frontend/stylesheets/light.less
index 0c917a637b7..9877ca6e2b4 100644
--- a/frontend/stylesheets/light.less
+++ b/frontend/stylesheets/light.less
@@ -1,6 +1,2 @@
 @import "../../node_modules/antd/dist/antd.less";
 @import "./main.less";
-
-:root {
-  --is-dark-mode: 0;
-}
diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less
index 0015a7b5913..91d51c84f17 100644
--- a/frontend/stylesheets/trace_view/_tracing_view.less
+++ b/frontend/stylesheets/trace_view/_tracing_view.less
@@ -432,3 +432,35 @@
   align-items: center;
   justify-content: center;
 }
+
+// Provide different image variants as classes
+.icon-sidebar-toggle {
+  width: 17px;
+  height: 13px;
+}
+
+.icon-sidebar-show-left-bright {
+  background-image: url(/assets/images/icon-sidebar-show-left-bright.svg);
+}
+.icon-sidebar-show-left-dark {
+  background-image: url(/assets/images/icon-sidebar-show-left-dark.svg);
+}
+.icon-sidebar-show-right-bright {
+  background-image: url(/assets/images/icon-sidebar-show-right-bright.svg);
+}
+.icon-sidebar-show-right-dark {
+  background-image: url(/assets/images/icon-sidebar-show-right-dark.svg);
+}
+
+.icon-sidebar-hide-left-bright {
+  background-image: url(/assets/images/icon-sidebar-hide-left-bright.svg);
+}
+.icon-sidebar-hide-left-dark {
+  background-image: url(/assets/images/icon-sidebar-hide-left-dark.svg);
+}
+.icon-sidebar-hide-right-bright {
+  background-image: url(/assets/images/icon-sidebar-hide-right-bright.svg);
+}
+.icon-sidebar-hide-right-dark {
+  background-image: url(/assets/images/icon-sidebar-hide-right-dark.svg);
+}

From 668f1916b4d9d4109d5facf5e13bdf8bc88136af Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Fri, 30 Apr 2021 15:11:36 +0200
Subject: [PATCH 36/45] styling

---
 frontend/stylesheets/_dashboard.less |  2 +-
 frontend/stylesheets/dark.less       | 18 ------------------
 2 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/frontend/stylesheets/_dashboard.less b/frontend/stylesheets/_dashboard.less
index 9ceb364b0d4..18ca6c3276f 100644
--- a/frontend/stylesheets/_dashboard.less
+++ b/frontend/stylesheets/_dashboard.less
@@ -122,7 +122,7 @@
       }
 
       a:hover {
-        background: @blue-6;
+        background: darken(@primary-color, 10%);
 
         .chevron,
         .action-icon {
diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index 5e34cbe2693..59762c516ac 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -17,28 +17,10 @@
   filter: invert(1) contrast(0.7);
 }
 
-.lm_tab:hover .lm_title,
-.lm_tab.lm_active .lm_title {
-  background: transparent !important;
-}
-
-.lm_header {
-  background: transparent;
-}
-
 .inputcatcher.TDView {
   border-color: transparent;
 }
 
-.lm_content:hover {
-  border: 1px solid rgba(200, 200, 200, 0.6);
-}
-
-.lm_header .lm_tab .lm_title {
-  padding: 0px 5px;
-  color: @text-color;
-}
-
 a:hover {
   color: @blue-8;
 }

From d76f8ebae8b38df7f12d31d09375a6138e68bc24 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Fri, 30 Apr 2021 15:43:30 +0200
Subject: [PATCH 37/45] tracing_layout_view.js

---
 .../javascripts/oxalis/view/layouting/tracing_layout_view.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
index 01c8fc5d23d..c512985f088 100644
--- a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
+++ b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js
@@ -321,7 +321,7 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
                   {isDatasetOnScratchVolume ? (
                     <Tooltip title={messages["dataset.is_scratch"]}>
                       <Alert
-                        className="hide-on-small-screen bg-warning"
+                        className="hide-on-small-screen"
                         style={{
                           height: 30,
                           paddingTop: 4,

From 681e5022290a43f1176af6e68284db65d01b8d91 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Fri, 30 Apr 2021 15:58:44 +0200
Subject: [PATCH 38/45] styling

---
 frontend/stylesheets/dark.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less
index 59762c516ac..b9d95d3657b 100644
--- a/frontend/stylesheets/dark.less
+++ b/frontend/stylesheets/dark.less
@@ -17,7 +17,8 @@
   filter: invert(1) contrast(0.7);
 }
 
-.inputcatcher.TDView {
+.inputcatcher.TDView,
+.inputcatcher.arbitraryViewport {
   border-color: transparent;
 }
 

From c2d28e3febe6f86d846964d5a088ca226310a846 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Fri, 30 Apr 2021 17:46:30 +0200
Subject: [PATCH 39/45] store current theme in Store

---
 frontend/javascripts/navbar.js                    |  2 ++
 .../javascripts/oxalis/controller/renderer.js     |  1 -
 .../oxalis/controller/scene_controller.js         |  1 -
 frontend/javascripts/oxalis/default_state.js      |  6 ++++++
 .../oxalis/model/actions/ui_actions.js            | 15 +++++++++++++--
 .../oxalis/model/reducers/ui_reducer.js           |  4 ++++
 frontend/javascripts/oxalis/store.js              |  3 +++
 .../javascripts/oxalis/view/rendering_utils.js    |  7 +++++--
 8 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 3b8536575bc..9fad5ae9653 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -31,6 +31,7 @@ import Request from "libs/request";
 import Store, { type OxalisState } from "oxalis/store";
 import * as Utils from "libs/utils";
 import features from "features";
+import { setThemeAction } from "./oxalis/model/actions/ui_actions";
 
 const { SubMenu } = Menu;
 const { Header } = Layout;
@@ -302,6 +303,7 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
     const oldTheme = oldThemeMatch != null ? oldThemeMatch[0] : null;
     if (oldTheme !== newTheme) {
       styleEl.href = styleEl.href.replace(/[a-z]+\.css/, `${newTheme}.css`);
+      Store.dispatch(setThemeAction(newTheme));
     }
     if (selectedTheme !== theme) {
       const newUser = await updateSelectedThemeOfUser(activeUser.id, theme);
diff --git a/frontend/javascripts/oxalis/controller/renderer.js b/frontend/javascripts/oxalis/controller/renderer.js
index c681de0ee81..6f91c096b9a 100644
--- a/frontend/javascripts/oxalis/controller/renderer.js
+++ b/frontend/javascripts/oxalis/controller/renderer.js
@@ -15,7 +15,6 @@ function getRenderer() {
           // This prevents flickering when rendering to a buffer instead of the canvas
           preserveDrawingBuffer: true,
           antialias: true,
-          alpha: true,
         })
       : {};
 
diff --git a/frontend/javascripts/oxalis/controller/scene_controller.js b/frontend/javascripts/oxalis/controller/scene_controller.js
index dbf240de4d1..b543836b9b2 100644
--- a/frontend/javascripts/oxalis/controller/scene_controller.js
+++ b/frontend/javascripts/oxalis/controller/scene_controller.js
@@ -88,7 +88,6 @@ class SceneController {
     this.createMeshes();
     this.bindToEvents();
     this.scene = new THREE.Scene();
-    this.scene.background = null;
 
     // Because the voxel coordinates do not have a cube shape but are distorted,
     // we need to distort the entire scene to provide an illustration that is
diff --git a/frontend/javascripts/oxalis/default_state.js b/frontend/javascripts/oxalis/default_state.js
index af4c95f891a..d5963825636 100644
--- a/frontend/javascripts/oxalis/default_state.js
+++ b/frontend/javascripts/oxalis/default_state.js
@@ -2,6 +2,7 @@
 
 import type { OxalisState } from "oxalis/store";
 import Constants, { ControlModeEnum, OrthoViews, OverwriteModeEnum } from "oxalis/constants";
+import { document } from "libs/window";
 
 export const defaultViewportRect = {
   top: 0,
@@ -204,6 +205,11 @@ const defaultState: OxalisState = {
     hasOrganizations: false,
     isRefreshingIsosurfaces: false,
     borderOpenStatus: { right: false, left: false },
+    theme: (document.getElementById("primary-stylesheet"): HTMLLinkElement).href.includes(
+      "dark.css",
+    )
+      ? "dark"
+      : "light",
   },
   isosurfaces: {},
 };
diff --git a/frontend/javascripts/oxalis/model/actions/ui_actions.js b/frontend/javascripts/oxalis/model/actions/ui_actions.js
index 29d0a8ba1f3..4bb1e2be7be 100644
--- a/frontend/javascripts/oxalis/model/actions/ui_actions.js
+++ b/frontend/javascripts/oxalis/model/actions/ui_actions.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { type BorderOpenStatus } from "oxalis/store";
+import { type BorderOpenStatus, type Theme } from "oxalis/store";
 
 type SetDropzoneModalVisibilityAction = {
   type: "SET_DROPZONE_MODAL_VISIBILITY",
@@ -37,6 +37,11 @@ type SetHasOrganizationsAction = {
   value: boolean,
 };
 
+type SetThemeAction = {
+  type: "SET_THEME",
+  value: Theme,
+};
+
 export type UiAction =
   | SetDropzoneModalVisibilityAction
   | SetVersionRestoreVisibilityAction
@@ -44,7 +49,8 @@ export type UiAction =
   | SetBorderOpenStatusAction
   | SetStoredLayoutsAction
   | SetIsInAnnotationViewAction
-  | SetHasOrganizationsAction;
+  | SetHasOrganizationsAction
+  | SetThemeAction;
 
 export const setDropzoneModalVisibilityAction = (
   visible: boolean,
@@ -86,3 +92,8 @@ export const setHasOrganizationsAction = (value: boolean): SetHasOrganizationsAc
   type: "SET_HAS_ORGANIZATIONS",
   value,
 });
+
+export const setThemeAction = (value: Theme): SetThemeAction => ({
+  type: "SET_THEME",
+  value,
+});
diff --git a/frontend/javascripts/oxalis/model/reducers/ui_reducer.js b/frontend/javascripts/oxalis/model/reducers/ui_reducer.js
index 9bc0ac1ad37..d01f567feb8 100644
--- a/frontend/javascripts/oxalis/model/reducers/ui_reducer.js
+++ b/frontend/javascripts/oxalis/model/reducers/ui_reducer.js
@@ -43,6 +43,10 @@ function UiReducer(state: OxalisState, action: Action): OxalisState {
       return updateKey(state, "uiInformation", { borderOpenStatus: action.borderOpenStatus });
     }
 
+    case "SET_THEME": {
+      return updateKey(state, "uiInformation", { theme: action.value });
+    }
+
     default:
       return state;
   }
diff --git a/frontend/javascripts/oxalis/store.js b/frontend/javascripts/oxalis/store.js
index bce33175f9c..046fd4cb9b0 100644
--- a/frontend/javascripts/oxalis/store.js
+++ b/frontend/javascripts/oxalis/store.js
@@ -448,6 +448,8 @@ export type BorderOpenStatus = {
   right: boolean,
 };
 
+export type Theme = "light" | "dark";
+
 type UiInformation = {
   +showDropzoneModal: boolean,
   +showVersionRestore: boolean,
@@ -457,6 +459,7 @@ type UiInformation = {
   +hasOrganizations: boolean,
   +isRefreshingIsosurfaces: boolean,
   +borderOpenStatus: BorderOpenStatus,
+  +theme: Theme,
 };
 
 export type IsosurfaceInformation = {|
diff --git a/frontend/javascripts/oxalis/view/rendering_utils.js b/frontend/javascripts/oxalis/view/rendering_utils.js
index e659d35d586..9b1ed80d229 100644
--- a/frontend/javascripts/oxalis/view/rendering_utils.js
+++ b/frontend/javascripts/oxalis/view/rendering_utils.js
@@ -14,6 +14,9 @@ import getSceneController from "oxalis/controller/scene_controller_provider";
 import { getFlooredPosition } from "oxalis/model/accessors/flycam_accessor";
 import { convertBufferToImage } from "libs/utils";
 
+const getBackgroundColor = (): number =>
+  Store.getState().uiInformation.theme === "dark" ? 0x000000 : 0xffffff;
+
 export const setupRenderArea = (
   renderer: typeof THREE.WebGLRenderer,
   x: number,
@@ -28,7 +31,7 @@ export const setupRenderArea = (
   renderer.setViewport(x, overallHeight - y - viewportHeight, viewportWidth, viewportHeight);
   renderer.setScissor(x, overallHeight - y - viewportHeight, viewportWidth, viewportHeight);
   renderer.setScissorTest(true);
-  renderer.setClearColor(color, 0);
+  renderer.setClearColor(color === 0xffffff ? getBackgroundColor() : color, 1);
 };
 
 export const clearCanvas = (renderer: typeof THREE.WebGLRenderer) => {
@@ -55,7 +58,7 @@ export function renderToTexture(
 
   renderer.setViewport(0, 0 + height, width, height);
   renderer.setScissorTest(false);
-  renderer.setClearColor(clearColor, 0);
+  renderer.setClearColor(clearColor === 0xffffff ? getBackgroundColor() : clearColor, 1);
 
   const renderTarget = new THREE.WebGLRenderTarget(width, height);
   const buffer = new Uint8Array(width * height * 4);

From cc803578f735ebbb4c27fade962b6ed07123d300 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Fri, 30 Apr 2021 17:50:07 +0200
Subject: [PATCH 40/45] lint

---
 frontend/javascripts/navbar.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index 9fad5ae9653..c0e8f2f423e 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -30,8 +30,9 @@ import LoginForm from "admin/auth/login_form";
 import Request from "libs/request";
 import Store, { type OxalisState } from "oxalis/store";
 import * as Utils from "libs/utils";
+import { document } from "libs/window";
 import features from "features";
-import { setThemeAction } from "./oxalis/model/actions/ui_actions";
+import { setThemeAction } from "oxalis/model/actions/ui_actions";
 
 const { SubMenu } = Menu;
 const { Header } = Layout;
@@ -298,7 +299,7 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
           ? "dark"
           : "light";
     }
-    const styleEl = ((document.getElementById("primary-stylesheet"): any): HTMLLinkElement);
+    const styleEl = (document.getElementById("primary-stylesheet"): HTMLLinkElement);
     const oldThemeMatch = styleEl.href.match(/[a-z]+\.css/);
     const oldTheme = oldThemeMatch != null ? oldThemeMatch[0] : null;
     if (oldTheme !== newTheme) {

From 612b6c18963d6667f73a12de22c2b3264528f94e Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 2 May 2021 19:15:55 +0200
Subject: [PATCH 41/45] fix tests

---
 frontend/javascripts/libs/window.js                         | 6 +++++-
 frontend/javascripts/oxalis/default_state.js                | 2 +-
 frontend/javascripts/test/helpers/apiHelpers.js             | 1 +
 .../javascripts/test/model/texture_bucket_manager.spec.js   | 2 +-
 .../test/reducers/skeletontracing_reducer.spec.js           | 2 +-
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/javascripts/libs/window.js b/frontend/javascripts/libs/window.js
index 38bb7401514..7c280d876ab 100644
--- a/frontend/javascripts/libs/window.js
+++ b/frontend/javascripts/libs/window.js
@@ -2,7 +2,10 @@
 // This module should be used to access the window object, so it can be mocked in the unit tests
 // mockRequire("libs/window", myFakeWindow);
 export const alert = typeof window === "undefined" ? console.log.bind(console) : window.alert;
-export const document = typeof window === "undefined" || !window.document ? {} : window.document;
+export const document =
+  typeof window === "undefined" || !window.document
+    ? { getElementById: () => null }
+    : window.document;
 
 // See https://github.com/facebook/flow/blob/master/lib/bom.js#L294-L311
 const dummyLocation = {
@@ -30,6 +33,7 @@ const _window =
         app: null,
         location: dummyLocation,
         requestAnimationFrame: resolve => resolve(),
+        document,
       }
     : window;
 
diff --git a/frontend/javascripts/oxalis/default_state.js b/frontend/javascripts/oxalis/default_state.js
index d5963825636..4fd565ecdf9 100644
--- a/frontend/javascripts/oxalis/default_state.js
+++ b/frontend/javascripts/oxalis/default_state.js
@@ -205,7 +205,7 @@ const defaultState: OxalisState = {
     hasOrganizations: false,
     isRefreshingIsosurfaces: false,
     borderOpenStatus: { right: false, left: false },
-    theme: (document.getElementById("primary-stylesheet"): HTMLLinkElement).href.includes(
+    theme: (document.getElementById("primary-stylesheet"): ?HTMLLinkElement)?.href.includes(
       "dark.css",
     )
       ? "dark"
diff --git a/frontend/javascripts/test/helpers/apiHelpers.js b/frontend/javascripts/test/helpers/apiHelpers.js
index 97bb237c54e..c79fe124bc3 100644
--- a/frontend/javascripts/test/helpers/apiHelpers.js
+++ b/frontend/javascripts/test/helpers/apiHelpers.js
@@ -67,6 +67,7 @@ mockRequire(
     open: sinon.spy(),
     document: {
       createElement: () => ({}),
+      getElementById: () => null,
     },
   }),
 );
diff --git a/frontend/javascripts/test/model/texture_bucket_manager.spec.js b/frontend/javascripts/test/model/texture_bucket_manager.spec.js
index 0da94ccf0c6..c54b9c9e3b6 100644
--- a/frontend/javascripts/test/model/texture_bucket_manager.spec.js
+++ b/frontend/javascripts/test/model/texture_bucket_manager.spec.js
@@ -14,7 +14,7 @@ const formatToChannelCount = new Map([
 global.performance = {
   now: () => Date.now(),
 };
-mock("libs/window", { requestAnimationFrame: () => {} });
+mock("libs/window", { requestAnimationFrame: () => {}, document: { getElementById: () => null } });
 mock(
   "libs/UpdatableTexture",
   class UpdatableTexture {
diff --git a/frontend/javascripts/test/reducers/skeletontracing_reducer.spec.js b/frontend/javascripts/test/reducers/skeletontracing_reducer.spec.js
index 2929cf63191..9c444c39949 100644
--- a/frontend/javascripts/test/reducers/skeletontracing_reducer.spec.js
+++ b/frontend/javascripts/test/reducers/skeletontracing_reducer.spec.js
@@ -17,7 +17,7 @@ import test from "ava";
 
 mock.stopAll();
 mock("app", { currentUser: { firstName: "SCM", lastName: "Boy" } });
-mock("libs/window", { confirm: () => true });
+mock("libs/window", { confirm: () => true, document: { getElementById: () => null } });
 const SkeletonTracingReducer = mock.reRequire("oxalis/model/reducers/skeletontracing_reducer")
   .default;
 const SkeletonTracingActions = mock.reRequire("oxalis/model/actions/skeletontracing_actions");

From eca97724f322d7e6114efea7fc549084d15e445a Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 2 May 2021 19:26:27 +0200
Subject: [PATCH 42/45] no ?.

---
 frontend/javascripts/oxalis/default_state.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/javascripts/oxalis/default_state.js b/frontend/javascripts/oxalis/default_state.js
index 4fd565ecdf9..aee4a01568b 100644
--- a/frontend/javascripts/oxalis/default_state.js
+++ b/frontend/javascripts/oxalis/default_state.js
@@ -37,6 +37,8 @@ const initialAnnotationInfo = {
   meshes: [],
 };
 
+const primaryStylesheetElement: ?HTMLLinkElement = document.getElementById("primary-stylesheet");
+
 const defaultState: OxalisState = {
   datasetConfiguration: {
     fourBit: false,
@@ -205,11 +207,10 @@ const defaultState: OxalisState = {
     hasOrganizations: false,
     isRefreshingIsosurfaces: false,
     borderOpenStatus: { right: false, left: false },
-    theme: (document.getElementById("primary-stylesheet"): ?HTMLLinkElement)?.href.includes(
-      "dark.css",
-    )
-      ? "dark"
-      : "light",
+    theme:
+      primaryStylesheetElement != null && primaryStylesheetElement.href.includes("dark.css")
+        ? "dark"
+        : "light",
   },
   isosurfaces: {},
 };

From b718da3e6c11a6dcd6d75517b97cbce5d42f5d18 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 2 May 2021 19:49:53 +0200
Subject: [PATCH 43/45] fix tests

---
 frontend/javascripts/oxalis/controller/renderer.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/javascripts/oxalis/controller/renderer.js b/frontend/javascripts/oxalis/controller/renderer.js
index 6f91c096b9a..662c3a71891 100644
--- a/frontend/javascripts/oxalis/controller/renderer.js
+++ b/frontend/javascripts/oxalis/controller/renderer.js
@@ -8,10 +8,11 @@ function getRenderer() {
   if (renderer != null) {
     return renderer;
   }
+  const renderCanvasElement = document.getElementById("render-canvas");
   renderer =
-    typeof document !== "undefined" && document.getElementById
+    renderCanvasElement != null
       ? new THREE.WebGLRenderer({
-          canvas: document.getElementById("render-canvas"),
+          canvas: renderCanvasElement,
           // This prevents flickering when rendering to a buffer instead of the canvas
           preserveDrawingBuffer: true,
           antialias: true,

From f41bf1515eb9aa1b4c4c1bb5b6e6eeb1cec148ce Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 2 May 2021 21:43:50 +0200
Subject: [PATCH 44/45] re-add titillium css, oops

---
 app/views/main.scala.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
index 3912893c159..9a887928774 100755
--- a/app/views/main.scala.html
+++ b/app/views/main.scala.html
@@ -24,6 +24,12 @@
       media="screen"
       href="/assets/bundle/vendors~dark~light.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="screen"
+      href="/assets/fonts/titillium-web.css?nocache=@(webknossos.BuildInfo.commitHash)"
+    />
     <script>
       let initialTheme = "@(selectedTheme)";
       if (initialTheme === "auto") {

From 72fcba47e2e7e734023ff34aacacf8719c073fc6 Mon Sep 17 00:00:00 2001
From: Norman Rzepka <code@normanrz.com>
Date: Sun, 2 May 2021 21:57:41 +0200
Subject: [PATCH 45/45] fix style flickering when switching themes

---
 frontend/javascripts/navbar.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
index c0e8f2f423e..e0c2efa9287 100644
--- a/frontend/javascripts/navbar.js
+++ b/frontend/javascripts/navbar.js
@@ -303,8 +303,21 @@ function LoggedInAvatar({ activeUser, handleLogout, ...other }) {
     const oldThemeMatch = styleEl.href.match(/[a-z]+\.css/);
     const oldTheme = oldThemeMatch != null ? oldThemeMatch[0] : null;
     if (oldTheme !== newTheme) {
-      styleEl.href = styleEl.href.replace(/[a-z]+\.css/, `${newTheme}.css`);
-      Store.dispatch(setThemeAction(newTheme));
+      const newStyleEl = styleEl.cloneNode();
+      const parentEl = styleEl.parentNode;
+      if (parentEl != null) {
+        newStyleEl.href = newStyleEl.href.replace(/[a-z]+\.css/, `${newTheme}.css`);
+        newStyleEl.addEventListener(
+          "load",
+          () => {
+            parentEl.removeChild(styleEl);
+          },
+          { once: true },
+        );
+        parentEl.insertBefore(newStyleEl, styleEl);
+
+        Store.dispatch(setThemeAction(newTheme));
+      }
     }
     if (selectedTheme !== theme) {
       const newUser = await updateSelectedThemeOfUser(activeUser.id, theme);