diff --git a/CHANGELOG.md b/CHANGELOG.md index 483e508..bd6c3bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1 +1,6 @@ +## [unreleased] + +### 🚀 Features + +- Added changelog ## [0.1.0] - 2026-09-23 diff --git a/src/index.html b/src/index.html index 438a758..2a97886 100644 --- a/src/index.html +++ b/src/index.html @@ -200,6 +200,13 @@
Argus + unprivileged
diff --git a/src/main.js b/src/main.js index a186bd2..bce5afe 100644 --- a/src/main.js +++ b/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'); diff --git a/src/styles.css b/src/styles.css index dda8807..85b6be5 100644 --- a/src/styles.css +++ b/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); } \ No newline at end of file