feat(frontend): add dark mode

ravenclaw900 · Sep 25, 2021 · 03c3343 · 03c3343
1 parent 60e75dd
commit 03c3343
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 26 deletions.
diff --git a/src/backend/src/terminal.rs b/src/backend/src/terminal.rs
@@ -77,4 +77,6 @@ pub async fn term_handler(socket: warp::ws::WebSocket) {
 
     // Process should be safe to kill after exiting
     cmd.write().await.deref_mut().kill().unwrap();
+
+    log::info!("Closed terminal");
 }
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -108,7 +108,7 @@
                     /></a
                 >
             </header>
-            <div class="bg-gray-100 flex-grow p-6">
+            <div class="dark:bg-gray-800 bg-gray-100 flex-grow p-6">
                 {#if shown}
                     <Route path="process"
                         ><Process {socketData} {socket} /></Route
@@ -122,15 +122,15 @@
                         ><Management {socket} {socketData} /></Route
                     >
                 {:else}
-                    <h3>Connecting to API...</h3>
+                    <h3 class="dark:text-white">Connecting to API...</h3>
                 {/if}
             </div>
             <footer
-                class="border-t bg-gray-200 border-gray-300 h-16 flex flex-col justify-center items-center"
+                class="border-t bg-gray-200 dark:bg-gray-700 dark:border-gray-500 border-gray-300 h-16 flex flex-col justify-center items-center"
             >
                 <div>
                     DietPi-Dashboard <a
-                        class="text-blue-500"
+                        class="text-blue-500 dark:text-blue-600"
                         href="https://github.com/ravenclaw900/DietPi-Dashboard/releases/tag/v{'ROLLUP.package_version'}"
                         target="_blank">v{"ROLLUP.package_version"}</a
                     > created by ravenclaw900
@@ -140,7 +140,7 @@
                     target="_blank"
                     ><Fa
                         icon={faGithub}
-                        class="hover:opacity-75"
+                        class="hover:opacity-75 dark:hover:opacity-60"
                         size="2x"
                     /></a
                 >

diff --git a/src/frontend/src/components/Card.svelte b/src/frontend/src/components/Card.svelte
@@ -3,9 +3,11 @@
 </script>
 
 <div
-    class="bg-white p-2 rounded-lg border-t-4 border-gray-300 flex-1 font-sans shadow-md min-w-0"
+    class="bg-white dark:bg-black p-2 dark:text-white rounded-lg border-t-4 border-gray-300 dark:border-gray-700 flex-1 font-sans shadow-md min-w-0"
 >
-    <h2 class="border-b-2 border-gray-200 h-auto pb-2 mb-2">
+    <h2
+        class="border-b-2 border-gray-200 dark:border-gray-800 h-auto pb-2 mb-2"
+    >
         {header}
     </h2>
     <slot />

diff --git a/src/frontend/src/pages/Home.svelte b/src/frontend/src/pages/Home.svelte
@@ -114,6 +114,14 @@
                             return value + "%";
                         },
                     },
+                    grid: {
+                        color:
+                            window.matchMedia &&
+                            window.matchMedia("(prefers-color-scheme: dark)")
+                                .matches
+                                ? "#4B5563"
+                                : "#D1D5DB",
+                    },
                 },
                 usageScale: {
                     position: "left",
@@ -123,6 +131,24 @@
                             return value + "MiB";
                         },
                     },
+                    grid: {
+                        color:
+                            window.matchMedia &&
+                            window.matchMedia("(prefers-color-scheme: dark)")
+                                .matches
+                                ? "#4B5563"
+                                : "#D1D5DB",
+                    },
+                },
+                x: {
+                    grid: {
+                        color:
+                            window.matchMedia &&
+                            window.matchMedia("(prefers-color-scheme: dark)")
+                                .matches
+                                ? "#4B5563"
+                                : "#D1D5DB",
+                    },
                 },
             },
             responsive: true,
