orus-dev/sentryx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode support

Browse Source
This commit is contained in:
selimaj-dev
2025-07-12 02:26:44 +02:00
parent b6c5f6ba8b
commit fcc0a979d3
11 changed files with 114 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/dashboard.css → assets/styles/dashboard.css
+24 -20
View File
@@ -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/font.css → assets/styles/font.css
-1
View File
@@ -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
+67
View File
@@ -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/login.css → assets/styles/login.css
View File
assets/server.css → assets/styles/server.css
+10 -10
View File
@@ -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: rgb(22 101 52);
color: var(--online);
background-color: var(--online-bg);
}
.Offline {
background-color: rgb(254, 226, 226);
color: rgb(153, 27, 27);
color: var(--offline);
background-color: var(--offline-bg);
}
.Warning {
background-color: rgb(255, 237, 213);
color: rgb(154, 52, 18);
color: var(--warning);
background-color: var(--warning-bg);
}
.Maintenance {
background-color: rgb(219, 234, 254);
color: rgb(30, 64, 175);
color: var(--maintenance);
background-color: var(--maintenance-bg);
}
assets/sidebar.css → assets/styles/sidebar.css
+3 -3
View File
@@ -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 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+5 -3
View File
@@ -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 }
Router::<Route> {}
document::Link { rel: "stylesheet", href: LIGHT_CSS }
Router::<Route> { }
}
}