From 56038b7a7e8c9edde5943e3c6167716f431e309c Mon Sep 17 00:00:00 2001 From: mysticmomba Date: Thu, 8 Oct 2026 12:50:48 -0400 Subject: [PATCH 1/3] feat: Added more themes --- src/index.html | 5 ++ src/styles.css | 185 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 190 insertions(+) diff --git a/src/index.html b/src/index.html index 2e2d141..cf3a302 100644 --- a/src/index.html +++ b/src/index.html @@ -211,6 +211,11 @@ + + + + + unprivileged diff --git a/src/styles.css b/src/styles.css index cca5fb1..bab25c7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1533,6 +1533,191 @@ body { background: var(--border-bright); } +/* ===== Theme: One Dark ===== */ + +:root[data-theme="onedark"] { + --bg-primary: #282c34; + --bg-secondary: #21252b; + --bg-tertiary: #2c313a; + --bg-hover: #3e4451; + --bg-active: #4b5263; + --border: #3e4451; + --border-bright: #4b5263; + + --text-primary: #abb2bf; + --text-secondary: #848b98; + --text-muted: #5c6370; + + --cyan: #61afef; + --cyan-hover: #519fdf; + --cyan-dim: rgba(97, 175, 239, 0.08); + --cyan-glow: rgba(97, 175, 239, 0.2); + --cyan-subtle: rgba(97, 175, 239, 0.03); + + --status-up: #98c379; + --status-up-glow: rgba(152, 195, 121, 0.15); + --status-down: #e06c75; + --status-down-glow: rgba(224, 108, 117, 0.15); + --status-filtered: #e5c07b; + --status-filtered-glow: rgba(229, 192, 123, 0.15); + --status-unknown: #5c6370; + + --danger: #e06c75; + --danger-hover: #d05f68; +} + +:root[data-theme="onedark"] .toolbar-circuit { + filter: hue-rotate(30deg) saturate(0.6); +} + +/* ===== Theme: Rosé Pine ===== */ + +:root[data-theme="rosepine"] { + --bg-primary: #191724; + --bg-secondary: #1f1d2e; + --bg-tertiary: #26233a; + --bg-hover: #403d52; + --bg-active: #524f67; + --border: #26233a; + --border-bright: #403d52; + + --text-primary: #e0def4; + --text-secondary: #908caa; + --text-muted: #6e6a86; + + --cyan: #c4a7e7; + --cyan-hover: #b498d7; + --cyan-dim: rgba(196, 167, 231, 0.08); + --cyan-glow: rgba(196, 167, 231, 0.2); + --cyan-subtle: rgba(196, 167, 231, 0.03); + + --status-up: #9ccfd8; + --status-up-glow: rgba(156, 207, 216, 0.15); + --status-down: #eb6f92; + --status-down-glow: rgba(235, 111, 146, 0.15); + --status-filtered: #f6c177; + --status-filtered-glow: rgba(246, 193, 119, 0.15); + --status-unknown: #6e6a86; + + --danger: #eb6f92; + --danger-hover: #db5f82; +} + +:root[data-theme="rosepine"] .toolbar-circuit { + filter: hue-rotate(80deg) saturate(0.5) brightness(0.8); +} + +/* ===== Theme: Rosé Pine Moon ===== */ + +:root[data-theme="rosepine-moon"] { + --bg-primary: #232136; + --bg-secondary: #2a273f; + --bg-tertiary: #393552; + --bg-hover: #44415a; + --bg-active: #56526e; + --border: #393552; + --border-bright: #44415a; + + --text-primary: #e0def4; + --text-secondary: #908caa; + --text-muted: #6e6a86; + + --cyan: #c4a7e7; + --cyan-hover: #b498d7; + --cyan-dim: rgba(196, 167, 231, 0.08); + --cyan-glow: rgba(196, 167, 231, 0.2); + --cyan-subtle: rgba(196, 167, 231, 0.03); + + --status-up: #9ccfd8; + --status-up-glow: rgba(156, 207, 216, 0.15); + --status-down: #eb6f92; + --status-down-glow: rgba(235, 111, 146, 0.15); + --status-filtered: #f6c177; + --status-filtered-glow: rgba(246, 193, 119, 0.15); + --status-unknown: #6e6a86; + + --danger: #eb6f92; + --danger-hover: #db5f82; +} + +:root[data-theme="rosepine-moon"] .toolbar-circuit { + filter: hue-rotate(80deg) saturate(0.5) brightness(0.8); +} + +/* ===== Theme: Tokyo Night ===== */ + +:root[data-theme="tokyonight"] { + --bg-primary: #1a1b26; + --bg-secondary: #16161e; + --bg-tertiary: #1f2335; + --bg-hover: #292e42; + --bg-active: #33384d; + --border: #1f2335; + --border-bright: #292e42; + + --text-primary: #c0caf5; + --text-secondary: #a9b1d6; + --text-muted: #565f89; + + --cyan: #7aa2f7; + --cyan-hover: #6a92e7; + --cyan-dim: rgba(122, 162, 247, 0.08); + --cyan-glow: rgba(122, 162, 247, 0.2); + --cyan-subtle: rgba(122, 162, 247, 0.03); + + --status-up: #9ece6a; + --status-up-glow: rgba(158, 206, 106, 0.15); + --status-down: #f7768e; + --status-down-glow: rgba(247, 118, 142, 0.15); + --status-filtered: #e0af68; + --status-filtered-glow: rgba(224, 175, 104, 0.15); + --status-unknown: #565f89; + + --danger: #f7768e; + --danger-hover: #e7667e; +} + +:root[data-theme="tokyonight"] .toolbar-circuit { + filter: hue-rotate(40deg) saturate(0.5); +} + +/* ===== Theme: Iceberg ===== */ + +:root[data-theme="iceberg"] { + --bg-primary: #161821; + --bg-secondary: #1e2132; + --bg-tertiary: #252837; + --bg-hover: #33374c; + --bg-active: #3d4259; + --border: #252837; + --border-bright: #33374c; + + --text-primary: #c6c8d1; + --text-secondary: #818596; + --text-muted: #444b71; + + --cyan: #84a0c6; + --cyan-hover: #7490b6; + --cyan-dim: rgba(132, 160, 198, 0.08); + --cyan-glow: rgba(132, 160, 198, 0.2); + --cyan-subtle: rgba(132, 160, 198, 0.03); + + --status-up: #b4be82; + --status-up-glow: rgba(180, 190, 130, 0.15); + --status-down: #e27878; + --status-down-glow: rgba(226, 120, 120, 0.15); + --status-filtered: #e2a478; + --status-filtered-glow: rgba(226, 164, 120, 0.15); + --status-unknown: #444b71; + + --danger: #e27878; + --danger-hover: #d26868; +} + +:root[data-theme="iceberg"] .toolbar-circuit { + filter: hue-rotate(30deg) saturate(0.4) brightness(0.9); +} + /* ===== Theme: Hacker (Easter Egg) ===== */ :root[data-theme="hacker"] { From ed9ed59de9dd4d3543cdb206ddc640d825a5f21d Mon Sep 17 00:00:00 2001 From: mysticmomba Date: Thu, 8 Oct 2026 15:12:29 -0400 Subject: [PATCH 2/3] Updated themes a tad --- src/styles.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/styles.css b/src/styles.css index bab25c7..fd23ccc 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1456,7 +1456,7 @@ body { --border: #0d4450; --border-bright: #1a5c6a; - --text-primary: #93a1a1; + --text-primary: #cb4b16; --text-secondary: #839496; --text-muted: #586e75; @@ -1489,11 +1489,11 @@ body { --border: #313244; --border-bright: #45475a; - --text-primary: #cdd6f4; + --text-primary: #94e2d5; --text-secondary: #a6adc8; --text-muted: #6c7086; - --cyan: #89b4fa; + --cyan: #b4befe; --cyan-hover: #7ba4eb; --cyan-dim: rgba(137, 180, 250, 0.08); --cyan-glow: rgba(137, 180, 250, 0.2); @@ -1515,21 +1515,21 @@ body { filter: hue-rotate(40deg) saturate(0.6) brightness(0.9); } -:root[data-theme="latte"] .port-tag { +:root[data-theme="mocha"] .port-tag { background: rgba(30, 102, 245, 0.1); border-color: rgba(30, 102, 245, 0.2); } -:root[data-theme="latte"] #privilege-status::before { +:root[data-theme="mocha"] #privilege-status::before { background: var(--status-up); box-shadow: 0 0 4px rgba(64, 160, 43, 0.3); } -:root[data-theme="latte"] ::-webkit-scrollbar-track { +:root[data-theme="mocha"] ::-webkit-scrollbar-track { background: var(--bg-primary); } -:root[data-theme="latte"] ::-webkit-scrollbar-thumb { +:root[data-theme="mocha"] ::-webkit-scrollbar-thumb { background: var(--border-bright); } @@ -1581,7 +1581,7 @@ body { --border: #26233a; --border-bright: #403d52; - --text-primary: #e0def4; + --text-primary: #31748f; --text-secondary: #908caa; --text-muted: #6e6a86; @@ -1618,7 +1618,7 @@ body { --border: #393552; --border-bright: #44415a; - --text-primary: #e0def4; + --text-primary: #9ccfd8; --text-secondary: #908caa; --text-muted: #6e6a86; @@ -1655,7 +1655,7 @@ body { --border: #1f2335; --border-bright: #292e42; - --text-primary: #c0caf5; + --text-primary: #bb9af7; --text-secondary: #a9b1d6; --text-muted: #565f89; From fd8bb16d40cf186529fb866689c80b76a9bf00f6 Mon Sep 17 00:00:00 2001 From: mysticmomba Date: Fri, 9 Oct 2026 09:38:24 -0400 Subject: [PATCH 3/3] Updated Theme --- src/styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles.css b/src/styles.css index fd23ccc..1fdcad8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1790,13 +1790,13 @@ body { display: block; background: repeating-linear-gradient(0deg, - rgba(0, 0, 0, 0.4) 0px, - rgba(0, 0, 0, 0.4) 1px, + rgba(0, 0, 0, 0.5) 0px, + rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 4px), linear-gradient(180deg, transparent 0%, - rgba(0, 255, 65, 0.03) 50%, + rgba(0, 255, 65, 0.09) 50%, transparent 100%); animation: crt-flicker 3s infinite; }