@@ -174,30 +200,30 @@
     {#if ramData != undefined}
         <Card header="System Stats">
             CPU:<span class="float-right">{socketData.cpu}/100%</span>
-            <div class="bg-gray-200 w-full h-3 my-1">
+            <div class="bg-gray-200 dark:bg-gray-800 w-full h-3 my-1">
                 <div class="bg-green-500 h-3" style="width:{$cpuAnimate}%" />
             </div>
             RAM:<span class="float-right"
                 >{ramData[0]}/{ramData[1]}{ramData[2]}</span
             >
-            <div class="bg-gray-200 w-full h-3 my-1">
+            <div class="bg-gray-200 dark:bg-gray-800 w-full h-3 my-1">
                 <div class="bg-red-500 h-3" style="width:{$ramAnimate}%" />
             </div>
             Swap:<span class="float-right"
                 >{swapData[0]}/{swapData[1]}{swapData[2]}</span
             >
-            <div class="bg-gray-200 w-full h-3 my-1">
+            <div class="bg-gray-200 dark:bg-gray-800 w-full h-3 my-1">
                 <div class="bg-blue-500 h-3" style="width:{$swapAnimate}%" />
             </div>
             Disk:<span class="float-right"
                 >{diskData[0]}/{diskData[1]}{diskData[2]}</span
             >
-            <div class="bg-gray-200 w-full h-3 my-1">
+            <div class="bg-gray-200 dark:bg-gray-800 w-full h-3 my-1">
                 <div class="bg-yellow-500 h-3" style="width:{$diskAnimate}%" />
             </div>
         </Card>
     {:else}
-        <h3>Getting data...</h3>
+        <h3 class="dark:text-white">Getting data...</h3>
     {/if}
 </main>
 

diff --git a/src/frontend/src/pages/Management.svelte b/src/frontend/src/pages/Management.svelte
@@ -25,24 +25,36 @@
 <main class="flex gap-5 flex-wrap min-h-full flex-grow flex-col">
     {#if socketData.hostname != undefined}
         <Card header="System Information">
-            <table class="border border-gray-100 h-full w-full">
-                <tr class="even:bg-white odd:bg-gray-200">
+            <table
+                class="border border-gray-100 dark:border-gray-900 h-full w-full dark:text-white"
+            >
+                <tr
+                    class="even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800"
+                >
                     <td class="p-1 font-semibold">Hostname:</td>
                     <td class="p-1">{socketData.hostname}</td>
                 </tr>
-                <tr class="even:bg-white odd:bg-gray-200">
+                <tr
+                    class="even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800"
+                >
                     <td class="p-1 font-semibold">Uptime</td>
                     <td class="p-1">{uptime.toISOString().substr(11, 8)}</td>
                 </tr>
-                <tr class="even:bg-white odd:bg-gray-200">
+                <tr
+                    class="even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800"
+                >
                     <td class="p-1 font-semibold">Kernel:</td>
                     <td class="p-1">{socketData.kernel}</td>
                 </tr>
-                <tr class="even:bg-white odd:bg-gray-200">
+                <tr
+                    class="even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800"
+                >
                     <td class="p-1 font-semibold">Architecture:</td>
                     <td class="p-1">{socketData.arch}</td>
                 </tr>
-                <tr class="even:bg-white odd:bg-gray-200">
+                <tr
+                    class="even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800"
+                >
                     <td class="p-1 font-semibold">Version:</td>
                     <td class="p-1">{socketData.version}</td>
                 </tr>
@@ -63,6 +75,6 @@
             </div>
         </Card>
     {:else}
-        <h3>Getting data...</h3>
+        <h3 class="dark:text-white">Getting data...</h3>
     {/if}
 </main>
diff --git a/src/frontend/src/pages/Process.svelte b/src/frontend/src/pages/Process.svelte
@@ -217,7 +217,7 @@
 <main>
     {#if socketData.processes != undefined}
         <table
-            class="border border-gray-300 w-full table-fixed break-words overflow-x-scroll"
+            class="border border-gray-300 dark:border-gray-700 w-full table-fixed break-words overflow-x-scroll"
         >
             <tr class="bg-dplime">
                 <th
@@ -264,7 +264,7 @@
             </tr>
             {#each socketData.processes as process}
                 <tr
-                    class="mt-32 even:bg-white odd:bg-gray-200 border-t-2 border-gray-300 border-opacity-50"
+                    class="mt-32 even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800 dark:text-white dark:border-gray-600 border-t-2 border-gray-300 border-opacity-50"
                 >
                     <td class="p-2">{process.pid}</td>
                     <td class="p-2">{process.name}</td>
@@ -325,6 +325,6 @@
             {/each}
         </table>
     {:else}
-        <h3>Getting data...</h3>
+        <h3 class="dark:text-white">Getting data...</h3>
     {/if}
 </main>
diff --git a/src/frontend/src/pages/Software.svelte b/src/frontend/src/pages/Software.svelte
@@ -78,7 +78,9 @@
 
 <main>
     {#if socketData.software != undefined}
-        <table class="border border-gray-300 w-full table-fixed break-words">
+        <table
+            class="border border-gray-300 dark:border-gray-700 w-full table-fixed break-words"
+        >
             <tr class="bg-dplime">
                 <th>ID</th>
                 <th>Installed</th>
@@ -90,7 +92,7 @@
             {#each socketData.software as software}
                 {#if software.id != -1}
                     <tr
-                        class="mt-32 even:bg-white odd:bg-gray-200 border-t-2 border-gray-300 border-opacity-50"
+                        class="mt-32 even:bg-white odd:bg-gray-200 dark:even:bg-black dark:odd:bg-gray-800 dark:text-white dark:border-gray-600 border-t-2 border-gray-300 border-opacity-50"
                     >
                         <td class="p-2">{software.id}</td>
                         <td class="p-2"
@@ -144,6 +146,6 @@
             />
         {/if}
     {:else}
-        <h3>Getting data...</h3>
+        <h3 class="dark:text-white">Getting data...</h3>
     {/if}
 </main>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   mode: "jit",
   purge: ["src/**/*.svelte"],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'media', // or 'media' or 'class'
   theme: {
     extend: {
       colors: {