feat: Added Themes

2026-09-24 09:12:18 -04:00
parent 5be8e31483
commit d84902c111
4 changed files with 214 additions and 0 deletions
@@ -1321,4 +1321,165 @@ body {

 .changelog-content a:hover {
  text-decoration: underline;
+}
+.theme-picker {
+  padding: 1px 6px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none;
+}
+
+.theme-picker:hover {
+  color: var(--text-secondary);
+  border-color: var(--border-bright);
+}
+
+.theme-picker option {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+/* ===== Theme: Midnight ===== */
+
+:root[data-theme="midnight"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-tertiary: #141414;
+  --bg-hover: #1e1e1e;
+  --bg-active: #282828;
+  --border: #1a1a1a;
+  --border-bright: #2a2a2a;
+
+  --text-primary: #e0e0e0;
+  --text-secondary: #808080;
+  --text-muted: #4a4a4a;
+
+  --cyan: #00bfff;
+  --cyan-hover: #009ed9;
+  --cyan-dim: rgba(0, 191, 255, 0.08);
+  --cyan-glow: rgba(0, 191, 255, 0.25);
+  --cyan-subtle: rgba(0, 191, 255, 0.03);
+}
+
+/* ===== Theme: Dracula ===== */
+
+:root[data-theme="dracula"] {
+  --bg-primary: #282a36;
+  --bg-secondary: #21222c;
+  --bg-tertiary: #2d2f3d;
+  --bg-hover: #44475a;
+  --bg-active: #4e5166;
+  --border: #44475a;
+  --border-bright: #555869;
+
+  --text-primary: #f8f8f2;
+  --text-secondary: #6272a4;
+  --text-muted: #4d5b86;
+
+  --cyan: #bd93f9;
+  --cyan-hover: #a87cee;
+  --cyan-dim: rgba(189, 147, 249, 0.08);
+  --cyan-glow: rgba(189, 147, 249, 0.25);
+  --cyan-subtle: rgba(189, 147, 249, 0.03);
+
+  --status-up: #50fa7b;
+  --status-up-glow: rgba(80, 250, 123, 0.15);
+  --status-down: #ff5555;
+  --status-down-glow: rgba(255, 85, 85, 0.15);
+  --status-filtered: #f1fa8c;
+  --status-filtered-glow: rgba(241, 250, 140, 0.15);
+  --status-unknown: #6272a4;
+
+  --danger: #ff5555;
+  --danger-hover: #e64545;
+}
+
+/* ===== Theme: Nord ===== */
+
+:root[data-theme="nord"] {
+  --bg-primary: #2e3440;
+  --bg-secondary: #3b4252;
+  --bg-tertiary: #434c5e;
+  --bg-hover: #4c566a;
+  --bg-active: #556070;
+  --border: #3b4252;
+  --border-bright: #4c566a;
+
+  --text-primary: #eceff4;
+  --text-secondary: #d8dee9;
+  --text-muted: #616e88;
+
+  --cyan: #88c0d0;
+  --cyan-hover: #7bb4c4;
+  --cyan-dim: rgba(136, 192, 208, 0.08);
+  --cyan-glow: rgba(136, 192, 208, 0.25);
+  --cyan-subtle: rgba(136, 192, 208, 0.03);
+
+  --status-up: #a3be8c;
+  --status-up-glow: rgba(163, 190, 140, 0.15);
+  --status-down: #bf616a;
+  --status-down-glow: rgba(191, 97, 106, 0.15);
+  --status-filtered: #ebcb8b;
+  --status-filtered-glow: rgba(235, 203, 139, 0.15);
+  --status-unknown: #616e88;
+
+  --danger: #bf616a;
+  --danger-hover: #a9545c;
+}
+
+/* ===== Theme: Solarized Dark ===== */
+
+:root[data-theme="solarized"] {
+  --bg-primary: #002b36;
+  --bg-secondary: #073642;
+  --bg-tertiary: #0a3f4c;
+  --bg-hover: #124a56;
+  --bg-active: #1a5560;
+  --border: #0d4450;
+  --border-bright: #1a5c6a;
+
+  --text-primary: #93a1a1;
+  --text-secondary: #839496;
+  --text-muted: #586e75;
+
+  --cyan: #2aa198;
+  --cyan-hover: #25908a;
+  --cyan-dim: rgba(42, 161, 152, 0.1);
+  --cyan-glow: rgba(42, 161, 152, 0.25);
+  --cyan-subtle: rgba(42, 161, 152, 0.03);
+
+  --status-up: #859900;
+  --status-up-glow: rgba(133, 153, 0, 0.15);
+  --status-down: #dc322f;
+  --status-down-glow: rgba(220, 50, 47, 0.15);
+  --status-filtered: #b58900;
+  --status-filtered-glow: rgba(181, 137, 0, 0.15);
+  --status-unknown: #586e75;
+
+  --danger: #dc322f;
+  --danger-hover: #c62825;
+}
+
+/* ===== Circuit art theme tinting ===== */
+
+:root[data-theme="dracula"] .toolbar-circuit {
+  filter: hue-rotate(70deg);
+}
+
+:root[data-theme="nord"] .toolbar-circuit {
+  filter: hue-rotate(20deg) saturate(0.5);
+}
+
+:root[data-theme="solarized"] .toolbar-circuit {
+  filter: hue-rotate(160deg) saturate(0.6);
+}
+
+:root[data-theme="midnight"] .toolbar-circuit {
+  filter: brightness(0.8);
 }