Merge pull request 'Development' (#15) from development into master

Reviewed-on: #15

LICENSE.md

@@ -625,7 +625,7 @@ state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
     Argus, an all in one network utility
-    Copyright (C) 2026  Jamse Brotosky
+    Copyright (C) 2026  James Brotosky
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published

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

@@ -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,24 +1515,209 @@ 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);
 }
 
+/* ===== 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: #31748f;
+  --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: #9ccfd8;
+  --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: #bb9af7;
+  --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"] {
@@ -1605,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;
 }