feat: Added Themes

src/index.html

@@ -200,6 +200,13 @@
   <div id="status-bar">
     <span class="status-bar-item" id="status-bar-version">Argus</span>
     <button id="btn-changelog" class="status-bar-btn">Changelog</button>
+    <select id="theme-picker" class="theme-picker">
+      <option value="cyber">Cyber</option>
+      <option value="midnight">Midnight</option>
+      <option value="dracula">Dracula</option>
+      <option value="nord">Nord</option>
+      <option value="solarized">Solarized Dark</option>
+    </select>
     <span class="status-bar-item" id="privilege-status">unprivileged</span>
   </div>
 

src/main.js

@@ -1,5 +1,43 @@
 const { invoke } = window.__TAURI__.core;
 const { listen } = window.__TAURI__.event;
+var theme = (() => {
+  var STORAGE_KEY = 'argus-theme';
+
+  function get() {
+    try {
+      return localStorage.getItem(STORAGE_KEY) || 'cyber';
+    } catch (e) {
+      return 'cyber';
+    }
+  }
+
+  function set(name) {
+    if (name === 'cyber') {
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', name);
+    }
+    try {
+      localStorage.setItem(STORAGE_KEY, name);
+    } catch (e) {}
+  }
+
+  function init() {
+    var saved = get();
+    set(saved);
+
+    var picker = document.getElementById('theme-picker');
+    picker.value = saved;
+    picker.addEventListener('change', function() {
+      set(picker.value);
+    });
+  }
+
+  // Apply immediately (before DOMContentLoaded) to prevent flash
+  set(get());
+
+  return { init };
+})();
 const table = (() => {
   let data = [];
   let filtered = [];
@@ -1091,6 +1129,9 @@ window.addEventListener('DOMContentLoaded', () => {
   monitorTab.init();
   updater.init();
   changelog.init();
+  theme.init();
+  columns.init();
+  sender.init();
   document.getElementById('btn-export-all').addEventListener('click', exporter.csvAll);
   document.getElementById('btn-export-up').addEventListener('click', exporter.csvUp);
   console.log('[Argus] Ready');

src/styles.css

@@ -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);
 }