light mode

package.json

@@ -32,6 +32,7 @@
     "eslint": "^8.40.0",
     "eslint-plugin-vue": "^9.11.0",
     "typescript": "^5.4.3",
-    "vite": "^5.2.7"
+    "vite": "^5.2.7",
+    "vite-plugin-vue-devtools": "^7.6.7"
   }
 }

src/ui/Root/Root.vue

@@ -82,6 +82,12 @@
                         @click="uploadDialog?.showModal()">
                         <icon icon-name="upload" color="var(--color-ui-neutral-dark)" />
                     </div>
+                  <div
+                      class="quick-access-button"
+                      title="Switch theme"
+                      @click="toggleTheme">
+                    <icon icon-name="list" color="var(--color-ui-neutral-dark)" />
+                  </div>
                 </div>
                 <toolbox class="toolbox" />
             </div> 
@@ -122,6 +128,10 @@
     const currentOrientation = ref<'horizontal' | 'vertical'>('horizontal');
     const sidebarActive = ref(false);
 
+    function toggleTheme() {
+      document.body.classList.toggle("dark");
+    }
+
     const appStateStore = useAppStateStore();
     const beatStore = useBeatStore();    
 

src/ui/TrackUnitBox/TrackUnitBox.vue

@@ -39,8 +39,8 @@
         width: 2em;
         height: 2em;
         margin-right: 4px;
-        background-color: #e0e0e0;
+        background-color: var(--color-box);
-        border-color: #e0e0e0;
+        border-color: var(--color-box);
         border-width: 0.1em 0.1em 0.1em 0.1em;
         border-style: solid;
         display: inline-block;
@@ -49,8 +49,8 @@
 
         &.highlightable {
             &:hover {
-                border-color: #f1f1f1;
+                border-color: var(--color-box-hover);
-                background-color: #f1f1f1;
+                background-color: var(--color-box-hover);
                 transition: none;
             }
 

src/ui/global.css

@@ -1,4 +1,8 @@
-:root {
+html, body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
     --color-ui-accent: #00b3ba;
     --color-ui-accent-hover: #00c1c9;
     --color-ui-accent-active: #008e93;
@@ -19,12 +23,35 @@
     --color-p-dark-active: #464646;
     --color-title-light: #282828;
     --color-title-dark: #282828;
+    --color-box-dark: #464646;
+    --color-box-dark-border: #464646;
+    --color-box-hover-dark: #5f5f5f;
+    --color-box-hover-dark-border: #5f5f5f;
+    --color-box: #e0e0e0;
+    --color-box-hover: #f1f1f1;
+
 }
 
-html, body {
+body.dark {
-    position: relative;
+    --color-ui-neutral-light: #fdfdfe;
-    width: 100%;
+    --color-ui-neutral-light-hover: #fdfdfe;
-    height: 100%;
+    --color-ui-neutral-light-active: #fdfdfe;
+    --color-ui-neutral-dark: #8b8b8b;
+    --color-ui-neutral-dark-hover: #a1a1a1;
+    --color-ui-neutral-dark-active: #c1c1c1;
+    --color-bg-light: #464646;
+    --color-bg-medium: #323232;
+    --color-bg-dark: #282828;
+    --color-p-light: #fafafa;
+    --color-p-light-hover: #fafafa;
+    --color-p-light-active: #fafafa;
+    --color-p-dark: #282828;
+    --color-p-dark-hover: #464646;
+    --color-p-dark-active: #464646;
+    --color-title-light: #fafafa;
+    --color-title-dark: #282828;
+    --color-box: #464646;
+    --color-box-hover: #5f5f5f;
 }
 
 #dropdowns {

vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools'
 import devEnv from './dev.env';
 import prodEnv from './prod.env';
 
@@ -8,6 +9,9 @@ const { DEVELOPMENT, BASE_URL } = process.env.DEV ? devEnv : prodEnv;
 
 export default defineConfig({
     plugins: [
+        vueDevTools({
+            launchEditor: 'webstorm',
+        }),
         vue(),
     ],
     resolve: {