feat(frontend): add dark mode trigger

ravenclaw900 · Nov 12, 2021 · 38bbd3a · 38bbd3a
1 parent 56aca73
commit 38bbd3a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/src/frontend/.yarn/install-state.gz b/src/frontend/.yarn/install-state.gz
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -17,6 +17,8 @@
         faBars,
         faList,
         faFolder,
+        faSun,
+        faMoon,
     } from "@fortawesome/free-solid-svg-icons";
     import Management from "./pages/Management.svelte";
     import FileBrowser from "./pages/FileBrowser.svelte";
@@ -80,6 +82,9 @@
     let shown = false;
     let menu = window.innerWidth > 768;
     let update = "";
+    let darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    let darkIcon;
+    $: darkIcon = darkMode ? faMoon : faSun;
 
     const socketMessageListener = (e) => {
         if (typeof e.data === "string") {
@@ -107,7 +112,7 @@
         }
         let proto = window.location.protocol == "https:" ? "wss" : "ws";
         socket = new WebSocket(
-            `${proto}://${window.location.hostname}:${window.location.port}/ws`
+            `${proto}://${window.location.hostname}:8088/ws`
         );
         socket.onopen = socketOpenListener;
         socket.onmessage = socketMessageListener;
@@ -124,14 +129,14 @@
     });
 </script>
 
-<main class="min-h-screen flex overflow-x-hidden dark:text-white">
+<main class="min-h-screen flex overflow-x-hidden{darkMode ? ' dark' : ''}">
     <Router {url}>
         <div
             class="bg-gray-900 dark:bg-black flex-grow{menu ? '' : ' shrink'}"
             id="sidebarMenu"
         >
             <div
-                class="hidden lg:flex whitespace-nowrap h-12 bg-dplime-dark text-black text-2xl items-center justify-center"
+                class="hidden lg:flex whitespace-nowrap h-12 bg-dplime-dark text-2xl items-center justify-center"
             >
                 DietPi Dashboard
             </div>
@@ -168,9 +173,7 @@
         </div>
         <div class="w-5/6 flex flex-col flex-grow min-h-full">
             <header class="bg-dplime h-12 grid grid-cols-3 items-center">
-                <span
-                    on:click={() => (menu = !menu)}
-                    class="justify-self-start text-black"
+                <span on:click={() => (menu = !menu)} class="justify-self-start"
                     ><Fa icon={faBars} class="btn ml-1 p-1" size="3x" /></span
                 >
                 <a
@@ -184,13 +187,20 @@
                         >DietPi update avalible: {update}</span
                     >
                 {/if}
+                <span
+                    class="cursor-pointer justify-self-end mr-2"
+                    on:click={() => (darkMode = !darkMode)}
+                    ><Fa icon={darkIcon} size="lg" /></span
+                >
             </header>
-            <div class="dark:bg-gray-900 bg-gray-100 flex-grow p-6">
+            <div
+                class="dark:bg-gray-900 bg-gray-100 flex-grow p-6 dark:text-white"
+            >
                 {#if shown}
                     <Route path="process"
                         ><Process {socketData} {socket} /></Route
                     >
-                    <Route path="/"><Home {socketData} /></Route>
+                    <Route path="/"><Home {socketData} {darkMode} /></Route>
                     <Route path="software"
                         ><Software {socketData} {socket} /></Route
                     >
@@ -210,7 +220,7 @@
                 {/if}
             </div>
             <footer
-                class="border-t bg-gray-200 dark:bg-gray-800 dark:border-gray-700 border-gray-300 h-16 flex flex-col justify-center items-center"
+                class="border-t bg-gray-200 dark:bg-gray-800 dark:border-gray-700 border-gray-300 h-16 flex flex-col justify-center items-center dark:text-white"
             >
                 <div>
                     DietPi-Dashboard <a

diff --git a/src/frontend/src/pages/Home.svelte b/src/frontend/src/pages/Home.svelte
@@ -22,6 +22,7 @@
     });
 
     export let socketData;
+    export let darkMode;
     let canvas;
 
     function unitCalc(used, total) {
@@ -118,12 +119,7 @@
                         },
                     },
                     grid: {
-                        color:
-                            window.matchMedia &&
-                            window.matchMedia("(prefers-color-scheme: dark)")
-                                .matches
-                                ? "#4B5563"
-                                : "#D1D5DB",
+                        color: darkMode ? "#4B5563" : "#D1D5DB",
                     },
                 },
                 usageScale: {
@@ -135,22 +131,12 @@
                         },
                     },
                     grid: {
-                        color:
-                            window.matchMedia &&
-                            window.matchMedia("(prefers-color-scheme: dark)")
-                                .matches
-                                ? "#4B5563"
-                                : "#D1D5DB",
+                        color: darkMode ? "#4B5563" : "#D1D5DB",
                     },
                 },
                 x: {
                     grid: {
-                        color:
-                            window.matchMedia &&
-                            window.matchMedia("(prefers-color-scheme: dark)")
-                                .matches
-                                ? "#4B5563"
-                                : "#D1D5DB",
+                        color: darkMode ? "#4B5563" : "#D1D5DB",
                     },
                 },
             },
@@ -177,6 +163,15 @@
         let chart = new Chart(canvas.getContext("2d"), config);
 
         setInterval(() => {
+            chart.options.scales.cpuScale.grid.color = darkMode
+                ? "#4B5563"
+                : "#D1D5DB";
+            chart.options.scales.usageScale.grid.color = darkMode
+                ? "#4B5563"
+                : "#D1D5DB";
+            chart.options.scales.x.grid.color = darkMode
+                ? "#4B5563"
+                : "#D1D5DB";
             let currenttime = new Date();
             chartData.labels.push(
                 `${currenttime.getHours()}:${currenttime.getMinutes()}:${currenttime.getSeconds()}`

diff --git a/src/frontend/windi.config.ts b/src/frontend/windi.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
-    darkMode: 'media',
+    darkMode: 'class',
     theme: {
         extend: {
             colors: {