feat: Added more themes

src/index.html

@@ -211,6 +211,11 @@
       <option value="nord">Nord</option>
       <option value="solarized">Solarized Dark</option>
       <option value="mocha">Catppuccin Mocha</option>
+      <option value="onedark">One Dark</option>
+      <option value="rosepine">Rosé Pine</option>
+      <option value="rosepine-moon">Rosé Pine Moon</option>
+      <option value="tokyonight">Tokyo Night</option>
+      <option value="iceberg">Iceberg</option>
     </select>
     <span class="status-bar-item" id="privilege-status">unprivileged</span>
   </div>

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"] {