dark mode support

assets/styles/dashboard.css

@@ -1,7 +1,7 @@
 body {
-  background-color: #f1f5f9;
+  background-color: var(--bg);
   margin: 0;
-  color: #0f172a;
+  color: var(--fg);
 }
 
 .sidebar-container {
@@ -34,7 +34,7 @@ body {
 .summary-card {
   box-sizing: border-box;
   height: 100px;
-  background-color: #fff;
+  background-color: var(--card-bg);
   padding: 1.5rem;
   border-radius: 10px;
   display: flex;
@@ -49,35 +49,39 @@ body {
 
 .summary-card p {
   margin: 0;
-  color: black;
+  color: var(--fg);
 }
 
 .summary-card svg {
   margin-left: auto;
 }
 
+.fg {
+  color: var(--fg);
+}
+
 .online {
-  color: #16a34a;
+  color: var(--online-ov);
 }
 
 .issues {
-  color: rgb(234, 71, 12);
+  color: var(--issue);
 }
 
 .cpu {
-  color: rgb(37, 99, 235);
+  color: var(--cpu);
 }
 
 .ram {
-  color: rgb(147, 51, 234);
+  color: var(--memory);
 }
 
 .storage {
-  color: rgb(234, 88, 12);
+  color: var(--storage);
 }
 
 .network {
-  color: rgb(22 163 74);
+  color: var(--network);
 }
 
 .overview-container {
@@ -86,7 +90,7 @@ body {
 }
 
 .performance-card {
-  background-color: #fff;
+  background-color: var(--card-bg);
   box-sizing: border-box;
   padding: 1.5rem;
   border-radius: 10px;
@@ -94,7 +98,7 @@ body {
 }
 
 .overview-card {
-  background-color: #fff;
+  background-color: var(--card-bg);
   box-sizing: border-box;
   padding: 1.5rem;
   border-radius: 10px;
@@ -127,7 +131,7 @@ body {
 .search-container {
   display: flex;
   flex-wrap: wrap;
-  background-color: #fff;
+  background-color: var(--card-bg);
   box-sizing: border-box;
   padding: 1.5rem;
   border-radius: 10px;
@@ -137,11 +141,11 @@ body {
 
 .search-input input {
   appearance: auto;
-  background-color: #fff;
+  background-color: var(--card-bg);
   border: 1px solid rgb(226, 232, 240);
   border-radius: 6px;
   box-sizing: border-box;
-  color: rgb(2, 8, 23);
+  color: var(--fg);
   cursor: auto;
   display: flex;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
@@ -157,7 +161,7 @@ body {
 }
 
 .search-input input:focus {
-  border-color: rgb(0, 0, 0);
+  border-color: var(--fg);
   border-width: 2px;
   outline: none;
 }
@@ -211,7 +215,7 @@ body {
   display: block;
   width: 100%;
   height: 10px;
-  background-color: rgb(226, 232, 240);
+  background-color: var(--progress-bg);
   border-radius: 10px;
   overflow: hidden;
 }
@@ -225,15 +229,15 @@ body {
 }
 
 .low {
-  color: rgb(34, 197, 94);
+  color: var(--low);
 }
 
 .medium {
-  color: rgb(234, 179, 8);
+  color: var(--medium);
 }
 
 .high {
-  color: rgb(239, 68, 68);
+  color: var(--high);
 }
 
 .server-container {

assets/styles/font.css

@@ -76,7 +76,6 @@ body {
   font-family: "Roboto", "Roboto Condensed", sans-serif;
   font-weight: normal;
   font-style: normal;
-  color: black;
 }
 
 .line-chart {

assets/styles/light.css

@@ -0,0 +1,67 @@
+:root {
+  /* States */
+  --online: rgb(22 101 52);
+  --offline: rgb(153, 27, 27);
+  --warning: rgb(154, 52, 18);
+  --maintenance: rgb(30, 64, 175);
+
+  /* States bg */
+  --online-bg: rgb(220, 252, 231);
+  --offline-bg: rgb(254, 226, 226);
+  --warning-bg: rgb(255, 237, 213);
+  --maintenance-bg: rgb(219, 234, 254);
+
+  /* Overview data */
+  --online-ov: #16a34a;
+  --issue: rgb(234, 71, 12);
+  --cpu: rgb(37, 99, 235);
+  --memory: rgb(147, 51, 234);
+  --storage: rgb(234, 88, 12);
+  --network: rgb(22 163 74);
+
+  /* Usage levels */
+  --low: rgb(34, 197, 94);
+  --medium: rgb(234, 179, 8);
+  --high: rgb(239, 68, 68);
+
+  /* Misc */
+  --bg: #f1f5f9;
+  --fg: #0f172a;
+  --card-bg: #fff;
+  --progress-bg: rgb(226, 232, 240);
+  --server-icon-bg: rgb(219 234 254);
+}
+
+:root .dark {
+  /* States */
+  --online: rgb(34, 197, 94); /* bright green */
+  --offline: rgb(248, 113, 113); /* soft red */
+  --warning: rgb(251, 191, 36); /* yellow-orange */
+  --maintenance: rgb(147, 197, 253); /* light blue */
+
+  /* States bg */
+  --online-bg: rgba(22, 101, 52, 0.417); /* dark green */
+  --offline-bg: rgb(153, 27, 27, 0.417); /* dark red */
+  --warning-bg: rgb(154, 52, 18, 0.417); /* dark orange */
+  --maintenance-bg: rgb(30, 64, 175, 0.417); /* dark blue */
+
+  /* Overview data */
+  --online-ov: #16a34a;
+  --issue: rgb(234, 71, 12);
+  --cpu: rgb(37, 99, 235);
+  --memory: rgb(147, 51, 234);
+  --storage: rgb(234, 88, 12);
+  --network: rgb(22 163 74);
+
+  /* Usage levels */
+  --low: rgb(74, 222, 128); /* light green */
+  --medium: rgb(253, 224, 71); /* light yellow */
+  --high: rgb(239, 68, 68); /* red */
+
+  /* Misc */
+  --bg: #0f172a; /* dark navy */
+  --fg: #f8fafc; /* light text */
+  --card-bg: #141e2f; /* dark card background 141e2f */
+  --progress-bg: #27364d;
+  --server-icon-bg: #243756;
+}

assets/styles/server.css

@@ -1,6 +1,6 @@
 .server-container .server {
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--card-bg);
   border-radius: 10px;
   width: 100%;
   height: 100%;
@@ -17,7 +17,7 @@
   border-radius: 10px;
   width: 20px;
   height: 20px;
-  background-color: rgb(219 234 254);
+  background-color: var(--server-icon-bg);
   color: rgb(37 99 235);
   margin-top: auto;
   margin-bottom: auto;
@@ -114,21 +114,21 @@
 }
 
 .Online {
-  background-color: rgb(220, 252, 231);
+  color: var(--online);
-  color: rgb(22 101 52);
+  background-color: var(--online-bg);
 }
 
 .Offline {
-  background-color: rgb(254, 226, 226);
+  color: var(--offline);
-  color: rgb(153, 27, 27);
+  background-color: var(--offline-bg);
 }
 
 .Warning {
-  background-color: rgb(255, 237, 213);
+  color: var(--warning);
-  color: rgb(154, 52, 18);
+  background-color: var(--warning-bg);
 }
 
 .Maintenance {
-  background-color: rgb(219, 234, 254);
+  color: var(--maintenance);
-  color: rgb(30, 64, 175);
+  background-color: var(--maintenance-bg);
 }

assets/styles/sidebar.css

@@ -1,6 +1,6 @@
 #sidebar {
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--card-bg);
   width: 300px;
   height: calc(100vh - 40px);
   border-radius: 20px;
@@ -28,7 +28,7 @@
 
 .sidebar-item p {
   text-decoration: none;
-  color: #0f172a;
+  color: var(--fg);
   font: inherit; 
   font-size: larger;
   font-weight: bold;
@@ -36,5 +36,5 @@
 }
 
 .sidebar-item svg {
-  color: #fff;
+  color: var(--fg);
 }

src/components/server.rs

@@ -1,7 +1,7 @@
 use crate::components::ProgressBar;
 use dioxus::prelude::*;
 
-const SERVER_CSS: Asset = asset!("/assets/server.css");
+const SERVER_CSS: Asset = asset!("/assets/styles/server.css");
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub enum Status {

src/components/sidebar.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 
 use crate::Route;
 
-const SIDEBAR_CSS: Asset = asset!("/assets/sidebar.css");
+const SIDEBAR_CSS: Asset = asset!("/assets/styles/sidebar.css");
 
 pub struct SideBarItem {
     pub name: &'static str,

src/dashboard.rs

@@ -7,7 +7,7 @@ use crate::components::{
 };
 use lucide_dioxus;
 
-const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
+const DASHBOARD_CSS: Asset = asset!("/assets/styles/dashboard.css");
 
 #[component]
 pub fn Dashboard() -> Element {
@@ -81,7 +81,7 @@ pub fn Dashboard() -> Element {
                         lucide_dioxus::Search { size: 16, color: "currentColor" }
                         input { placeholder: "Search servers by name, location, or IP..." }
                     }
-                    button { "All (4)" }
+                    button { class: "fg", "All (4)" }
                     button { class: "online", "Online (3)" }
                     button { class: "issues", "Warning (1)" }
                     button { class: "ram", "Offline (1)" }

src/login.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 
 use crate::Route;
 
-const LOGIN_CSS: Asset = asset!("/assets/login.css");
+const LOGIN_CSS: Asset = asset!("/assets/styles/login.css");
 
 #[component]
 pub fn Login() -> Element {

src/main.rs

@@ -1,7 +1,7 @@
 mod backend;
+mod components;
 mod dashboard;
 mod login;
-mod components;
 
 use dioxus::prelude::*;
 
@@ -18,7 +18,8 @@ enum Route {
 }
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
-const FONT_CSS: Asset = asset!("/assets/font.css");
+const FONT_CSS: Asset = asset!("/assets/styles/font.css");
+const LIGHT_CSS: Asset = asset!("/assets/styles/light.css");
 
 fn main() {
     dioxus::launch(App);
@@ -29,6 +30,7 @@ fn App() -> Element {
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
         document::Link { rel: "stylesheet", href: FONT_CSS }
+        document::Link { rel: "stylesheet", href: LIGHT_CSS }
         Router::<Route> { }
     }
 }