Initial commit — ProxMorph with TheRaiwy Dark cyber theme

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+github: [IT-BAER]
+buy_me_a_coffee: itbaer
+custom: ["paypal.com/donate/?hosted_button_id=5XXRC7THMTRRS"]

.github/workflows/release.yml

@@ -0,0 +1,62 @@
+name: Create Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Extract version from tag
+        id: version
+        run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
+
+      - name: Extract changelog for this version
+        id: changelog
+        run: |
+          # Extract the changelog section for this version
+          VERSION="${{ steps.version.outputs.VERSION }}"
+          
+          # Use awk with index() for exact string match (avoids regex bracket issues)
+          CHANGELOG=$(awk -v ver="$VERSION" '
+            /^## \[/ {
+              if (found) exit
+              if (index($0, "[" ver "]") > 0) { found=1; next }
+            }
+            found { print }
+          ' CHANGELOG.md)
+          
+          # Handle multiline output
+          {
+            echo "BODY<<EOF"
+            echo "$CHANGELOG"
+            echo "EOF"
+          } >> $GITHUB_OUTPUT
+
+      - name: Create release archive
+        run: |
+          mkdir -p release
+          cp install.sh release/
+          cp patch_theme_map.sh release/
+          cp -r themes release/
+          cp README.md release/
+          cp CHANGELOG.md release/
+          cd release && tar -czvf ../proxmorph-${{ steps.version.outputs.VERSION }}.tar.gz .
+          cd .. && zip -r proxmorph-${{ steps.version.outputs.VERSION }}.zip release/
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          name: v${{ steps.version.outputs.VERSION }}
+          body: ${{ steps.changelog.outputs.BODY }}
+          files: |
+            proxmorph-${{ steps.version.outputs.VERSION }}.tar.gz
+            proxmorph-${{ steps.version.outputs.VERSION }}.zip

.gitignore

@@ -0,0 +1,55 @@
+# ProxMorph .gitignore
+
+# Context/conversation files
+context.md
+references/
+
+# Archive folder - old theme versions
+themes/_archive/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+
+# Editor/IDE files (VS Code settings are kept)
+*.swp
+*.swo
+*~
+.idea/
+.vscode/
+.github/instructions/
+.github/*.md
+
+# Compiled SASS (if any)
+*.css.map
+sass/.sass-cache/
+
+# Logs
+*.log
+npm-debug.log*
+
+# Node.js (if ever used for build)
+node_modules/
+package-lock.json
+
+# Backup files
+*.bak
+*.backup
+*.orig
+
+# Temporary files
+*.tmp
+*.temp
+.cache/
+
+# Test files
+test-*.css
+*-test.css
+generate-variants.ps1
+docs/component-inventory.md

CHANGELOG.md

@@ -0,0 +1,417 @@
+# Changelog
+
+All notable changes to ProxMorph will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [2.7.3] - 2026-06-12
+
+### Fixed
+- **All themes** — Task Viewer window no longer loses its scrollbar. The blanket `.x-window .x-panel-body { overflow: visible !important }` rule was overriding ExtJS's own inline `overflow: auto` on scrollable panel bodies (`.x-scroller`). Fixed by scoping the rule to `:not(.x-scroller)`. Issue [#49](https://github.com/IT-BAER/proxmorph/issues/49)
+- **All themes** — CT and VM creation dialog tabs are no longer pushed off-screen. `position: relative !important` on `.x-tab` was overriding ExtJS box layout's absolute positioning, causing each tab's offset to double-count (natural flow position + intended left = tabs spreading ~1.5× wider than the container). Removed the offending declaration. Issue [#50](https://github.com/IT-BAER/proxmorph/issues/50)
+- **Catppuccin Latte** — Text on colored elements (progress bar fill, active buttons, badges) is now visible. `--ctp-on-accent` was set to `var(--ctp-base)` (`#eff1f5`, near-white), which is invisible on the light Latte background. Changed to `#ffffff` for proper contrast against vivid Latte accent fills (mauve, red, yellow). Issue [#51](https://github.com/IT-BAER/proxmorph/issues/51)
+
+## [2.7.2] - 2026-04-16
+
+### Fixed
+- **Sensors** — Added pre-patch Perl syntax check on Nodes.pm before applying the sensor patch. If Nodes.pm is already broken (e.g. from the v2.7.0 APT-hook heredoc bug), the user now gets an actionable error: *"Run 'apt install --reinstall pve-manager' to restore it, then re-run ProxMorph install."* instead of a misleading post-patch rollback message. Issue [#47](https://github.com/IT-BAER/proxmorph/issues/47)
+- **Sensors** — Rollback on post-patch syntax failure now restores from `Nodes.pm.original` backup when available, falling back to sed marker removal only if no backup exists.
+
+## [2.7.1] - 2026-04-05
+
+### Fixed
+- **APT Hook** — Fixed broken heredoc escaping in `post-update.sh` that caused the Nodes.pm sensor patch to be injected as a single malformed line, breaking Perl syntax and preventing `pveproxy` from starting after a PVE update. Issue [#45](https://github.com/IT-BAER/proxmorph/issues/45)
+  - Added Perl syntax check (`perl -c`) after patching with automatic rollback if validation fails
+
+## [2.7.0] - 2026-04-01
+
+### Added
+- **Sensor Selector** — Interactive per-sensor filtering for hardware monitoring. Issue [#44](https://github.com/IT-BAER/proxmorph/issues/44)
+  - `enumerate_sensors()` discovers all available sensors (CPU, NVMe, HDD, Fan) via `sensors -j`
+  - `configure_sensor_filter()` interactive multi-select menu to choose which sensors to display
+  - Filter stored in `/opt/proxmorph/.sensors-filter` (chip:label format), synced to cluster nodes
+  - `manage-sensors` menu gains option 4) Configure sensor selection
+  - `sensors configure` CLI subcommand for non-interactive reconfiguration
+  - Backwards-compatible: missing/empty filter file shows all sensors
+- **proxmorph-sensors.js** (v1.2.0) — Client-side sensor filtering
+  - Reads `sensorsFilter` from API on each render (no first-load flash)
+  - CPU cores shown individually when filter selects specific cores without Package sensor
+  - APT hook updated to persist filter across PVE updates
+
+## [2.6.0] - 2026-03-16
+
+### Added
+- **Proxmox Datacenter Manager (PDM) Support** — Full theme support for PDM 1.x:
+  - New `install.sh` product detection: auto-detects PDM alongside PVE and PBS
+  - 22 PDM-specific CSS override themes injected as `<link>` tags into `index.hbs`, activated via JavaScript based on `localStorage` selection
+  - `proxmorph-pdm-base.css` — always-on component styling (rounded corners, shadows, button/panel/grid refinements)
+  - `pdm-theme-selector.js` — MutationObserver-based patch that injects ProxMorph themes into PDM's native Theme dialog dropdown alongside built-in Desktop/Crisp options
+  - PDM themes use CSS custom property overrides to remap `--pwt-color-*` tokens from the WASM-loaded base theme
+  - Inline `<script>` in `index.hbs` activates saved theme before WASM loads (prevents flash of default theme)
+  - APT hook updated with PDM-specific repatch logic (CSS re-injection + JS patch re-copy)
+  - Clean uninstall: removes theme directory, JS patches, and injected `index.hbs` block; restores backup
+
+### Changed
+- **Installer** (`install.sh`):
+  - Now supports PVE 8.x/9.x, PBS 3.x/4.x, **and PDM 1.x**
+  - `manage-sensors` command now shows interactive menu instead of requiring subcommand
+  - `verify` command (option 7) added to diagnose installation issues
+  - `pveproxy` restart changed from background to synchronous for reliability
+  - Prominent cache warning displayed after install/uninstall
+
+### Fixed
+- **Catppuccin Latte light theme icon/logo inversions** — Theme was generated from dark Catppuccin Mocha and retained dark-mode `filter: invert()` rules on loading indicators, folder icons, image-based icons (`.fa-ceph`, `.fa-sdn`, `.pve-itype-icon-qemu`, etc.), hardware icons, counter-invert cells, and the Proxmox logo. All are now `filter: none` as required by a light theme.
+- **Sensors: Perl taint mode error on node status API** — Issue [#38](https://github.com/IT-BAER/proxmorph/issues/38):
+  - The `Nodes.pm` patch now sets `local $ENV{PATH} = '/usr/bin:/bin';` before all backtick (`sensors -j`, `upsc`) calls, satisfying Perl's `-T` taint mode requirement that `$ENV{PATH}` be untainted before external command execution
+  - The UPS device name (`$ups_name`), obtained from tainted backtick output, is now validated and untainted via regex (`/^([\[email protected]]+)$/`) before being passed to the `upsc` command — prevents an additional taint violation in the UPS data collection path
+  - Affected users: anyone running ProxMorph sensors on a Proxmox host where `Nodes.pm` still has the old patch; fix requires re-running `install.sh` (or `install.sh manage-sensors disable && install.sh manage-sensors enable`) to re-apply the corrected patch
+- **Sensors: sed regex escaping for UPS untaint** — Issue [#38](https://github.com/IT-BAER/proxmorph/issues/38):
+  - GNU sed's `i\` command drops backslash before unknown escapes (`\w` → `w`)
+  - `patch_nodes_pm()` bash double-quoted sed now uses 4 backslashes (`\\\\w`)
+  - APT hook post-update heredoc (3-level escaping chain) now uses 8 backslashes for correct `\w` output
+- **Theme visibility after install** — Issue [#40](https://github.com/IT-BAER/proxmorph/issues/40):
+  - Added `verify` command (option 7) to diagnose installation issues (checks theme files, theme_map entries, JS patches, index template)
+  - Changed `pveproxy` restart from background (`&`) to synchronous to ensure theme_map changes take effect before user checks browser
+  - Added prominent cache warning after install/uninstall reminding users to hard-refresh (Ctrl+Shift+R)
+  - Fixed `sed` delimiter in `patch_theme_map` to use `|` instead of `/` for consistency with uninstall path handling
+## [2.5.1] - 2026-03-05
+
+### Added
+- **Cluster-aware sensor deployment** — Installer now detects PVE cluster nodes and deploys the sensor API patch to all remote nodes automatically
+  - Uses `pvecm nodes` to discover cluster members, scp to copy patched `Nodes.pm`, and restarts `pveproxy` on each node
+  - Version check ensures local and remote PVE versions match before deploying
+  - `sensors disable` cleanly removes the patch from all cluster nodes
+  - Prompts before deploying to remote nodes; can be skipped to run `install.sh` on each node individually
+
+### Fixed
+- **System Log scroll to bottom** — Issue [#36](https://github.com/IT-BAER/proxmorph/issues/36):
+  - Removed `scroll-behavior: smooth !important` from `.x-panel-body-default` in UniFi and UniFi Light themes
+  - This CSS rule broke ExtJS's synchronous scroll position tracking — the JournalView `scrollTo()` call would animate instead of applying instantly, causing the position read-back to return 0 and preventing auto-scroll to the newest log entries
+  - The `html { scroll-behavior: smooth }` rule is preserved for page-level smooth scrolling
+- **Sensor row hidden when not enabled** — Sensor row in node Status panel now hides completely when the API patch is not applied, instead of showing "N/A"
+- **Missing VMs/LXCs in backup job dialog** — Issue [#37](https://github.com/IT-BAER/proxmorph/issues/37):
+  - The `.x-form-trigger-wrap-default` height rule (`height: 28px !important`) was matching the VMSelector grid body, collapsing it to a single visible row
+  - Added `:not(.x-grid-body)` exclusion to the selector in UniFi and UniFi Light themes
+
+## [2.5.0] - 2026-03-05
+
+### Added
+- **Native Hardware Sensor Monitoring** — Issue [#22](https://github.com/IT-BAER/proxmorph/issues/22):
+  - New `proxmorph-sensors.js` patch injects CPU/Storage thermal readings, fan speeds, and UPS status directly into the node Summary dashboard
+  - Auto-detects `lm-sensors` hardware: coretemp (Intel), k10temp (AMD), NVMe, SATA/drivetemp, and fan sensors
+  - Optional UPS monitoring via `upsc` (Network UPS Tools) — shows status, charge, load, and runtime
+  - Color-coded temperature warnings (yellow at 80°C, red at 95°C) using theme CSS variables (`--pm-warning`, `--pm-error`)
+  - Installer auto-detects available sensors and prompts to enable during `install.sh` — patches `Nodes.pm` API to expose `sensors -j` output
+  - Fully optional: can be enabled/disabled independently via `install.sh manage-sensors`
+  - Graceful degradation: shows "N/A" when lm-sensors is not installed or no sensors detected
+- **UniFi Light Theme** — contributed by [@OiCkilL](https://github.com/OiCkilL) ([PR #34](https://github.com/IT-BAER/proxmorph/pull/34)):
+  - Light variant of the UniFi theme with Tier 3 comprehensive coverage
+  - Includes custom chart patching (`unifi-light-charts.js`) for consistent light-mode chart colors
+
+### Fixed
+- **Blue Slate Theme** — Issue [#25](https://github.com/IT-BAER/proxmorph/issues/25):
+  - **Complete v2.0.0 overhaul** — ported all Tier 2 fixes from the Dracula reference theme (1068 → 1568 lines)
+  - Fixed close "X" button white background — added `background-color: transparent` on `.x-panel-header-default .x-tool-tool-el` and `.x-window-header-default .x-tool-img`
+  - Ported FontAwesome tool icon replacements (close, gear, refresh, collapse/expand, maximize/restore, zoom) with hover, disabled, and inline FA states
+  - Added global border-radius architecture (reset-everything/re-apply pattern) replacing simple `border-radius: 6px`
+  - Fixed hardware icon text invisible — changed `invert(90%)` → `invert(100%)` with double-cancellation on `.x-grid-cell-inner` children + transparent borders on `<td>` cells
+  - Added 28px button height consistency with `:not()` exclusions, `.x-btn-wrap` flex centering, icon-only button fix, `.fa-desktop` translateY (Issue #17 port)
+  - Added custom checkbox/radio styling with SVG checkmark and animated radio dot
+  - Added dropdown/boundlist fixes: `border: none`, `outline: none`, `cursor: pointer` (Issue #24 port)
+  - Added menu item flexbox reordering for icon-left layout (Issue #24 port)
+  - Added column panel `max-width: none` fix (Issue #23 port)
+  - Added segmented button radius consistency
+  - Added console/terminal, legend/chart, progress bar, date picker, tag edit, APT repo, markdown `.pmx-md`, `.pmx-hint`, and usage bar styling
+  - Added smooth transitions on grid rows, tree items, menus, boundlists, tabs, splitters, tooltips, progress bars
+  - Added Firefox scrollbar support (`scrollbar-width: thin`)
+  - Added keyboard focus outline removal, `cursor: pointer` on interactive elements
+  - Added `display: none !important` respect for hidden dialog buttons
+  - Added login dialog border cleanup
+- **20 Themes** — Issue [#24](https://github.com/IT-BAER/proxmorph/issues/24):
+  - Fixed dropdown context menu icons aligned to the right instead of left — root cause: CSS targeted non-existent `.x-menu-item-link-default` class; changed selector to `.x-menu-item-default > .x-menu-item-link` across all affected themes
+  - Fixed ugly dotted focus borders on boundlist dropdown items (e.g. Server View selector) — added `border: none !important` and `outline: none !important` to `.x-boundlist-item` rules
+  - Standardized boundlist item padding (`4px 8px`) and cursor (`pointer`) across all themes for consistent dropdown appearance
+- **9 Theme Families** — Issue [#17](https://github.com/IT-BAER/proxmorph/issues/17):
+  - Fixed icons misaligned in larger top-bar buttons (Create VM, Create CT, root@pam) across all UniFi-based themes except UniFi itself
+  - Ported 5 missing CSS blocks from the UniFi reference: `.x-btn-wrap` flex centering, `.x-btn-inner` flex centering, dropdown arrow alignment, icon-only button fix, and `.fa-desktop` translateY compensation
+  - Affected base themes: Catppuccin Mocha, Dracula, Tokyo Night, Nord Dark/Light, Solarized Dark/Light, Gruvbox Dark/Light (plus all generated variants)
+- **All Themes (22 files)** — Issue [#18](https://github.com/IT-BAER/proxmorph/issues/18):
+  - Fixed panel title text being clipped by removing `overflow: hidden !important` from `.x-panel` rules across all themes
+  - Fixed Hardware tab text becoming invisible on SVG-icon rows (`pve-itype-icon-*`) due to `filter: invert()` — changed to `invert(100%)` with double-cancellation on `.x-grid-cell-inner` children for perfect text brightness matching (7 dark themes + variants)
+  - Fixed bright border artifacts on inverted Hardware icon rows — added `border-color: transparent !important` on affected `<td>` cells (7 dark themes + variants)
+  - Fixed SCSI Controller icon (`fa-database`) being incorrectly dimmed — removed `.fa-database::before` from the broad icon color override selector in all 13 base themes
+  - Fixed panel title/header text clipped by border-radius — added `overflow: visible !important` on `.x-title-text`, `.x-title-text-default`, `.x-panel-header`, and `.x-panel-header-default` across all 11 non-UniFi base themes (root cause: global `.x-border-box *` border-radius interacting with ExtJS native `overflow: hidden`)
+- **19 Themes** — Issue [#28](https://github.com/IT-BAER/proxmorph/issues/28):
+  - Fixed table hover/selection border-radius inconsistencies — removed `border-radius: var(--pm-radius-lg) !important` from `.x-grid-item-over` and `.x-grid-item-selected` rules across all derivative themes (Catppuccin ×5, Dracula ×6, Nord ×2, Solarized ×2, Gruvbox ×2, Tokyo Night, Blue Slate)
+  - Removed dedicated `border-radius: 8px !important` grid rounding block from GitHub Dark
+  - Root cause: UniFi's rounded hover/selection looked fine with its complex grid handling, but derivatives ported the radius without the supporting rules, causing visual artifacts (hover backgrounds bleeding into adjacent row borders)
+  - Fixed hardware grid icon rendering across all 17 dark themes — replaced `filter: invert(100%)` + counter-invert approach with CSS `mask-image` SVG rendering for all `pve-itype-icon-*` (VM Hardware) and `pmx-itype-icon-*` (LXC Resources) grid cells; icons now render original SVG shapes in theme text color via `background-color: currentColor` with proper spacing matching FontAwesome icons (18px width, 10px right margin)
+  - Fixed LXC Resources tab darkened text on Memory and Cores rows — PVE 9.x uses `pmx-itype-icon-*` classes (not `pve-itype-icon-*`) on LXC Resources grid cells; the Issue #18 fix only targeted `pve-` prefixed selectors
+  - Icon types covered: cpu, memory, cdrom, pci, serial, die (VM Hardware via `/pve2/images/*.svg`) + processor, memory (LXC Resources via `../images/*.svg`)
+  - Fixed grid container border-radius clipping first/last row hover backgrounds — removed `border-radius: 12px !important` from `.x-panel-default .x-grid` and `.x-container .x-grid-view` selectors (keeping only `.pve-info-grid`), and changed `.x-grid, .x-grid-view` re-apply rule from `var(--pm-radius-lg)` to `0` across all 22 themes; root cause: `overflow: hidden` on `.x-grid` combined with `border-radius` clipped hover/selection backgrounds at rounded corners of first and last grid rows
+- **All Themes (21 files)** — Issue [#30](https://github.com/IT-BAER/proxmorph/issues/30):
+  - Fixed toolbar buttons (Shutdown, Console, More, etc.) vibrating/changing width when dropdown menus open — added `padding: 4px 8px !important` to `.x-btn-default-toolbar-small.x-btn.x-btn-menu-active` and `.x-btn-default-toolbar-small.x-btn.x-btn-pressed` rules across all themes; root cause: ExtJS default CSS increases padding from `4px 8px` to `4px 10px` on menu-active/pressed state, causing a 4px total width increase
+
+## [2.4.1] - 2026-02-26
+
+### Added
+- **All Themes (19 files)** — Ported FontAwesome tool icon replacements from UniFi v5.86:
+  - Replaced sprite-based ExtJS tool icons (close, gear, refresh, collapse/expand, maximize/restore, zoom) with crisp FontAwesome glyphs
+  - Added hover, disabled, and inline FontAwesome states for consistent tool icon theming
+
+### Fixed
+- **All Themes (21 files)** — Fixed Documentation button height mismatch (Issue [#15](https://github.com/IT-BAER/proxmorph/issues/15)):
+  - Documentation/Help inline buttons (`proxmox-inline-button`) were 24px while Create VM/CT/root buttons were 28px — added explicit `height: 28px`, `display: flex`, `align-items: center`, and consistent padding to `.proxmox-inline-button` across all themes
+- **All Themes (19 files)** — Issue [#23](https://github.com/IT-BAER/proxmorph/issues/23):
+  - Fixed summary panel data values (Status, CPU, Memory, etc.) being invisible on node/VM/storage summary pages — removed `max-width: calc(50% - 10px)` constraint on `.x-panel.x-column` that clipped ExtJS-calculated inner widths, restoring native stacked vertical layout
+- **UniFi Theme** — Issue [#19](https://github.com/IT-BAER/proxmorph/issues/19), Issue [#20](https://github.com/IT-BAER/proxmorph/issues/20):
+  - Fixed Maximum/Average segmented toggle buttons having incorrect rounded interior corners and hover border overlapping adjacent button
+  - Fixed hover glow effect on Max/Avg toggle being cut off due to missing padding/overflow
+- **Blue Slate Theme** — Issue [#26](https://github.com/IT-BAER/proxmorph/issues/26):
+  - Fixed inconsistent dotted borders between dropdown list elements
+- **UniFi Theme** (v5.94) — Issue [#11](https://github.com/IT-BAER/proxmorph/issues/11):
+  - Fixed PBS summary panel clipping after "Boot Mode" row — reduced widget padding (5px→3px) and added PBS-specific body padding rule
+  - Fixed CPU/RAM icons not loading on PBS — changed absolute paths (`/pve2/`, `/pwt/`) to relative paths (`../images/`) for PVE+PBS compatibility
+  - Fixed grid status icons (`.good`/`.warning`/`.critical`) showing grey instead of green/yellow/red — added specificity-matched color overrides after the broad `.fa` color rule
+  - Increased navigation tree icon-to-label gap (margin-left 20px→28px) for better readability
+
+## [2.4.0] - 2026-02-25
+
+### Added
+- **7 New Theme Collections** — contributed by [@W0CHP](https://github.com/W0CHP) ([PR #12](https://github.com/IT-BAER/proxmorph/pull/12)):
+  - Gruvbox Dark — warm retro groove colors with yellow accent
+  - Gruvbox Light — light variant of Gruvbox palette
+  - Nord Dark — arctic, bluish-cold palette from Nord
+  - Nord Light — light variant of Nord palette
+  - Solarized Dark — dark variant of precision colors for machines
+  - Solarized Light — light variant of Solarized palette
+  - Tokyo Night — dark theme inspired by Tokyo's neon lights
+
+### Changed
+- **Installer** (`install.sh`) — contributed by [@W0CHP](https://github.com/W0CHP):
+  - Now prioritizes local script directory over `/opt/proxmorph` cache for development workflows
+  - Syncs themes and JS patches to `/opt/proxmorph/` cache when installing from local source
+  - Improved theme discovery for dynamic registration
+
+### Fixed
+- **Light Themes** (Nord/Gruvbox/Solarized Light):
+  - Removed dark mode icon inversions (`filter: invert(90%)`) that caused icons to appear washed out
+  - Removed logo inversion (`filter: invert(1) hue-rotate(180deg)`) for proper display on light backgrounds
+  - Removed brightness filters designed for dark backgrounds
+- **Variable Prefixes** (all new themes):
+  - Replaced inherited `--drac-*` prefix with theme-specific prefixes (`--grv-*`, `--nord-*`, `--sol-*`, `--tn-*`)
+
+## [2.3.0] - 2026-02-21
+
+### Added
+- **Catppuccin Theme Collection** (5 themes):
+  - Catppuccin Mocha — darkest flavor with mauve accent
+  - Catppuccin Macchiato — mid-dark flavor with blue-tinted base
+  - Catppuccin Frappé — lightest dark flavor with muted blue base
+  - Catppuccin Latte — official light variant with purple accent
+  - Catppuccin Mocha Teal — Mocha palette with teal accent
+- **Dracula Theme Collection** (6 themes):
+  - Dracula — classic dark with purple accent
+  - Dracula Pink — pink accent variant
+  - Dracula Cyan — cyan accent variant
+  - Dracula Midnight — near-black backgrounds from Dracula UI spec
+  - Dracula Green — forest-tinted backgrounds with green accent
+  - Dracula Orange — warm-tinted backgrounds with orange accent
+- **Variant Generator** (`generate-variants.ps1`) for creating theme variants from templates
+- Screenshots for all 14 themes in README gallery
+
+### Fixed
+- **UniFi Theme** — Issue [#9](https://github.com/IT-BAER/proxmorph/issues/9):
+  - Fixed shrunken text boxes in Notes edit and other input fields (PR [#10](https://github.com/IT-BAER/proxmorph/pull/10) by [@drafty46](https://github.com/drafty46))
+- **Chart Layout** (all new themes + GitHub Dark):
+  - Fixed RRD chart panels stacking in single column instead of 2-column grid
+  - Root cause: `padding: 0 !important` on `.x-panel` overrode ExtJS inline `padding: 5px`, triggering a scrollbar-induced sub-pixel overflow feedback loop (2×790px panels > 1579.6px container)
+  - Solution: Added `.x-panel.x-column` rule with `max-width: calc(50% - 10px)`, `margin: 5px`, and `padding: 5px` to prevent overflow
+  - Removed `:not(.x-draw-container)` from column border selector — chart panels (proxmoxRRDChart) have the `.x-draw-container` class and were incorrectly excluded from card styling
+
+## [2.2.5] - 2026-01-26
+
+### Fixed
+- **UniFi Theme (v5.93)** — Issue [#1](https://github.com/IT-BAER/proxmorph/issues/1):
+  - Fixed task viewer/log viewer issues: content not visible on open, scrollbar not clickable, no auto-scroll to bottom
+  - Root cause: `overflow: visible !important` rule on `.x-window .x-panel-body` completely broke native ExtJS scroll handling
+  - Solution: **Removed the problematic overflow rule entirely** - the rule was added for "modal clipping" but caused more issues than it solved
+  - Increased scrollbar width from 8px to 12px for better clickability (was hard to click near window edge)
+- **UniFi Theme (v5.90)**:
+  - Fixed migrate icon missing in resource tree when VM/CT is being migrated
+  - Root cause: `.running::after` rule (green status dot) has `content: "\f111" !important` which overrides `.lock-migrate::after` content when both classes are present
+  - Solution: Added more specific `.running.lock-migrate::after` selector that shows the migrate icon (paper-plane) with amber color
+  - Also added rules for `.lock-backup` and `.lock-suspending` states
+- **UniFi Theme (v5.89)** — Issue [#3](https://github.com/IT-BAER/proxmorph/issues/3):
+  - Fixed delete dialog warning text "Referenced disks will always be destroyed." being cut off
+  - Root cause: ExtJS box layout set narrow container width (236px) causing text wrap, then 0px height due to absolute positioning
+  - Solution: Added `white-space: nowrap` to `.pmx-hint` to keep text on single line
+
+## [2.2.4] - 2026-01-21
+
+### Fixed
+- **Installer** — Issue [#5](https://github.com/IT-BAER/proxmorph/issues/5):
+  - Fixed `sed` delimiter issue during uninstall that caused "extra characters after command" error (PR #6 by @jiriteach)
+  - Root cause: Marker text `<!-- /ProxMorph JS Patches -->` contained `/` which conflicted with sed's default delimiter
+  - Solution: Use `|` as alternate delimiter and properly escape special regex characters
+- **UniFi Theme (v5.88)** — Issue [#4](https://github.com/IT-BAER/proxmorph/issues/4):
+  - Fixed "Finish Edit" checkmark button appearing on tags when not in edit mode
+  - Root cause: `.x-btn-default-small { display: flex !important }` overrode Proxmox's inline `display: none`
+  - Solution: Added rule to respect inline `display: none` styles for dynamically hidden buttons
+  - Fixed dark text on tags in edit mode (e.g., teal `testesteste` tag had black text)
+  - Tags now always use light text (#F9FAFA) when in edit mode, regardless of `proxmox-tag-dark` classification
+  - Fixed "More" button position in IPs section not visible (was positioned off-screen)
+  - Corrected transform value from -430px to -242px to align with current PVE 9.x layout
+
+## [2.2.3] - 2026-01-20
+
+### Fixed
+- **Installer**:
+  - Improved PVE version detection to report specific manager version (e.g., v9.1.4) instead of metapackage version (v9.1.0)
+  - Suppressed misleading "Themes directory not found" error during one-liner (`curl | bash`) installations
+  - Added robust guards for script path detection via `BASH_SOURCE`
+
+## [2.2.2] - 2026-01-20
+
+### Added
+- **Proxmox Backup Server (PBS) Support** — Issue [#2](https://github.com/IT-BAER/proxmorph/issues/2):
+  - The installer now officially supports PBS (v3.x/4.x)
+  - Auto-detects product (PVE or PBS) and adjusts paths automatically
+  - Native integration with PBS theme selector
+  - Persistence across PBS updates via apt hook
+  - JavaScript patches support for PBS template format (.hbs)
+
+## [2.2.1] - 2026-01-20
+
+### Fixed
+- **Apt Hook**:
+  - Fixed `[[: not found` syntax error in `post-update.sh` by enforcing POSIX compliance (ensures compatibility with `dash`/`sh`)
+- **GitHub Dark Theme**:
+  - **Tree/Toolbox Highlights**:
+    - Ported authentic UniFi highlight mechanism (using pseudo-elements) to fix "double background" and text artifacts
+  - **Structural Alignment**:
+    - Ported UniFi border structures (radius, padding, layout) to Windows, Panels, and Fieldsets while preserving GitHub colors
+  - **Resource Tree**:
+    - Removed default blue focus borders
+    - Aligned cell padding with UniFi standards
+- **UniFi Theme (v5.85)**:
+  - Fixed horizontal scrollbar in resource tree (1px overflow caused by CSS specificity conflict)
+  - Added scrollbar corner styling to eliminate white square artifact at corner intersection
+- **UniFi Theme (v5.87)**:
+  - Fixed "More" button position in IPs section of Summary panel for variable IP count
+  - Button now correctly positioned next to "IPs" label regardless of whether 1, 2, or more IPs are displayed
+  - Root cause: ExtJS dynamically sets button's `top` based on container height
+  - Solution: Anchor to `top: 0` then use consistent transform for fine positioning
+  - Added overflow:visible to parent containers to prevent clipping
+
+### Added
+- **UniFi Theme (v5.86)**:
+  - Replaced sprite-based ExtJS tool icons with crisp FontAwesome icons:
+    - Zoom out (undo zoom), collapse/expand panel chevrons
+    - Maximize/restore window icons
+    - Gear (settings) and refresh icons
+  - Distinct icons for collapse vs expand states (chevron direction indicates action)
+  - Added styling for generic inline FontAwesome tool icons (e.g., "Reset form data" button)
+  - Fixed disabled tool icon mask overlay (transparent background, non-blocking pointer events)
+- **Chart Hover Dots**:
+  - Added subtle white border (1px) to chart data point dots when hovered
+  - Improves visibility of hover state against colored fills
+
+## [2.2.0] - 2026-01-18
+
+### Added
+- **JavaScript Chart Patching**:
+  - Implemented `unifi-charts.js` to dynamically patch Proxmox RRD charts
+  - Adds true UniFi color palette validation (Green/Blue) to charts
+  - Solves "Network Traffic" chart blending issues by layering areas correctly
+- **Installation**:
+  - `install.sh` now installs JavaScript patches to `/usr/share/pve-manager/js/proxmorph/`
+  - persistence across PVE updates via APT hook (post-update re-patching)
+
+## [2.1.1] - 2026-01-18
+
+### Fixed
+- **UniFi Theme**: 
+  - Fixed "More" button alignment in guest summary panel
+  - Corrected width and layout of confirmation dialogs (message boxes)
+  - Fixed window header close icon positioning
+  - Fixed checkbox label visibility and alignment in dialogs
+
+## [2.0.2] - 2026-01-14
+
+### Fixed
+- Column panel gap in dialog forms (Edit Network Device, etc.)
+  - Added visible 25px gap between left and right form columns
+  - Removed width override that was forcing columns to full width
+  - Removed padding reset that was eliminating the gap
+
+## [2.0.1] - 2026-01-13
+
+### Fixed
+- Resource grid labels (Memory, Cores) no longer appear dark gray
+  - Root cause: `filter: invert(90%)` on TD cells was inverting both icons AND text
+  - Solution: Isolated filter to icons via `::before` pseudo-elements
+- FontAwesome icons in resource grid (Swap, Root Disk) now use bright color (#DEE0E3)
+
+## [2.0.0] - 2026-01-13
+
+### Changed
+- **BREAKING**: Removed SASS build system in favor of direct CSS patching
+- Theme creation now uses PowerShell scripts that patch the original Proxmox CSS
+- GitHub Dark theme completely rewritten using official GitHub CSS variables
+
+### Added
+- `generate_github_dark.ps1` - PowerShell script to generate GitHub Dark theme
+- `themes/original-proxmox-dark.css` - Base Proxmox Dark CSS for patching
+
+### Removed
+- SASS source files (`sass/` directory)
+- `build.sh` - No longer needed
+- Emerald Night theme (deprecated)
+
+## [1.1.1] - 2026-01-13
+
+### Fixed
+- LXC/QEMU container icons in treelist navigation now have transparent background
+- Grid table headers no longer clipped on panels with title bars (VNets, etc.)
+- Summary page widget panels (Health, Guests, Resources) now have rounded borders
+
+## [1.1.0] - 2026-01-12
+
+### Added
+- Modal dialog open animations with background blur effect
+- Custom FontAwesome tree expander arrows (chevrons)
+- Custom checkboxes and radio buttons (UniFi-style)
+- FontAwesome close button icons (replacing pixelated sprites)
+- Smooth scrolling throughout the interface
+
+### Changed
+- Resource tree tags now match search table tag height (19px)
+- Grid table cells now vertically center text
+- Treelist items use consistent 4px border-radius
+- Reduced window shadow intensity for cleaner look
+- Improved status panel padding alignment
+- Login modal form fields now use full width
+- Login modal footer uses flexbox for proper spacing
+
+### Fixed
+- Hidden ExtJS shadow element causing hard shadow edges
+- Boundlist dropdown clipping issues
+- Icon-only button width issues
+- Segmented button text visibility on pressed state
+- Modal dialog content being cut off
+- Tab focus border removed for cleaner look
+- Bulk Actions dropdown button styling
+- Floating grid picker border-radius
+
+## [1.0.0] - 2026-01-08
+
+### Added
+- Initial release of ProxMorph theme collection
+- UniFi-inspired dark theme for Proxmox VE 8.x/9.x
+- Blue Slate minimal baseline theme
+- Automatic integration with Proxmox Color Theme selector
+- Install/uninstall script with backup functionality

README.md

@@ -0,0 +1,175 @@
+# ProxMorph
+
+Custom themes for Proxmox VE (PVE), Proxmox Backup Server (PBS), and Proxmox Datacenter Manager (PDM) that integrate with the native Color Theme selector.
+
+## ✨ Features
+
+- **Native Integration** - Themes appear in built-in Color Theme dropdown (PVE, PBS, and PDM)
+- **Auto-Patch on Updates** - Automatically re-applies themes after product updates
+- **Hybrid Engine** - CSS for styling + JavaScript for dynamic chart patching
+- **Hardware Sensor Monitoring** - Optional CPU/storage temps, fan speeds, and UPS status on node Summary dashboard (PVE)
+- **Easy Installation** - Single command installation for PVE, PBS, and PDM
+
+## 📸 Screenshot
+
+Comparison between default Proxmox Dark theme and UniFi theme:
+
+![Proxmox Dark vs UniFi Theme](screenshots/Screenshot.png)
+
+## 🎨 Themes
+
+**22 themes** across 9 collections. Featured themes below — [**View Full Gallery →**](THEMES.md)
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>UniFi</h3>
+      <img src="screenshots/unifi.png" alt="UniFi Theme" width="100%">
+      <br>
+      <i>Inspired by Ubiquiti UniFi Network Application</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula</h3>
+      <img src="screenshots/dracula.png" alt="Dracula Theme" width="100%">
+      <br>
+      <i>Classic Dracula dark with purple accent</i>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Mocha</h3>
+      <img src="screenshots/catppuccin-mocha.png" alt="Catppuccin Mocha Theme" width="100%">
+      <br>
+      <i>Darkest Catppuccin flavor — deep warm tones</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Nord Dark</h3>
+      <img src="screenshots/nord-dark.png" alt="Nord Dark Theme" width="100%">
+      <br>
+      <i>Arctic dark palette with polar blue accent</i>
+    </td>
+  </tr>
+</table>
+
+<details>
+<summary><strong>All Available Collections</strong></summary>
+
+| Collection | Themes |
+|------------|--------|
+| Catppuccin | Mocha, Mocha Teal, Macchiato, Frappé, Latte |
+| Dracula | Classic, Midnight, Pink, Cyan, Green, Orange |
+| Nord | Dark, Light |
+| Gruvbox | Dark, Light |
+| Solarized | Dark, Light |
+| Tokyo Night | — |
+| UniFi | Dark, Light |
+| GitHub Dark | — |
+| Blue Slate | — |
+
+</details>
+
+## 🚀 Installation
+
+### One-Liner Install
+
+```bash
+bash <(curl -fsSL https://raw.githubusercontent.com/IT-BAER/proxmorph/main/install.sh) install
+```
+
+### Manual Install
+
+```bash
+git clone https://github.com/IT-BAER/proxmorph.git
+cd proxmorph
+chmod +x install.sh
+./install.sh install
+```
+
+### Apply Theme
+
+1. Hard refresh browser (Ctrl+Shift+R)
+2. Click username → Color Theme
+3. Select a ProxMorph theme
+
+## 💻 Commands
+
+| Command | Description |
+|---------|-------------|
+| `./install.sh install` | Install themes |
+| `./install.sh uninstall` | Remove themes |
+| `./install.sh update` or `bash <(curl -fsSL https://raw.githubusercontent.com/IT-BAER/proxmorph/main/install.sh) update` | Updates (latest from GitHub) and install the latest themes |
+| `./install.sh status` | Show installation status |
+| `./install.sh` | Shows Menu to manage|
+
+## 🛠️ Creating Themes
+
+1. Copy an existing theme from `themes/`
+2. Rename to `theme-yourname.css`
+3. Edit the first line: `/*!Your Theme Name*/`
+4. Modify CSS styles
+5. Run `./install.sh install`
+
+Theme files must start with `/*!Display Name*/` - this sets the name in Proxmox's dropdown.
+
+## ❓ Troubleshooting
+
+### Themes not appearing in Color Theme dropdown
+
+If themes don't appear after installation:
+
+1. **Clear browser cache** — Press Ctrl+Shift+R (hard refresh)
+2. **Run verify check** — Run `./install.sh` and select option 7 (Verify installation)
+3. **Check installation status** — Run `./install.sh status`
+4. **Restart proxy service** — Run `systemctl restart pveproxy` (PVE), `systemctl restart proxmox-backup-proxy` (PBS), or `systemctl restart proxmox-datacenter-api` (PDM)
+
+### Cloudflare Tunnel caching issues
+
+If you access Proxmox through a **Cloudflare Tunnel**, themes may not load due to aggressive caching. To fix:
+
+1. Log in to [Cloudflare Dashboard](https://dash.cloudflare.com/) and select your domain
+2. Navigate to **Caching → Cache Rules**
+3. Click **Create rule**
+4. Set **Hostname** to your Proxmox subdomain (e.g., `proxmox.example.com`)
+5. Set **Cache eligibility** to **Bypass cache**
+6. Save and deploy the rule
+
+See [Issue #13](https://github.com/IT-BAER/proxmorph/issues/13) for more details — thanks to [@gioxx](https://github.com/gioxx) for the solution!
+
+## ℹ️ How It Works
+
+**PVE / PBS:**
+1. Theme CSS files are copied to `/usr/share/javascript/proxmox-widget-toolkit/themes/`
+2. JavaScript patches (for charts) are installed to product-specific JS directories
+3. `proxmoxlib.js` is patched to register themes, and product index templates (`.tpl` or `.hbs`) are patched to load JS patches
+4. An apt hook automatically re-patches after product updates
+5. Themes appear in the native Color Theme selector
+
+**PDM:**
+1. PDM-specific CSS override themes are installed to `/usr/share/javascript/proxmox-datacenter-manager/proxmorph-themes/`
+2. `<link>` tags are injected into `index.hbs` (disabled by default, activated by JavaScript)
+3. A theme selector JS patch adds ProxMorph themes to PDM's native Theme dialog
+4. Selected theme is persisted in `localStorage` and activated before WASM loads
+
+## 📦 Supported Versions
+
+- Proxmox VE 9.x / 8.x
+- Proxmox Backup Server 4.x / 3.x
+- Proxmox Datacenter Manager 1.x
+
+## 📄 License
+
+MIT License
+
+<br>
+
+## 💜 Support
+
+If you like my themes, consider supporting this and future work, which heavily relies on coffee:
+
+<div align="center">
+<a href="https://www.buymeacoffee.com/itbaer" target="_blank"><img src="https://github.com/user-attachments/assets/64107f03-ba5b-473e-b8ad-f3696fe06002" alt="Buy Me A Coffee" style="height: 60px; max-width: 217px;"></a>
+<br>
+<a href="https://www.paypal.com/donate/?hosted_button_id=5XXRC7THMTRRS" target="_blank">Donate via PayPal</a>
+</div>
+
+<br>

THEMES.md

@@ -0,0 +1,401 @@
+# ProxMorph Theme Gallery
+
+Complete gallery of all available ProxMorph themes for Proxmox VE, PBS, and PDM.
+
+**Quick Links:** [Installation](README.md#-installation) | [Creating Themes](README.md#-creating-themes) | [Troubleshooting](README.md#-troubleshooting)
+
+> **PVE/PBS** screenshots are shown first, followed by the [PDM gallery](#proxmox-datacenter-manager-pdm).
+
+---
+
+## Catppuccin Collection
+
+Soothing pastel themes based on the [Catppuccin](https://github.com/catppuccin/catppuccin) color palette.
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Mocha</h3>
+      <img src="screenshots/catppuccin-mocha.png" alt="Catppuccin Mocha Theme" width="100%">
+      <br>
+      <i>Darkest Catppuccin flavor — deep warm tones with mauve accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Catppuccin Mocha Teal</h3>
+      <img src="screenshots/catppuccin-mocha-teal.png" alt="Catppuccin Mocha Teal Theme" width="100%">
+      <br>
+      <i>Mocha palette with teal accent</i>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Macchiato</h3>
+      <img src="screenshots/catppuccin-macchiato.png" alt="Catppuccin Macchiato Theme" width="100%">
+      <br>
+      <i>Mid-dark Catppuccin flavor with blue-tinted base</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Catppuccin Frappé</h3>
+      <img src="screenshots/catppuccin-frappe.png" alt="Catppuccin Frappé Theme" width="100%">
+      <br>
+      <i>Lightest dark Catppuccin flavor with muted blue base</i>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Latte</h3>
+      <img src="screenshots/catppuccin-latte.png" alt="Catppuccin Latte Theme" width="100%">
+      <br>
+      <i>Official light variant — warm off-white with purple accent</i>
+    </td>
+    <td width="50%"></td>
+  </tr>
+</table>
+
+---
+
+## Dracula Collection
+
+Dark themes based on the iconic [Dracula](https://draculatheme.com/) color scheme.
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Dracula</h3>
+      <img src="screenshots/dracula.png" alt="Dracula Theme" width="100%">
+      <br>
+      <i>Classic Dracula dark with purple accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula Midnight</h3>
+      <img src="screenshots/dracula-midnight.png" alt="Dracula Midnight Theme" width="100%">
+      <br>
+      <i>Near-black backgrounds from the Dracula UI spec</i>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Dracula Pink</h3>
+      <img src="screenshots/dracula-pink.png" alt="Dracula Pink Theme" width="100%">
+      <br>
+      <i>Dracula palette with pink accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula Cyan</h3>
+      <img src="screenshots/dracula-cyan.png" alt="Dracula Cyan Theme" width="100%">
+      <br>
+      <i>Dracula palette with cyan accent</i>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Dracula Green</h3>
+      <img src="screenshots/dracula-green.png" alt="Dracula Green Theme" width="100%">
+      <br>
+      <i>Forest-tinted backgrounds with green accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula Orange</h3>
+      <img src="screenshots/dracula-orange.png" alt="Dracula Orange Theme" width="100%">
+      <br>
+      <i>Warm-tinted backgrounds with orange accent</i>
+    </td>
+  </tr>
+</table>
+
+---
+
+## Nord Collection
+
+Arctic, bluish-cold themes based on the [Nord](https://www.nordtheme.com/) color palette.
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Nord Dark</h3>
+      <img src="screenshots/nord-dark.png" alt="Nord Dark Theme" width="100%">
+      <br>
+      <i>Arctic dark palette with polar blue accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Nord Light</h3>
+      <img src="screenshots/nord-light.png" alt="Nord Light Theme" width="100%">
+      <br>
+      <i>Snow-bright variant with frost blue tones</i>
+    </td>
+  </tr>
+</table>
+
+---
+
+## Gruvbox Collection
+
+Retro groove themes based on the warm [Gruvbox](https://github.com/morhetz/gruvbox) palette.
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Gruvbox Dark</h3>
+      <img src="screenshots/gruvbox-dark.png" alt="Gruvbox Dark Theme" width="100%">
+      <br>
+      <i>Warm retro groove colors with yellow accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Gruvbox Light</h3>
+      <img src="screenshots/gruvbox-light.png" alt="Gruvbox Light Theme" width="100%">
+      <br>
+      <i>Soft sepia variant with earthy tones</i>
+    </td>
+  </tr>
+</table>
+
+---
+
+## Solarized Collection
+
+Precision colors designed for machines and humans, based on [Solarized](https://ethanschoonover.com/solarized/).
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Solarized Dark</h3>
+      <img src="screenshots/solarized-dark.png" alt="Solarized Dark Theme" width="100%">
+      <br>
+      <i>Dark variant with cyan/blue accent</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Solarized Light</h3>
+      <img src="screenshots/solarized-light.png" alt="Solarized Light Theme" width="100%">
+      <br>
+      <i>Cream-colored light variant</i>
+    </td>
+  </tr>
+</table>
+
+---
+
+## Tokyo Night
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Tokyo Night</h3>
+      <img src="screenshots/tokyo-night.png" alt="Tokyo Night Theme" width="100%">
+      <br>
+      <i>Dark theme inspired by Tokyo's neon lights</i>
+    </td>
+    <td width="50%"></td>
+  </tr>
+</table>
+
+---
+
+## UniFi Collection
+
+Clean, modern themes inspired by the [Ubiquiti UniFi](https://ui.com/) Network Application interface.
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>UniFi</h3>
+      <img src="screenshots/unifi.png" alt="UniFi Theme" width="100%">
+      <br>
+      <i>Dark theme inspired by Ubiquiti UniFi Network Application</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>UniFi Light</h3>
+      <img src="screenshots/unifi-light.png" alt="UniFi Light Theme" width="100%">
+      <br>
+      <i>Light variant with clean white surfaces and blue accent</i>
+    </td>
+  </tr>
+</table>
+
+---
+
+## Other Themes
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>GitHub Dark</h3>
+      <img src="screenshots/github-dark.png" alt="GitHub Dark Theme" width="100%">
+      <br>
+      <i>Based on GitHub Dark Dimmed theme</i>
+    </td>
+    <td width="50%" align="center">
+      <h3>Blue Slate</h3>
+      <img src="screenshots/blue-slate.png" alt="Blue Slate Theme" width="100%">
+      <br>
+      <i>Cool blue-gray tones with slate accent</i>
+    </td>
+  </tr>
+</table>
+
+---
+
+## Proxmox Datacenter Manager (PDM)
+
+All themes are also available for Proxmox Datacenter Manager 1.x.
+
+### PDM — Catppuccin Collection
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Mocha</h3>
+      <img src="screenshots/pdm-catppuccin-mocha.png" alt="PDM Catppuccin Mocha Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Catppuccin Mocha Teal</h3>
+      <img src="screenshots/pdm-catppuccin-mocha-teal.png" alt="PDM Catppuccin Mocha Teal Theme" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Macchiato</h3>
+      <img src="screenshots/pdm-catppuccin-macchiato.png" alt="PDM Catppuccin Macchiato Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Catppuccin Frappé</h3>
+      <img src="screenshots/pdm-catppuccin-frappe.png" alt="PDM Catppuccin Frappé Theme" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Catppuccin Latte</h3>
+      <img src="screenshots/pdm-catppuccin-latte.png" alt="PDM Catppuccin Latte Theme" width="100%">
+    </td>
+    <td width="50%"></td>
+  </tr>
+</table>
+
+### PDM — Dracula Collection
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Dracula</h3>
+      <img src="screenshots/pdm-dracula.png" alt="PDM Dracula Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula Midnight</h3>
+      <img src="screenshots/pdm-dracula-midnight.png" alt="PDM Dracula Midnight Theme" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Dracula Pink</h3>
+      <img src="screenshots/pdm-dracula-pink.png" alt="PDM Dracula Pink Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula Cyan</h3>
+      <img src="screenshots/pdm-dracula-cyan.png" alt="PDM Dracula Cyan Theme" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Dracula Green</h3>
+      <img src="screenshots/pdm-dracula-green.png" alt="PDM Dracula Green Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Dracula Orange</h3>
+      <img src="screenshots/pdm-dracula-orange.png" alt="PDM Dracula Orange Theme" width="100%">
+    </td>
+  </tr>
+</table>
+
+### PDM — Nord Collection
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Nord Dark</h3>
+      <img src="screenshots/pdm-nord-dark.png" alt="PDM Nord Dark Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Nord Light</h3>
+      <img src="screenshots/pdm-nord-light.png" alt="PDM Nord Light Theme" width="100%">
+    </td>
+  </tr>
+</table>
+
+### PDM — Gruvbox Collection
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Gruvbox Dark</h3>
+      <img src="screenshots/pdm-gruvbox-dark.png" alt="PDM Gruvbox Dark Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Gruvbox Light</h3>
+      <img src="screenshots/pdm-gruvbox-light.png" alt="PDM Gruvbox Light Theme" width="100%">
+    </td>
+  </tr>
+</table>
+
+### PDM — Solarized Collection
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Solarized Dark</h3>
+      <img src="screenshots/pdm-solarized-dark.png" alt="PDM Solarized Dark Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Solarized Light</h3>
+      <img src="screenshots/pdm-solarized-light.png" alt="PDM Solarized Light Theme" width="100%">
+    </td>
+  </tr>
+</table>
+
+### PDM — Tokyo Night
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>Tokyo Night</h3>
+      <img src="screenshots/pdm-tokyo-night.png" alt="PDM Tokyo Night Theme" width="100%">
+    </td>
+    <td width="50%"></td>
+  </tr>
+</table>
+
+### PDM — UniFi Collection
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>UniFi</h3>
+      <img src="screenshots/pdm-unifi.png" alt="PDM UniFi Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>UniFi Light</h3>
+      <img src="screenshots/pdm-unifi-light.png" alt="PDM UniFi Light Theme" width="100%">
+    </td>
+  </tr>
+</table>
+
+### PDM — Other Themes
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <h3>GitHub Dark</h3>
+      <img src="screenshots/pdm-github-dark.png" alt="PDM GitHub Dark Theme" width="100%">
+    </td>
+    <td width="50%" align="center">
+      <h3>Blue Slate</h3>
+      <img src="screenshots/pdm-blue-slate.png" alt="PDM Blue Slate Theme" width="100%">
+    </td>
+  </tr>
+</table>
+
+---
+
+## Contributing Themes
+
+Want to add your own theme? See the [Creating Themes](README.md#-creating-themes) section in the README.
+
+New theme contributions are welcome via Pull Request!

patch_theme_map.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+# Patch proxmoxlib.js to add UniFi theme
+FILE="/usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js"
+
+# Check if already patched
+if grep -q "unifi" "$FILE"; then
+    echo "Already patched!"
+else
+    # Use awk for multi-line insert
+    awk '/theme_map: \{/ { print; print "            '\''unifi'\'': '\''UniFi'\'',"; next }1' "$FILE" > /tmp/proxmoxlib.js.new
+    mv /tmp/proxmoxlib.js.new "$FILE"
+    echo "Patched!"
+fi
+
+# Restart pveproxy
+systemctl restart pveproxy
+echo "pveproxy restarted"
+
+echo "Current theme_map:"
+grep -A6 "theme_map:" "$FILE"

themes/patches/github-dark-init.js

@@ -0,0 +1,59 @@
+/**
+ * ProxMorph GitHub Dark — Checkbox/Radio Init Patch
+ *
+ * Problem: ExtJS pre-selects checkboxes/radios by setting background-position
+ * to "0px -15px" (sprite selected state) WITHOUT adding the .x-form-cb-checked
+ * class to the .x-form-item ancestor. Our CSS relies on that class.
+ *
+ * Fix: Scan all .x-form-cb spans, detect the -15px sprite offset, and add
+ * .x-form-cb-checked to the nearest .x-form-item ancestor so our CSS rules fire.
+ *
+ * Runs on load + via MutationObserver whenever new dialogs are added to the DOM.
+ */
+(function () {
+    'use strict';
+
+    function isGithubDarkActive() {
+        return !!document.querySelector('link[href*="theme-github-dark.css"]');
+    }
+
+    function fixInitialCbState() {
+        if (!isGithubDarkActive()) return;
+
+        document.querySelectorAll('.x-form-cb').forEach(function (span) {
+            var bgPos = window.getComputedStyle(span).backgroundPosition;
+            if (bgPos && bgPos.indexOf('-15px') !== -1) {
+                var fieldItem = span.closest('.x-form-item');
+                if (fieldItem && !fieldItem.classList.contains('x-form-cb-checked')) {
+                    fieldItem.classList.add('x-form-cb-checked');
+                }
+            }
+        });
+    }
+
+    // Run once after the page is fully loaded
+    if (document.readyState === 'complete') {
+        setTimeout(fixInitialCbState, 100);
+    } else {
+        window.addEventListener('load', function () {
+            setTimeout(fixInitialCbState, 100);
+        });
+    }
+
+    // Re-run whenever new nodes are added (dialog opens, panel navigation, etc.)
+    var observer = new MutationObserver(function (mutations) {
+        var hasNew = false;
+        for (var i = 0; i < mutations.length; i++) {
+            if (mutations[i].addedNodes.length) {
+                hasNew = true;
+                break;
+            }
+        }
+        if (hasNew) {
+            setTimeout(fixInitialCbState, 50);
+        }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+})();

themes/patches/pdm-theme-selector.js

@@ -0,0 +1,296 @@
+/*
+ * ProxMorph PDM Theme Selector Patch
+ * Version: 1.0.0
+ *
+ * Injects ProxMorph theme options into PDM's native Theme dialog dropdown.
+ * Uses MutationObserver to detect when the dialog opens and adds custom
+ * theme entries alongside the built-in Desktop/Crisp options.
+ *
+ * Theme guard: only runs if proxmorph-theme CSS links are present.
+ */
+(function() {
+    'use strict';
+
+    if (!document.querySelector('link.proxmorph-theme')) return;
+
+    var themeLinks = document.querySelectorAll('link.proxmorph-theme');
+    var themes = [];
+    for (var i = 0; i < themeLinks.length; i++) {
+        var href = themeLinks[i].getAttribute('href');
+        var filename = href.split('/').pop();
+        var name = filename.replace('theme-', '').replace('.css', '')
+            .split('-').map(function(w) { return w.charAt(0).toUpperCase() + w.slice(1); }).join(' ');
+        themes.push({ filename: filename, display: 'PM: ' + name, link: themeLinks[i] });
+    }
+
+    function activateTheme(filename) {
+        for (var i = 0; i < themeLinks.length; i++) {
+            themeLinks[i].setAttribute('disabled', '');
+        }
+        if (filename) {
+            localStorage.setItem('proxmorph-theme', filename);
+            var base = document.querySelector('link.proxmorph-base');
+            if (base) base.removeAttribute('disabled');
+            for (var j = 0; j < themeLinks.length; j++) {
+                if (themeLinks[j].href.indexOf(filename) !== -1) {
+                    themeLinks[j].removeAttribute('disabled');
+                }
+            }
+        } else {
+            localStorage.removeItem('proxmorph-theme');
+            var base = document.querySelector('link.proxmorph-base');
+            if (base) base.setAttribute('disabled', '');
+        }
+    }
+
+    function deactivateProxmorph() {
+        for (var i = 0; i < themeLinks.length; i++) {
+            themeLinks[i].setAttribute('disabled', '');
+        }
+        var base = document.querySelector('link.proxmorph-base');
+        if (base) base.setAttribute('disabled', '');
+        localStorage.removeItem('proxmorph-theme');
+    }
+
+    var patched = false;
+
+    function setupObserver() {
+        var observer = new MutationObserver(function() {
+            if (patched) return;
+            tryInject();
+        });
+        observer.observe(document.documentElement, { childList: true, subtree: true });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', setupObserver);
+    } else {
+        setupObserver();
+    }
+
+    function tryInject() {
+        var dialog = document.querySelector('dialog');
+        if (!dialog) { patched = false; return; }
+
+        var combo = dialog.querySelector('[aria-label="Select Theme"]');
+        if (!combo) return;
+
+        /* Early combo fix: override value as soon as dialog appears, before dropdown is expanded */
+        var currentThemeEarly = localStorage.getItem('proxmorph-theme');
+        if (currentThemeEarly && combo.tagName === 'INPUT' && !combo.__proxmorphPatched) {
+            for (var ei = 0; ei < themes.length; ei++) {
+                if (themes[ei].filename === currentThemeEarly) {
+                    var origDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                    origDesc.set.call(combo, themes[ei].display);
+                    Object.defineProperty(combo, 'value', {
+                        get: function() { return origDesc.get.call(this); },
+                        set: function(v) {
+                            var active = localStorage.getItem('proxmorph-theme');
+                            if (active && (v === 'Desktop' || v === 'Crisp' || v === 'Material')) {
+                                return;
+                            }
+                            origDesc.set.call(this, v);
+                        },
+                        configurable: true
+                    });
+                    combo.__proxmorphPatched = true;
+                    break;
+                }
+            }
+        }
+
+        var tables = dialog.querySelectorAll('.pwt-datatable-content');
+        var themeTable = null;
+
+        for (var t = 0; t < tables.length; t++) {
+            var rows = tables[t].querySelectorAll('tr[role="row"]');
+            for (var r = 0; r < rows.length; r++) {
+                var cellText = rows[r].textContent.trim();
+                if (cellText === 'Desktop' || cellText === 'Crisp' || cellText === 'Material') {
+                    themeTable = tables[t];
+                    break;
+                }
+            }
+            if (themeTable) break;
+        }
+
+        if (!themeTable) return;
+        if (themeTable.querySelector('[data-proxmorph-theme]')) { patched = true; return; }
+
+        var nativeRows = themeTable.querySelectorAll('tr[role="row"]');
+        var existingCount = nativeRows.length;
+
+        var idPrefix = 'ProxMorph';
+        if (nativeRows.length > 0 && nativeRows[0].id) {
+            idPrefix = nativeRows[0].id.split('-item-')[0];
+        }
+
+        var sepRow = document.createElement('tr');
+        sepRow.setAttribute('role', 'none');
+        sepRow.className = 'proxmorph-separator';
+        var sepTd = document.createElement('td');
+        sepTd.setAttribute('role', 'none');
+        sepTd.setAttribute('colspan', '2');
+        sepTd.style.cssText = 'padding:4px 0;border-top:1px solid var(--pwt-color-neutral-40,#555);';
+        var sepDiv = document.createElement('div');
+        sepDiv.style.cssText = 'font-size:11px;color:var(--pwt-color-neutral-60,#999);padding:2px 8px;';
+        sepDiv.textContent = 'ProxMorph Themes';
+        sepTd.appendChild(sepDiv);
+        sepRow.appendChild(sepTd);
+        themeTable.appendChild(sepRow);
+
+        var currentTheme = localStorage.getItem('proxmorph-theme');
+
+        for (var i = 0; i < themes.length; i++) {
+            var theme = themes[i];
+            var rowIndex = existingCount + i + 1;
+            var isSelected = currentTheme === theme.filename;
+
+            var row = document.createElement('tr');
+            row.setAttribute('role', 'row');
+            row.setAttribute('aria-rowindex', String(rowIndex));
+            row.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+            row.id = idPrefix + '-item-PM-' + theme.filename;
+            row.className = isSelected ? 'row-cursor selected' : '';
+            row.setAttribute('data-proxmorph-theme', theme.filename);
+
+            var td = document.createElement('td');
+            td.setAttribute('role', 'gridcell');
+            td.setAttribute('data-column-num', '0');
+            td.setAttribute('tabindex', '-1');
+            td.className = 'pwt-datatable-cell pwt-pointer' + (isSelected ? ' cell-cursor' : '');
+            td.style.cssText = 'vertical-align:baseline;text-align:start;';
+
+            var div = document.createElement('div');
+            div.setAttribute('role', 'none');
+            div.textContent = theme.display;
+            td.appendChild(div);
+
+            var td2 = document.createElement('td');
+            td2.setAttribute('role', 'none');
+            td2.style.cssText = 'vertical-align:top;height:22px;';
+
+            row.appendChild(td);
+            row.appendChild(td2);
+            themeTable.appendChild(row);
+
+            (function(themeObj, rowEl) {
+                rowEl.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    var allRows = themeTable.querySelectorAll('tr[role="row"]');
+                    for (var k = 0; k < allRows.length; k++) {
+                        allRows[k].className = '';
+                        allRows[k].setAttribute('aria-selected', 'false');
+                        var cells = allRows[k].querySelectorAll('.pwt-datatable-cell');
+                        for (var c = 0; c < cells.length; c++) {
+                            cells[c].classList.remove('cell-cursor');
+                        }
+                    }
+                    rowEl.className = 'row-cursor selected';
+                    rowEl.setAttribute('aria-selected', 'true');
+                    var myCell = rowEl.querySelector('.pwt-datatable-cell');
+                    if (myCell) myCell.classList.add('cell-cursor');
+
+                    activateTheme(themeObj.filename);
+
+                    var combo = dialog.querySelector('[aria-label="Select Theme"]');
+                    if (combo) {
+                        if (combo.tagName === 'INPUT') {
+                            /* Remove override temporarily to set the new value */
+                            var origDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                            delete combo.value;
+                            origDesc.set.call(combo, themeObj.display);
+                            /* Re-install override to block PWT resets */
+                            Object.defineProperty(combo, 'value', {
+                                get: function() { return origDesc.get.call(this); },
+                                set: function(v) {
+                                    var active = localStorage.getItem('proxmorph-theme');
+                                    if (active && (v === 'Desktop' || v === 'Crisp' || v === 'Material')) {
+                                        return;
+                                    }
+                                    origDesc.set.call(this, v);
+                                },
+                                configurable: true
+                            });
+                        } else {
+                            var valueSpan = combo.querySelector('.pwt-text-truncate') || combo;
+                            if (valueSpan) valueSpan.textContent = themeObj.display;
+                        }
+                    }
+                });
+            })(theme, row);
+        }
+
+        /* If a ProxMorph theme is active, deselect native rows and update combo */
+        if (currentTheme) {
+            for (var d = 0; d < nativeRows.length; d++) {
+                nativeRows[d].className = '';
+                nativeRows[d].setAttribute('aria-selected', 'false');
+                var dCells = nativeRows[d].querySelectorAll('.pwt-datatable-cell');
+                for (var dc = 0; dc < dCells.length; dc++) {
+                    dCells[dc].classList.remove('cell-cursor');
+                }
+            }
+            /* Update combo display text to active PM theme name */
+            var activeCombo = dialog.querySelector('[aria-label="Select Theme"]');
+            if (activeCombo) {
+                for (var at = 0; at < themes.length; at++) {
+                    if (themes[at].filename === currentTheme) {
+                        if (activeCombo.tagName === 'INPUT') {
+                            activeCombo.value = themes[at].display;
+                            /* Override value setter to prevent PWT from resetting to native theme name */
+                            var pmDisplay = themes[at].display;
+                            var origDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                            Object.defineProperty(activeCombo, 'value', {
+                                get: function() { return origDescriptor.get.call(this); },
+                                set: function(v) {
+                                    var active = localStorage.getItem('proxmorph-theme');
+                                    if (active && (v === 'Desktop' || v === 'Crisp' || v === 'Material')) {
+                                        return;
+                                    }
+                                    origDescriptor.set.call(this, v);
+                                },
+                                configurable: true
+                            });
+                        } else {
+                            var valSpan = activeCombo.querySelector('.pwt-text-truncate') || activeCombo;
+                            if (valSpan) valSpan.textContent = themes[at].display;
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+
+        for (var nr = 0; nr < nativeRows.length; nr++) {
+            (function(nativeRow) {
+                nativeRow.addEventListener('click', function() {
+                    deactivateProxmorph();
+                    /* Remove value override so PWT can set native theme name */
+                    var cmb = dialog.querySelector('[aria-label="Select Theme"]');
+                    if (cmb && cmb.tagName === 'INPUT') {
+                        delete cmb.value;
+                    }
+                    var pmRows = themeTable.querySelectorAll('[data-proxmorph-theme]');
+                    for (var p = 0; p < pmRows.length; p++) {
+                        pmRows[p].className = '';
+                        pmRows[p].setAttribute('aria-selected', 'false');
+                        var cells = pmRows[p].querySelectorAll('.pwt-datatable-cell');
+                        for (var c = 0; c < cells.length; c++) {
+                            cells[c].classList.remove('cell-cursor');
+                        }
+                    }
+                });
+            })(nativeRows[nr]);
+        }
+
+        patched = true;
+
+        var closeCheck = setInterval(function() {
+            if (!document.contains(themeTable)) {
+                patched = false;
+                clearInterval(closeCheck);
+            }
+        }, 500);
+    }
+})();

themes/patches/proxmorph-sensors.js

@@ -0,0 +1,468 @@
+/**
+ * ProxMorph Hardware Sensors
+ * Adds hardware sensor monitoring to the Proxmox VE node status panel.
+ * Displays CPU, NVMe, HDD temperatures, fan speeds, and UPS status
+ * in a compact single-row layout.
+ *
+ * Requires:
+ *   - lm-sensors installed on the Proxmox host
+ *   - Nodes.pm patched to expose sensor data via API
+ *   - Enabled via ProxMorph installer (--sensors flag)
+ *
+ * Data flow:
+ *   1. Nodes.pm runs `sensors -j` and exposes sensorsOutput in API
+ *   2. PVE.node.StatusView fetches /api2/json/nodes/{node}/status
+ *   3. Our override injects a single "Sensors" item reading that field
+ *   4. Combined renderer parses JSON and produces compact themed HTML
+ *
+ * Supports:
+ *   - Intel (coretemp-isa-*) and AMD (k10temp-pci-*) CPU temperatures
+ *   - NVMe drive temperatures (nvme-pci-*)
+ *   - HDD/SATA drive temperatures (drivetemp-scsi-*)
+ *   - Fan speeds (recursive detection of fan*_input keys)
+ *   - UPS status via NUT (upsc) — optional, shown inline when present
+ *
+ * Version: 1.2.0
+ */
+(function () {
+    'use strict';
+
+    // ─── Configuration ─────────────────────────────────────────────
+    var SENSOR_UNIT = 'C'; // 'C' or 'F'
+
+    // ─── Sensor Filter (populated from API on store load) ──────────
+    // null = no filter (show all), otherwise object with chip:label keys
+    var activeSensorFilter = null;
+
+    function isSensorAllowed(chipKey, label) {
+        if (!activeSensorFilter) return true;
+        return activeSensorFilter[chipKey + ':' + label] === true;
+    }
+
+    function parseSensorFilter(raw) {
+        if (!raw || typeof raw !== 'string' || raw.trim() === '') return null;
+        var filter = {};
+        raw.split('\n').forEach(function (line) {
+            line = line.trim();
+            if (line !== '') filter[line] = true;
+        });
+        return Object.keys(filter).length > 0 ? filter : null;
+    }
+
+    // ─── CSS Variable Reader ───────────────────────────────────────
+    function getThemeColors() {
+        var cs = getComputedStyle(document.documentElement);
+        return {
+            text:    cs.getPropertyValue('--pm-text').trim()    || '#e5e7eb',
+            textDim: cs.getPropertyValue('--pm-text-dim').trim() || '#9ca3af',
+            warning: cs.getPropertyValue('--pm-warning').trim() || '#f5a623',
+            error:   cs.getPropertyValue('--pm-error').trim()   || '#f03a3e',
+            success: cs.getPropertyValue('--pm-success').trim() || '#37be5f',
+            accent:  cs.getPropertyValue('--pm-accent').trim()  || '#006eff'
+        };
+    }
+
+    // ─── Temperature Helpers ───────────────────────────────────────
+    function formatTemp(celsius) {
+        if (celsius === null || celsius === undefined || isNaN(celsius)) return '—';
+        var val = SENSOR_UNIT === 'F' ? (celsius * 9 / 5) + 32 : celsius;
+        return Ext.util.Format.number(val, '0.#') + '°' + SENSOR_UNIT;
+    }
+
+    function tempColor(temp, max, crit, colors) {
+        if (crit !== null && temp >= crit) return colors.error;
+        if (max !== null && temp >= max)  return colors.warning;
+        return colors.text;
+    }
+
+    // ─── JSON Parser ───────────────────────────────────────────────
+    function parseSensorsJSON(raw) {
+        if (!raw || typeof raw !== 'string') return null;
+        try {
+            var cleaned = raw
+                .replace(/,(\s*[}\]])/g, '$1')
+                .replace(/\bNaN\b/g, 'null')
+                .replace(/\bERROR\b[^\n]*/g, '');
+            return JSON.parse(cleaned);
+        } catch (e) {
+            console.warn('[ProxMorph Sensors] JSON parse error:', e.message);
+            return null;
+        }
+    }
+
+    // ─── Inline HTML Helpers ───────────────────────────────────────
+    function tag(text, color, bold) {
+        var s = 'color:' + color + ';';
+        if (bold) s += 'font-weight:600;';
+        return '<span style="' + s + '">' + text + '</span>';
+    }
+
+    function sep(colors) {
+        return '<span style="color:' + colors.textDim + ';opacity:0.4;margin:0 6px;">|</span>';
+    }
+
+    // ─── Combined Sensors Renderer ─────────────────────────────────
+    // Produces a compact single-line output: CPU | NVMe | Fan
+    // Only sections with data are shown — no "No X detected" clutter.
+    function renderSensors(value, record) {
+        // Read filter from the StatusView's store (resolves timing issue where
+        // our store.on('load') fires after ExtJS already called this renderer)
+        try {
+            var store = (record && record.store) ? record.store : null;
+            if (!store) {
+                var widget = Ext.ComponentQuery.query('#sensors')[0];
+                if (widget && widget.ownerCt && widget.ownerCt.getStore) {
+                    store = widget.ownerCt.getStore();
+                }
+            }
+            if (store) {
+                var filterRec = store.findRecord('key', 'sensorsFilter');
+                activeSensorFilter = filterRec ? parseSensorFilter(filterRec.get('value')) : null;
+            }
+        } catch (e) { /* filter stays as-is */ }
+
+        var data = parseSensorsJSON(value);
+        var colors = getThemeColors();
+        if (!data) return tag('N/A', colors.textDim);
+
+        var sections = [];
+
+        // ── CPU Temperature ─────────────────────────────────────
+        var cpuChips = Object.keys(data).filter(function (k) {
+            return k.indexOf('coretemp-isa-') === 0 ||
+                   k.indexOf('k10temp-pci-')  === 0;
+        });
+
+        cpuChips.forEach(function (chipKey) {
+            var chip = data[chipKey];
+            var pkgTemp = null, pkgMax = null, pkgCrit = null;
+            var coreTemps = [];
+
+            Object.keys(chip).forEach(function (label) {
+                if (label === 'Adapter') return;
+                if (!isSensorAllowed(chipKey, label)) return;
+                var sensor = chip[label];
+                if (!sensor || typeof sensor !== 'object') return;
+
+                var inputKey = null, maxKey = null, critKey = null;
+                Object.keys(sensor).forEach(function (k) {
+                    if (/^temp\d+_input$/.test(k))     inputKey = k;
+                    else if (/^temp\d+_max$/.test(k))  maxKey = k;
+                    else if (/^temp\d+_crit$/.test(k)) critKey = k;
+                });
+                if (!inputKey) return;
+
+                var temp = sensor[inputKey];
+                if (temp === null || temp === undefined) return;
+
+                if (/Package|Tctl|Tdie/i.test(label)) {
+                    pkgTemp = temp;
+                    pkgMax  = maxKey  ? sensor[maxKey]  : null;
+                    pkgCrit = critKey ? sensor[critKey] : null;
+                } else {
+                    coreTemps.push({
+                        label: label,
+                        temp: temp,
+                        max:  maxKey  ? sensor[maxKey]  : null,
+                        crit: critKey ? sensor[critKey] : null
+                    });
+                }
+            });
+
+            if (pkgTemp !== null) {
+                var color = tempColor(pkgTemp, pkgMax, pkgCrit, colors);
+                var txt = 'CPU: ' + formatTemp(pkgTemp);
+                if (coreTemps.length > 0) txt += ' (' + coreTemps.length + ' cores)';
+                sections.push(tag(txt, color));
+            } else if (coreTemps.length > 0) {
+                if (activeSensorFilter) {
+                    // Filter active: show each selected core individually
+                    coreTemps.forEach(function (core) {
+                        var color = tempColor(core.temp, core.max, core.crit, colors);
+                        sections.push(tag(core.label + ': ' + formatTemp(core.temp), color));
+                    });
+                } else {
+                    var maxT = Math.max.apply(null, coreTemps.map(function (c) { return c.temp; }));
+                    var color = tempColor(maxT, 80, 95, colors);
+                    sections.push(tag('CPU: ' + formatTemp(maxT) + ' peak (' + coreTemps.length + ' cores)', color));
+                }
+            }
+        });
+
+        // ── NVMe Temperature (composite only) ───────────────────
+        var nvmeKeys = Object.keys(data).filter(function (k) {
+            return k.indexOf('nvme-pci-') === 0;
+        });
+        nvmeKeys.forEach(function (chipKey, idx) {
+            var chip = data[chipKey];
+            var compositeTemp = null, compMax = null, compCrit = null;
+
+            Object.keys(chip).forEach(function (label) {
+                if (label !== 'Composite') return;
+                if (!isSensorAllowed(chipKey, label)) return;
+                var sensor = chip[label];
+                if (!sensor || typeof sensor !== 'object') return;
+
+                Object.keys(sensor).forEach(function (k) {
+                    if (/^temp\d+_input$/.test(k) && compositeTemp === null) {
+                        compositeTemp = sensor[k];
+                    }
+                    if (/^temp\d+_max$/.test(k)) {
+                        var m = sensor[k];
+                        if (m !== null && m < 200) compMax = m;
+                    }
+                    if (/^temp\d+_crit$/.test(k)) compCrit = sensor[k];
+                });
+            });
+
+            if (compositeTemp !== null) {
+                var color = tempColor(compositeTemp, compMax || 70, compCrit || 80, colors);
+                var lbl = nvmeKeys.length > 1 ? 'NVMe' + idx : 'NVMe';
+                sections.push(tag(lbl + ': ' + formatTemp(compositeTemp), color));
+            }
+        });
+
+        // ── SATA/HDD Temperature ────────────────────────────────
+        var hddKeys = Object.keys(data).filter(function (k) {
+            return k.indexOf('drivetemp-scsi-') === 0;
+        });
+        hddKeys.forEach(function (chipKey, idx) {
+            var chip = data[chipKey];
+            Object.keys(chip).forEach(function (label) {
+                if (label === 'Adapter') return;
+                if (!isSensorAllowed(chipKey, label)) return;
+                var sensor = chip[label];
+                if (!sensor || typeof sensor !== 'object') return;
+
+                var inputKey = null;
+                Object.keys(sensor).forEach(function (k) {
+                    if (/^temp\d+_input$/.test(k)) inputKey = k;
+                });
+                if (!inputKey) return;
+
+                var temp = sensor[inputKey];
+                if (temp !== null && temp !== undefined) {
+                    var color = tempColor(temp, 45, 55, colors);
+                    var lbl = hddKeys.length > 1 ? 'HDD' + idx : 'HDD';
+                    sections.push(tag(lbl + ': ' + formatTemp(temp), color));
+                }
+            });
+        });
+
+        // ── Fan Speeds ──────────────────────────────────────────
+        var fans = [];
+        function findFans(obj, parentLabel, chipKey) {
+            if (!obj || typeof obj !== 'object') return;
+            Object.keys(obj).forEach(function (key) {
+                if (/^fan\d+_input$/.test(key)) {
+                    var label = parentLabel || key.replace('_input', '');
+                    if (isSensorAllowed(chipKey, label)) {
+                        fans.push({
+                            label: label,
+                            rpm: obj[key]
+                        });
+                    }
+                } else if (typeof obj[key] === 'object' && key !== 'Adapter') {
+                    findFans(obj[key], key, chipKey);
+                }
+            });
+        }
+        Object.keys(data).forEach(function (chipKey) {
+            findFans(data[chipKey], '', chipKey);
+        });
+
+        if (fans.length > 0) {
+            fans.forEach(function (fan) {
+                var rpm = fan.rpm || 0;
+                var color = rpm === 0 ? colors.warning : colors.text;
+                sections.push(tag(fan.label + ': ' + rpm + ' RPM', color));
+            });
+        }
+
+        // ── Join all sections ───────────────────────────────────
+        if (sections.length === 0) return tag('No sensors detected', colors.textDim);
+        return sections.join(sep(colors));
+    }
+
+    // ─── UPS Renderer (compact inline) ─────────────────────────────
+    function renderUps(value) {
+        var colors = getThemeColors();
+        if (!value || typeof value !== 'string' || value.trim() === '') {
+            return '';
+        }
+
+        var fields = {};
+        value.split('\n').forEach(function (line) {
+            var idx = line.indexOf(':');
+            if (idx > 0) {
+                fields[line.substring(0, idx).trim()] = line.substring(idx + 1).trim();
+            }
+        });
+        if (Object.keys(fields).length === 0) return '';
+
+        var parts = [];
+
+        // Status
+        var status = fields['ups.status'] || '';
+        var sColor = colors.success, sText = 'Online';
+        if (status.indexOf('OB') !== -1) { sColor = colors.error;   sText = 'On Battery'; }
+        else if (status.indexOf('LB') !== -1) { sColor = colors.error;   sText = 'Low Battery'; }
+        else if (status.indexOf('CHRG') !== -1) { sColor = colors.warning; sText = 'Charging'; }
+        else if (status.indexOf('OL') === -1 && status) { sColor = colors.warning; sText = status; }
+        parts.push(tag(sText, sColor, true));
+
+        // Battery
+        var charge = parseFloat(fields['battery.charge']);
+        if (!isNaN(charge)) {
+            var cColor = charge < 20 ? colors.error : charge < 50 ? colors.warning : colors.success;
+            parts.push(tag(charge + '%', cColor));
+        }
+
+        // Load
+        var load = parseFloat(fields['ups.load']);
+        if (!isNaN(load)) {
+            var lColor = load > 80 ? colors.error : load > 60 ? colors.warning : colors.text;
+            parts.push(tag('Load ' + load + '%', lColor));
+        }
+
+        // Runtime
+        var runtime = parseFloat(fields['battery.runtime']);
+        if (!isNaN(runtime)) {
+            var mins = Math.floor(runtime / 60);
+            var secs = Math.floor(runtime % 60);
+            var rText = mins > 0 ? mins + 'm' : secs + 's';
+            parts.push(tag(rText, mins < 5 ? colors.warning : colors.textDim));
+        }
+
+        return parts.join(sep(colors));
+    }
+
+    // ─── StatusView Override ───────────────────────────────────────
+    function applyOverride() {
+        if (typeof Ext === 'undefined' || !Ext.ClassManager) {
+            setTimeout(applyOverride, 500);
+            return;
+        }
+
+        var cls = Ext.ClassManager.get('PVE.node.StatusView');
+        if (!cls) {
+            setTimeout(applyOverride, 500);
+            return;
+        }
+
+        var origInitComponent = cls.prototype.initComponent;
+
+        cls.prototype.initComponent = function () {
+            // Single compact sensor row — CPU + Storage + Fan inline
+            var sensorItems = [
+                {
+                    itemId: 'sensors',
+                    colspan: 2,
+                    printBar: false,
+                    title: gettext('Sensors'),
+                    textField: 'sensorsOutput',
+                    renderer: renderSensors
+                }
+            ];
+
+            // Inject after 'cpus'
+            if (Ext.isArray(this.items)) {
+                var insertIdx = -1;
+                for (var i = 0; i < this.items.length; i++) {
+                    if (this.items[i].itemId === 'cpus') {
+                        insertIdx = i + 1;
+                        break;
+                    }
+                }
+
+                if (insertIdx >= 0) {
+                    Ext.Array.insert(this.items, insertIdx, sensorItems);
+                } else {
+                    this.items = this.items.concat(sensorItems);
+                }
+            }
+
+            // Call original initComponent
+            if (origInitComponent) {
+                origInitComponent.apply(this, arguments);
+            }
+
+            // After render: conditionally add UPS row if data exists,
+            // then trigger layout recalculation so the panel expands.
+            var me = this;
+            me.on('afterrender', function () {
+                var store = me.getStore ? me.getStore() : null;
+                if (!store) return;
+
+                store.on('load', function (s, records) {
+                    if (!records || !records.length) return;
+
+                    // Update sensor filter from API data
+                    var filterRec = s.findRecord('key', 'sensorsFilter');
+                    activeSensorFilter = filterRec ? parseSensorFilter(filterRec.get('value')) : null;
+
+                    // Hide sensor row entirely when API doesn't include sensorsOutput
+                    var sensorWidget = me.down('#sensors');
+                    if (sensorWidget) {
+                        var sensorsRec = s.findRecord('key', 'sensorsOutput');
+                        var hasSensorData = sensorsRec !== null;
+                        sensorWidget.setVisible(hasSensorData);
+
+                        // Force re-render with filter applied (our handler fires
+                        // after StatusView's internal renderer, need to update)
+                        if (hasSensorData && sensorWidget.setText) {
+                            sensorWidget.setText(renderSensors(sensorsRec.get('value')));
+                        }
+                    }
+
+                    // Check for UPS data in the store
+                    var upsRec = s.findRecord('key', 'upsData');
+                    var upsData = upsRec ? upsRec.get('value') : null;
+
+                    // Only inject UPS item once, and only if there is data
+                    if (upsData && upsData.trim() !== '' && !me.down('#upsStatus')) {
+                        me.add({
+                            xtype: 'pmxInfoWidget',
+                            itemId: 'upsStatus',
+                            colspan: 2,
+                            printBar: false,
+                            title: gettext('UPS'),
+                            iconCls: 'fa fa-fw fa-battery-half',
+                            textField: 'upsData',
+                            renderer: renderUps
+                        });
+                        me.updateLayout();
+                    }
+
+                    // Recalculate layout to accommodate sensor row
+                    Ext.defer(function () {
+                        me.updateLayout();
+                        var parent = me.ownerCt;
+                        if (parent && parent.updateLayout) {
+                            parent.updateLayout();
+                        }
+                    }, 100);
+                });
+            });
+        };
+
+        console.log('[ProxMorph] Sensor widget initialized (v1.1.0)');
+    }
+
+    // ─── Init ──────────────────────────────────────────────────────
+    function init() {
+        try {
+            applyOverride();
+            window.ProxMorphSensors = { version: '1.1.0' };
+        } catch (e) {
+            console.error('[ProxMorph Sensors] Init error:', e);
+        }
+    }
+
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        init();
+    } else {
+        window.addEventListener('DOMContentLoaded', init);
+    }
+
+})();

themes/patches/unifi-charts.js

@@ -0,0 +1,139 @@
+/**
+ * ProxMorph Chart Patcher
+ * Applies custom colors to Proxmox RRD charts
+ * 
+ * Features:
+ *   - Custom UniFi color palette for chart lines/areas
+ *   - Special handling for Network Traffic (blue/green layering)
+ *   - Subtle white border on hover dots for visibility
+ * 
+ * Color Palette:
+ *   Primary:   #30AD55 (UniFi green)
+ *   Secondary: #006EFF (UniFi blue)
+ *   Tertiary:  #5DC0E0 (Cyan/teal)
+ *   Warning:   #D08D1E (Amber/orange)
+ *   Critical:  #CC3135 (Red)
+ */
+
+(function () {
+    'use strict';
+
+    const PROXMORPH_CHART_COLORS = [
+        '#30AD55',  // UniFi green (PRIMARY)
+        '#006EFF',  // UniFi blue (SECONDARY)
+        '#5DC0E0',  // UniFi cyan/teal
+        '#D08D1E',  // UniFi amber/orange
+        '#CC3135',  // UniFi red
+        '#4797FF',  // UniFi light blue
+    ];
+
+    /**
+     * Apply custom colors to a single chart
+     */
+    function patchChart(chart) {
+        if (!chart || !chart.getSeries) return;
+
+        try {
+            const series = chart.getSeries();
+            if (!series || series.length === 0) return;
+
+            // Special handling for Network Traffic chart to avoid color blending
+            if (chart.title === 'Network Traffic') {
+                // Swap colors: Blue (bottom layer), Green (top layer)
+                chart.setColors(['#006EFF', '#30AD55']);
+                series.forEach((s, idx) => {
+                    if (idx === 0) {
+                        // Incoming - Blue area (bottom)
+                        s.setStyle({
+                            fillStyle: 'rgba(0, 110, 255, 0.7)',
+                            strokeStyle: '#006EFF',
+                            lineWidth: 2
+                        });
+                    } else if (idx === 1) {
+                        // Outgoing - Green area (top)
+                        s.setStyle({
+                            fillStyle: 'rgba(48, 173, 85, 0.8)',
+                            strokeStyle: '#30AD55',
+                            lineWidth: 2
+                        });
+                    }
+                    // Add subtle white border to hover dots
+                    s.setHighlight({
+                        opacity: 1,
+                        scaling: 1.5,
+                        strokeStyle: '#FFFFFF',
+                        lineWidth: 1
+                    });
+                });
+            } else {
+                // Standard color application for all other charts
+                chart.setColors(PROXMORPH_CHART_COLORS);
+                series.forEach((s, idx) => {
+                    const color = PROXMORPH_CHART_COLORS[idx % PROXMORPH_CHART_COLORS.length];
+                    s.setStyle({
+                        fillStyle: color,
+                        strokeStyle: color
+                    });
+                    // Add subtle white border to hover dots
+                    s.setHighlight({
+                        opacity: 1,
+                        scaling: 1.5,
+                        strokeStyle: '#FFFFFF',
+                        lineWidth: 1
+                    });
+                });
+            }
+
+            chart.redraw();
+        } catch (e) {
+            console.warn('[ProxMorph] Chart patch error:', e);
+        }
+    }
+
+    /**
+     * Check if UniFi theme is active
+     */
+    function isUnifiThemeActive() {
+        // Check for the presence of the UniFi theme stylesheet
+        return !!document.querySelector('link[href*="theme-unifi.css"]');
+    }
+
+    /**
+     * Find and patch all RRD charts on the page
+     */
+    function patchAllCharts() {
+        // Only patch if UniFi theme is active
+        if (!isUnifiThemeActive()) return;
+
+        if (typeof Ext === 'undefined' || !Ext.ComponentQuery) return;
+
+        const charts = Ext.ComponentQuery.query('proxmoxRRDChart');
+        if (charts && charts.length > 0) {
+            charts.forEach(patchChart);
+        }
+    }
+
+    /**
+     * Initialize the chart patcher with delayed start and periodic refresh
+     */
+    function init() {
+        // Initial patch after page load
+        if (document.readyState === 'complete') {
+            setTimeout(patchAllCharts, 500);
+        } else {
+            window.addEventListener('load', function () {
+                setTimeout(patchAllCharts, 500);
+            });
+        }
+
+        // Periodic re-patch to catch dynamically loaded charts
+        // Charts can be reloaded when switching views or refreshing data
+        setInterval(patchAllCharts, 2000);
+
+        console.log('[ProxMorph] Chart patcher initialized');
+    }
+
+    // Start initialization
+    init();
+
+})();

themes/patches/unifi-light-charts.js

@@ -0,0 +1,143 @@
+/**
+ * ProxMorph Chart Patcher (UniFi Light)
+ * Applies custom colors to Proxmox RRD charts for light theme
+ *
+ * Features:
+ *   - Custom UniFi color palette for chart lines/areas
+ *   - Special handling for Network Traffic (blue/green layering)
+ *   - Dark border on hover dots for visibility on light backgrounds
+ *
+ * Color Palette (same as dark - UniFi uses identical colors):
+ *   Primary:   #3ACC65 (UniFi green)
+ *   Secondary: #006FFF (UniFi blue)
+ *   Tertiary:  #5DC0E0 (Cyan/teal)
+ *   Warning:   #F6B94F (Amber/orange)
+ *   Critical:  #F36165 (Red)
+ */
+
+(function () {
+    'use strict';
+
+    const PROXMORPH_CHART_COLORS = [
+        '#3ACC65',  // UniFi green (PRIMARY)
+        '#006FFF',  // UniFi blue (SECONDARY)
+        '#5DC0E0',  // UniFi cyan/teal
+        '#F6B94F',  // UniFi amber/orange
+        '#F36165',  // UniFi red
+        '#4797FF',  // UniFi light blue
+    ];
+
+    // Hover dot stroke color - dark for visibility on light backgrounds
+    const HOVER_STROKE_COLOR = '#1A1C21';
+
+    /**
+     * Apply custom colors to a single chart
+     */
+    function patchChart(chart) {
+        if (!chart || !chart.getSeries) return;
+
+        try {
+            const series = chart.getSeries();
+            if (!series || series.length === 0) return;
+
+            // Special handling for Network Traffic chart to avoid color blending
+            if (chart.title === 'Network Traffic') {
+                // Swap colors: Blue (bottom layer), Green (top layer)
+                chart.setColors(['#006FFF', '#3ACC65']);
+                series.forEach((s, idx) => {
+                    if (idx === 0) {
+                        // Incoming - Blue area (bottom)
+                        // Slightly lower opacity for light backgrounds
+                        s.setStyle({
+                            fillStyle: 'rgba(0, 111, 255, 0.4)',
+                            strokeStyle: '#006FFF',
+                            lineWidth: 2
+                        });
+                    } else if (idx === 1) {
+                        // Outgoing - Green area (top)
+                        s.setStyle({
+                            fillStyle: 'rgba(58, 204, 101, 0.5)',
+                            strokeStyle: '#3ACC65',
+                            lineWidth: 2
+                        });
+                    }
+                    // Add dark border to hover dots for visibility on light background
+                    s.setHighlight({
+                        opacity: 1,
+                        scaling: 1.5,
+                        strokeStyle: HOVER_STROKE_COLOR,
+                        lineWidth: 1
+                    });
+                });
+            } else {
+                // Standard color application for all other charts
+                chart.setColors(PROXMORPH_CHART_COLORS);
+                series.forEach((s, idx) => {
+                    const color = PROXMORPH_CHART_COLORS[idx % PROXMORPH_CHART_COLORS.length];
+                    s.setStyle({
+                        fillStyle: color,
+                        strokeStyle: color
+                    });
+                    // Add dark border to hover dots for visibility on light background
+                    s.setHighlight({
+                        opacity: 1,
+                        scaling: 1.5,
+                        strokeStyle: HOVER_STROKE_COLOR,
+                        lineWidth: 1
+                    });
+                });
+            }
+
+            chart.redraw();
+        } catch (e) {
+            console.warn('[ProxMorph] Chart patch error:', e);
+        }
+    }
+
+    /**
+     * Check if UniFi Light theme is active
+     */
+    function isUnifiLightThemeActive() {
+        // Check for the presence of the UniFi Light theme stylesheet
+        return !!document.querySelector('link[href*="theme-unifi-light.css"]');
+    }
+
+    /**
+     * Find and patch all RRD charts on the page
+     */
+    function patchAllCharts() {
+        // Only patch if UniFi Light theme is active
+        if (!isUnifiLightThemeActive()) return;
+
+        if (typeof Ext === 'undefined' || !Ext.ComponentQuery) return;
+
+        const charts = Ext.ComponentQuery.query('proxmoxRRDChart');
+        if (charts && charts.length > 0) {
+            charts.forEach(patchChart);
+        }
+    }
+
+    /**
+     * Initialize the chart patcher with delayed start and periodic refresh
+     */
+    function init() {
+        // Initial patch after page load
+        if (document.readyState === 'complete') {
+            setTimeout(patchAllCharts, 500);
+        } else {
+            window.addEventListener('load', function () {
+                setTimeout(patchAllCharts, 500);
+            });
+        }
+
+        // Periodic re-patch to catch dynamically loaded charts
+        // Charts can be reloaded when switching views or refreshing data
+        setInterval(patchAllCharts, 2000);
+
+        console.log('[ProxMorph] UniFi Light chart patcher initialized');
+    }
+
+    // Start initialization
+    init();
+
+})();

themes/pdm/proxmorph-pdm-base.css

@@ -0,0 +1,215 @@
+/*!ProxMorph PDM Base*/
+/*
+ * ProxMorph PDM Base Styles
+ * Version: 1.0.0
+ *
+ * Shared component-level styling applied whenever ANY ProxMorph PDM theme
+ * is active. Overrides the default PWt shape/corner/shadow tokens to
+ * give rounded corners, better elevation shadows, and polished component
+ * appearance.
+ *
+ * This file does NOT set colors — colors come from theme-specific CSS.
+ */
+
+/* ===== Shape & Corner Overrides ===== */
+:root {
+    /* Global shape tokens — increase roundness */
+    --pwt-shape-corner-none: 0px !important;
+    --pwt-shape-corner-extra-small: 4px !important;
+    --pwt-shape-corner-small: 8px !important;
+    --pwt-shape-corner-medium: 12px !important;
+    --pwt-shape-corner-large: 16px !important;
+    --pwt-shape-corner-extra-large: 24px !important;
+
+    /* Component-specific corner shapes */
+    --pwt-button-corner-shape: 8px !important;
+    --pwt-card-corner-shape: 12px !important;
+    --pwt-dialog-corner-shape: 12px !important;
+    --pwt-input-corner-shape: 8px !important;
+    --pwt-fab-corner-shape: 16px !important;
+    --pwt-progress-corner-shape: 8px !important;
+    --pwt-nav-link-corner-shape: 8px !important;
+    --pwt-nav-pills-corner-shape: 8px !important;
+    --pwt-tooltip-corner-shape: 8px !important;
+}
+
+/* ===== Panel Styling ===== */
+.pwt-panel {
+    border-radius: 12px !important;
+    overflow: clip !important;  /* clip (not hidden) preserves min-width:auto for correct flex wrapping */
+}
+
+.pwt-panel-header {
+    border-radius: 12px 12px 0 0 !important;
+}
+
+/* ===== Shadow Enhancements ===== */
+.pwt-shadow2 {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
+}
+
+/* ===== Dialog Styling ===== */
+dialog,
+.pwt-dialog:not(.pwt-dropdown) {
+    border-radius: 12px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+    overflow: hidden !important;
+}
+
+/* ===== Button Enhancements ===== */
+.pwt-button {
+    border-radius: 8px !important;
+    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
+}
+
+.pwt-button:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
+}
+
+.pwt-button.rounded,
+.pwt-button.circle {
+    border-radius: 10rem !important;
+}
+
+/* Segmented buttons: rounded ends only */
+.pwt-segmented-button {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+.pwt-segmented-button > .pwt-button {
+    border-radius: 0px !important;
+}
+
+.pwt-segmented-button > .pwt-button:first-child {
+    border-radius: 8px 0 0 8px !important;
+}
+
+.pwt-segmented-button > .pwt-button:last-child {
+    border-radius: 0 8px 8px 0 !important;
+}
+
+/* FAB */
+.pwt-fab {
+    border-radius: 16px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* ===== Input / Form Enhancements ===== */
+.pwt-input {
+    border-radius: 8px !important;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
+}
+
+.pwt-input:focus-within {
+    box-shadow: 0 0 0 2px rgba(var(--pwt-color-primary-80), 0.3) !important;
+}
+
+.pwt-textarea {
+    border-radius: 8px !important;
+}
+
+.pwt-input-display {
+    border-radius: 8px !important;
+}
+
+/* ===== Card Styling ===== */
+.pwt-card {
+    border-radius: 12px !important;
+    overflow: hidden !important;
+}
+
+/* ===== Navigation ===== */
+.pwt-nav-link {
+    border-radius: 8px !important;
+    transition: background-color 0.15s ease !important;
+}
+
+.pwt-nav-menu {
+    border-radius: 8px !important;
+}
+
+/* ===== Datatable Enhancements ===== */
+.pwt-datatable {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+.pwt-datatable-header {
+    border-radius: 8px 8px 0 0 !important;
+}
+
+/* ===== Menu / Dropdown ===== */
+.pwt-submenu {
+    border-radius: 8px !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+    overflow: hidden !important;
+}
+
+.pwt-dropdown {
+    border-radius: 8px !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+    overflow: hidden !important;
+}
+
+/* ===== List / List Tile ===== */
+.pwt-list {
+    border-radius: 8px !important;
+}
+
+.pwt-list-tile {
+    border-radius: 8px !important;
+}
+
+/* ===== Meter / Progress ===== */
+.pwt-meter {
+    border-radius: 8px !important;
+}
+
+/* ===== Switch ===== */
+.pwt-switch {
+    border-radius: 14px !important;
+}
+
+/* ===== Tooltips ===== */
+[class*="pwt-tooltip"] {
+    border-radius: 8px !important;
+}
+
+/* ===== Scrollbar Styling ===== */
+::-webkit-scrollbar {
+    width: 8px !important;
+    height: 8px !important;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 4px !important;
+    background: rgba(128, 128, 128, 0.4) !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(128, 128, 128, 0.6) !important;
+}
+
+/* ===== Logo tinting (dark themes) ===== */
+.pwt-dark-mode img[src*="proxmox_logo"] {
+    filter: brightness(0.9) !important;
+}
+
+/* ===== Smooth transitions for theme switching ===== */
+*,
+*::before,
+*::after {
+    transition-property: background-color, border-color, color, fill, stroke, box-shadow !important;
+    transition-duration: 0.15s !important;
+    transition-timing-function: ease !important;
+}
+
+/* Restore tab indicator slide animation (needs left/width/inset transitions) */
+.pwt-tab-active-indicator {
+    transition: all 0.2s ease !important;
+}

themes/pdm/theme-blue-slate.css

@@ -0,0 +1,180 @@
+/*!Blue Slate*/
+/*
+ * ProxMorph PDM Theme: Blue Slate
+ * Overrides the PWT Material Design tonal color system with Blue Slate palette
+ * Version: 1.0.0
+ *
+ * ─── Blue Slate Palette ────────────────────────────────────────
+ * Accent:   #5294e2    Text:     #d3dae3
+ * Base:     #2b2e37    Surface:  #383c4a
+ * Elevated: #404552
+ */
+
+:root {
+    /* Primary — Blue Slate (#5294e2) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(248, 252, 255) !important;
+    --pwt-color-primary-95: rgb(222, 240, 255) !important;
+    --pwt-color-primary-90: rgb(195, 225, 252) !important;
+    --pwt-color-primary-80: rgb(140, 192, 238) !important;
+    --pwt-color-primary-70: rgb(82, 148, 226) !important;
+    --pwt-color-primary-60: rgb(60, 125, 205) !important;
+    --pwt-color-primary-50: rgb(42, 105, 182) !important;
+    --pwt-color-primary-40: rgb(28, 85, 158) !important;
+    --pwt-color-primary-30: rgb(16, 68, 132) !important;
+    --pwt-color-primary-20: rgb(6, 50, 105) !important;
+    --pwt-color-primary-15: rgb(2, 40, 85) !important;
+    --pwt-color-primary-10: rgb(0, 28, 65) !important;
+    --pwt-color-primary-5: rgb(0, 16, 42) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Slate (#7c818c) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 252) !important;
+    --pwt-color-secondary-95: rgb(228, 232, 238) !important;
+    --pwt-color-secondary-90: rgb(211, 218, 227) !important;
+    --pwt-color-secondary-80: rgb(178, 186, 198) !important;
+    --pwt-color-secondary-70: rgb(148, 155, 168) !important;
+    --pwt-color-secondary-60: rgb(124, 129, 140) !important;
+    --pwt-color-secondary-50: rgb(100, 105, 118) !important;
+    --pwt-color-secondary-40: rgb(78, 82, 95) !important;
+    --pwt-color-secondary-30: rgb(56, 60, 74) !important;
+    --pwt-color-secondary-20: rgb(43, 46, 55) !important;
+    --pwt-color-secondary-15: rgb(36, 38, 48) !important;
+    --pwt-color-secondary-10: rgb(28, 30, 38) !important;
+    --pwt-color-secondary-5: rgb(18, 18, 25) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Muted Purple (#8c7ec8) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(252, 250, 255) !important;
+    --pwt-color-tertiary-95: rgb(235, 228, 255) !important;
+    --pwt-color-tertiary-90: rgb(218, 208, 248) !important;
+    --pwt-color-tertiary-80: rgb(178, 165, 228) !important;
+    --pwt-color-tertiary-70: rgb(140, 126, 200) !important;
+    --pwt-color-tertiary-60: rgb(115, 102, 178) !important;
+    --pwt-color-tertiary-50: rgb(92, 80, 155) !important;
+    --pwt-color-tertiary-40: rgb(72, 60, 132) !important;
+    --pwt-color-tertiary-30: rgb(52, 42, 108) !important;
+    --pwt-color-tertiary-20: rgb(36, 28, 85) !important;
+    --pwt-color-tertiary-15: rgb(28, 20, 70) !important;
+    --pwt-color-tertiary-10: rgb(20, 12, 55) !important;
+    --pwt-color-tertiary-5: rgb(12, 5, 35) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(242, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 212) !important;
+    --pwt-color-success-90: rgb(148, 248, 172) !important;
+    --pwt-color-success-80: rgb(88, 225, 120) !important;
+    --pwt-color-success-70: rgb(50, 195, 85) !important;
+    --pwt-color-success-60: rgb(32, 168, 65) !important;
+    --pwt-color-success-50: rgb(18, 140, 48) !important;
+    --pwt-color-success-40: rgb(6, 115, 35) !important;
+    --pwt-color-success-30: rgb(0, 90, 22) !important;
+    --pwt-color-success-20: rgb(0, 66, 14) !important;
+    --pwt-color-success-15: rgb(0, 50, 8) !important;
+    --pwt-color-success-10: rgb(0, 36, 4) !important;
+    --pwt-color-success-5: rgb(0, 22, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 228, 228) !important;
+    --pwt-color-error-90: rgb(255, 200, 200) !important;
+    --pwt-color-error-80: rgb(255, 148, 148) !important;
+    --pwt-color-error-70: rgb(248, 98, 98) !important;
+    --pwt-color-error-60: rgb(225, 65, 65) !important;
+    --pwt-color-error-50: rgb(198, 42, 42) !important;
+    --pwt-color-error-40: rgb(168, 22, 22) !important;
+    --pwt-color-error-30: rgb(138, 8, 8) !important;
+    --pwt-color-error-20: rgb(105, 2, 2) !important;
+    --pwt-color-error-15: rgb(82, 0, 0) !important;
+    --pwt-color-error-10: rgb(62, 0, 0) !important;
+    --pwt-color-error-5: rgb(40, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 245) !important;
+    --pwt-color-warning-95: rgb(255, 242, 205) !important;
+    --pwt-color-warning-90: rgb(255, 228, 160) !important;
+    --pwt-color-warning-80: rgb(248, 205, 100) !important;
+    --pwt-color-warning-70: rgb(235, 175, 45) !important;
+    --pwt-color-warning-60: rgb(210, 152, 25) !important;
+    --pwt-color-warning-50: rgb(182, 128, 10) !important;
+    --pwt-color-warning-40: rgb(155, 105, 0) !important;
+    --pwt-color-warning-30: rgb(125, 82, 0) !important;
+    --pwt-color-warning-20: rgb(95, 60, 0) !important;
+    --pwt-color-warning-15: rgb(72, 45, 0) !important;
+    --pwt-color-warning-10: rgb(52, 32, 0) !important;
+    --pwt-color-warning-5: rgb(32, 18, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Blue Slate scale */
+    --pwt-color-neutral-100: rgb(211, 218, 227) !important;
+    --pwt-color-neutral-99: rgb(205, 212, 222) !important;
+    --pwt-color-neutral-95: rgb(188, 196, 208) !important;
+    --pwt-color-neutral-90: rgb(168, 176, 190) !important;
+    --pwt-color-neutral-80: rgb(145, 152, 168) !important;
+    --pwt-color-neutral-70: rgb(124, 129, 140) !important;
+    --pwt-color-neutral-60: rgb(100, 105, 118) !important;
+    --pwt-color-neutral-50: rgb(78, 82, 95) !important;
+    --pwt-color-neutral-40: rgb(64, 69, 82) !important;
+    --pwt-color-neutral-30: rgb(56, 60, 74) !important;
+    --pwt-color-neutral-20: rgb(43, 46, 55) !important;
+    --pwt-color-neutral-15: rgb(36, 38, 48) !important;
+    --pwt-color-neutral-10: rgb(28, 30, 38) !important;
+    --pwt-color-neutral-5: rgb(18, 18, 25) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt */
+    --pwt-color-neutral-alt-100: rgb(211, 218, 227) !important;
+    --pwt-color-neutral-alt-99: rgb(208, 215, 225) !important;
+    --pwt-color-neutral-alt-95: rgb(192, 200, 212) !important;
+    --pwt-color-neutral-alt-90: rgb(172, 180, 195) !important;
+    --pwt-color-neutral-alt-80: rgb(148, 155, 172) !important;
+    --pwt-color-neutral-alt-70: rgb(126, 132, 148) !important;
+    --pwt-color-neutral-alt-60: rgb(105, 110, 125) !important;
+    --pwt-color-neutral-alt-50: rgb(82, 88, 102) !important;
+    --pwt-color-neutral-alt-40: rgb(65, 70, 85) !important;
+    --pwt-color-neutral-alt-30: rgb(50, 55, 68) !important;
+    --pwt-color-neutral-alt-20: rgb(38, 42, 52) !important;
+    --pwt-color-neutral-alt-15: rgb(30, 34, 44) !important;
+    --pwt-color-neutral-alt-10: rgb(22, 25, 34) !important;
+    --pwt-color-neutral-alt-5: rgb(14, 15, 22) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-catppuccin-frappe.css

@@ -0,0 +1,180 @@
+/*!Catppuccin Frappé*/
+/*
+ * ProxMorph PDM Theme: Catppuccin Frappé
+ * Overrides the PWT Material Design tonal color system with Catppuccin Frappé palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Catppuccin Community Palette
+ *
+ * ─── Catppuccin Frappé Palette ────────────────────────────────
+ * Mauve (accent): #ca9ee6    Blue:     #8caaee
+ * Green:          #a6d189    Red:      #e78284
+ * Yellow:         #e5c890    Pink:     #f4b8e4
+ * Text:           #c6d0f5    Base:     #303446
+ * Surface0:       #414559    Mantle:   #292c3c
+ * Crust:          #232634
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Catppuccin Frappé Mauve (#ca9ee6) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(252, 248, 255) !important;
+    --pwt-color-primary-95: rgb(240, 230, 252) !important;
+    --pwt-color-primary-90: rgb(228, 210, 248) !important;
+    --pwt-color-primary-80: rgb(202, 158, 230) !important;
+    --pwt-color-primary-70: rgb(178, 135, 208) !important;
+    --pwt-color-primary-60: rgb(152, 112, 185) !important;
+    --pwt-color-primary-50: rgb(128, 90, 162) !important;
+    --pwt-color-primary-40: rgb(105, 68, 138) !important;
+    --pwt-color-primary-30: rgb(82, 48, 115) !important;
+    --pwt-color-primary-20: rgb(60, 30, 92) !important;
+    --pwt-color-primary-15: rgb(48, 20, 76) !important;
+    --pwt-color-primary-10: rgb(36, 12, 60) !important;
+    --pwt-color-primary-5: rgb(22, 5, 42) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Catppuccin Frappé Blue (#8caaee) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(222, 235, 255) !important;
+    --pwt-color-secondary-90: rgb(198, 218, 252) !important;
+    --pwt-color-secondary-80: rgb(155, 188, 240) !important;
+    --pwt-color-secondary-70: rgb(140, 170, 238) !important;
+    --pwt-color-secondary-60: rgb(112, 145, 212) !important;
+    --pwt-color-secondary-50: rgb(88, 120, 188) !important;
+    --pwt-color-secondary-40: rgb(66, 98, 162) !important;
+    --pwt-color-secondary-30: rgb(46, 76, 135) !important;
+    --pwt-color-secondary-20: rgb(28, 55, 108) !important;
+    --pwt-color-secondary-15: rgb(20, 42, 88) !important;
+    --pwt-color-secondary-10: rgb(12, 30, 68) !important;
+    --pwt-color-secondary-5: rgb(5, 16, 45) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Catppuccin Frappé Pink (#f4b8e4) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 250, 253) !important;
+    --pwt-color-tertiary-95: rgb(255, 236, 248) !important;
+    --pwt-color-tertiary-90: rgb(252, 218, 240) !important;
+    --pwt-color-tertiary-80: rgb(244, 184, 228) !important;
+    --pwt-color-tertiary-70: rgb(222, 158, 205) !important;
+    --pwt-color-tertiary-60: rgb(198, 132, 182) !important;
+    --pwt-color-tertiary-50: rgb(172, 108, 158) !important;
+    --pwt-color-tertiary-40: rgb(148, 85, 135) !important;
+    --pwt-color-tertiary-30: rgb(122, 62, 110) !important;
+    --pwt-color-tertiary-20: rgb(96, 40, 86) !important;
+    --pwt-color-tertiary-15: rgb(78, 28, 70) !important;
+    --pwt-color-tertiary-10: rgb(60, 16, 54) !important;
+    --pwt-color-tertiary-5: rgb(40, 6, 35) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Catppuccin Frappé Green (#a6d189) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(248, 255, 245) !important;
+    --pwt-color-success-95: rgb(220, 252, 210) !important;
+    --pwt-color-success-90: rgb(192, 240, 178) !important;
+    --pwt-color-success-80: rgb(166, 209, 137) !important;
+    --pwt-color-success-70: rgb(142, 185, 115) !important;
+    --pwt-color-success-60: rgb(118, 162, 92) !important;
+    --pwt-color-success-50: rgb(95, 138, 72) !important;
+    --pwt-color-success-40: rgb(72, 115, 52) !important;
+    --pwt-color-success-30: rgb(52, 92, 35) !important;
+    --pwt-color-success-20: rgb(34, 70, 20) !important;
+    --pwt-color-success-15: rgb(24, 55, 12) !important;
+    --pwt-color-success-10: rgb(15, 42, 5) !important;
+    --pwt-color-success-5: rgb(6, 26, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Catppuccin Frappé Red (#e78284) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 228, 228) !important;
+    --pwt-color-error-90: rgb(252, 205, 206) !important;
+    --pwt-color-error-80: rgb(242, 168, 170) !important;
+    --pwt-color-error-70: rgb(231, 130, 132) !important;
+    --pwt-color-error-60: rgb(208, 105, 108) !important;
+    --pwt-color-error-50: rgb(185, 82, 85) !important;
+    --pwt-color-error-40: rgb(160, 58, 62) !important;
+    --pwt-color-error-30: rgb(132, 38, 42) !important;
+    --pwt-color-error-20: rgb(105, 18, 22) !important;
+    --pwt-color-error-15: rgb(85, 8, 14) !important;
+    --pwt-color-error-10: rgb(65, 0, 6) !important;
+    --pwt-color-error-5: rgb(42, 0, 2) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Catppuccin Frappé Yellow (#e5c890) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 246) !important;
+    --pwt-color-warning-95: rgb(252, 242, 218) !important;
+    --pwt-color-warning-90: rgb(245, 232, 192) !important;
+    --pwt-color-warning-80: rgb(229, 200, 144) !important;
+    --pwt-color-warning-70: rgb(210, 180, 120) !important;
+    --pwt-color-warning-60: rgb(188, 158, 98) !important;
+    --pwt-color-warning-50: rgb(165, 135, 76) !important;
+    --pwt-color-warning-40: rgb(140, 112, 55) !important;
+    --pwt-color-warning-30: rgb(115, 90, 36) !important;
+    --pwt-color-warning-20: rgb(88, 68, 18) !important;
+    --pwt-color-warning-15: rgb(70, 54, 8) !important;
+    --pwt-color-warning-10: rgb(52, 40, 2) !important;
+    --pwt-color-warning-5: rgb(32, 24, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Catppuccin Frappé Background scale (base #303446) */
+    --pwt-color-neutral-100: rgb(198, 208, 245) !important;
+    --pwt-color-neutral-99: rgb(192, 202, 238) !important;
+    --pwt-color-neutral-95: rgb(180, 190, 222) !important;
+    --pwt-color-neutral-90: rgb(162, 172, 202) !important;
+    --pwt-color-neutral-80: rgb(140, 148, 178) !important;
+    --pwt-color-neutral-70: rgb(118, 126, 155) !important;
+    --pwt-color-neutral-60: rgb(98, 105, 132) !important;
+    --pwt-color-neutral-50: rgb(80, 86, 110) !important;
+    --pwt-color-neutral-40: rgb(65, 69, 89) !important;
+    --pwt-color-neutral-30: rgb(48, 52, 70) !important;
+    --pwt-color-neutral-20: rgb(35, 38, 52) !important;
+    --pwt-color-neutral-15: rgb(30, 32, 44) !important;
+    --pwt-color-neutral-10: rgb(24, 26, 36) !important;
+    --pwt-color-neutral-5: rgb(16, 17, 25) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Catppuccin Frappé Overlay tones */
+    --pwt-color-neutral-alt-100: rgb(198, 208, 245) !important;
+    --pwt-color-neutral-alt-99: rgb(192, 202, 240) !important;
+    --pwt-color-neutral-alt-95: rgb(182, 192, 225) !important;
+    --pwt-color-neutral-alt-90: rgb(164, 174, 208) !important;
+    --pwt-color-neutral-alt-80: rgb(142, 150, 182) !important;
+    --pwt-color-neutral-alt-70: rgb(120, 128, 158) !important;
+    --pwt-color-neutral-alt-60: rgb(100, 108, 135) !important;
+    --pwt-color-neutral-alt-50: rgb(82, 88, 112) !important;
+    --pwt-color-neutral-alt-40: rgb(66, 72, 92) !important;
+    --pwt-color-neutral-alt-30: rgb(50, 55, 74) !important;
+    --pwt-color-neutral-alt-20: rgb(36, 40, 55) !important;
+    --pwt-color-neutral-alt-15: rgb(30, 34, 46) !important;
+    --pwt-color-neutral-alt-10: rgb(24, 27, 38) !important;
+    --pwt-color-neutral-alt-5: rgb(16, 18, 26) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-catppuccin-latte.css

@@ -0,0 +1,195 @@
+/*!Catppuccin Latte*/
+/*
+ * ProxMorph PDM Theme: Catppuccin Latte (Light)
+ * Overrides the PWT Material Design tonal color system with Catppuccin Latte palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Catppuccin Community Palette
+ *
+ * ─── Catppuccin Latte Palette (Light) ─────────────────────────
+ * Mauve (accent): #8839ef    Blue:     #1e66f5
+ * Green:          #40a02b    Red:      #d20f39
+ * Yellow:         #df8e1d    Pink:     #ea76cb
+ * Text:           #4c4f69    Base:     #eff1f5
+ * Surface0:       #ccd0da    Mantle:   #e6e9ef
+ * Crust:          #dce0e8
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Catppuccin Latte Mauve (#8839ef) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(252, 248, 255) !important;
+    --pwt-color-primary-95: rgb(240, 228, 255) !important;
+    --pwt-color-primary-90: rgb(225, 205, 255) !important;
+    --pwt-color-primary-80: rgb(195, 162, 248) !important;
+    --pwt-color-primary-70: rgb(165, 120, 240) !important;
+    --pwt-color-primary-60: rgb(136, 57, 239) !important;
+    --pwt-color-primary-50: rgb(115, 38, 210) !important;
+    --pwt-color-primary-40: rgb(95, 25, 185) !important;
+    --pwt-color-primary-30: rgb(75, 15, 155) !important;
+    --pwt-color-primary-20: rgb(56, 8, 125) !important;
+    --pwt-color-primary-15: rgb(44, 4, 102) !important;
+    --pwt-color-primary-10: rgb(32, 0, 80) !important;
+    --pwt-color-primary-5: rgb(18, 0, 52) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Catppuccin Latte Blue (#1e66f5) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(218, 232, 255) !important;
+    --pwt-color-secondary-90: rgb(185, 210, 255) !important;
+    --pwt-color-secondary-80: rgb(130, 175, 252) !important;
+    --pwt-color-secondary-70: rgb(75, 138, 248) !important;
+    --pwt-color-secondary-60: rgb(30, 102, 245) !important;
+    --pwt-color-secondary-50: rgb(18, 82, 218) !important;
+    --pwt-color-secondary-40: rgb(10, 64, 188) !important;
+    --pwt-color-secondary-30: rgb(4, 48, 155) !important;
+    --pwt-color-secondary-20: rgb(0, 34, 122) !important;
+    --pwt-color-secondary-15: rgb(0, 26, 100) !important;
+    --pwt-color-secondary-10: rgb(0, 18, 78) !important;
+    --pwt-color-secondary-5: rgb(0, 10, 50) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Catppuccin Latte Pink (#ea76cb) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 253) !important;
+    --pwt-color-tertiary-95: rgb(255, 228, 245) !important;
+    --pwt-color-tertiary-90: rgb(252, 200, 235) !important;
+    --pwt-color-tertiary-80: rgb(245, 155, 215) !important;
+    --pwt-color-tertiary-70: rgb(240, 118, 203) !important;
+    --pwt-color-tertiary-60: rgb(215, 88, 178) !important;
+    --pwt-color-tertiary-50: rgb(188, 62, 152) !important;
+    --pwt-color-tertiary-40: rgb(160, 40, 128) !important;
+    --pwt-color-tertiary-30: rgb(132, 22, 105) !important;
+    --pwt-color-tertiary-20: rgb(102, 8, 80) !important;
+    --pwt-color-tertiary-15: rgb(82, 2, 65) !important;
+    --pwt-color-tertiary-10: rgb(62, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(40, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Catppuccin Latte Green (#40a02b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(248, 255, 246) !important;
+    --pwt-color-success-95: rgb(218, 252, 208) !important;
+    --pwt-color-success-90: rgb(180, 242, 168) !important;
+    --pwt-color-success-80: rgb(120, 215, 105) !important;
+    --pwt-color-success-70: rgb(80, 185, 65) !important;
+    --pwt-color-success-60: rgb(64, 160, 43) !important;
+    --pwt-color-success-50: rgb(48, 138, 28) !important;
+    --pwt-color-success-40: rgb(35, 115, 16) !important;
+    --pwt-color-success-30: rgb(24, 92, 8) !important;
+    --pwt-color-success-20: rgb(14, 70, 2) !important;
+    --pwt-color-success-15: rgb(8, 55, 0) !important;
+    --pwt-color-success-10: rgb(4, 40, 0) !important;
+    --pwt-color-success-5: rgb(0, 25, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Catppuccin Latte Red (#d20f39) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 222, 226) !important;
+    --pwt-color-error-90: rgb(255, 190, 198) !important;
+    --pwt-color-error-80: rgb(242, 135, 148) !important;
+    --pwt-color-error-70: rgb(228, 75, 98) !important;
+    --pwt-color-error-60: rgb(210, 15, 57) !important;
+    --pwt-color-error-50: rgb(185, 8, 45) !important;
+    --pwt-color-error-40: rgb(158, 2, 34) !important;
+    --pwt-color-error-30: rgb(130, 0, 25) !important;
+    --pwt-color-error-20: rgb(100, 0, 16) !important;
+    --pwt-color-error-15: rgb(80, 0, 10) !important;
+    --pwt-color-error-10: rgb(60, 0, 5) !important;
+    --pwt-color-error-5: rgb(38, 0, 2) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Catppuccin Latte Yellow (#df8e1d) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 246) !important;
+    --pwt-color-warning-95: rgb(255, 240, 210) !important;
+    --pwt-color-warning-90: rgb(252, 225, 170) !important;
+    --pwt-color-warning-80: rgb(242, 190, 105) !important;
+    --pwt-color-warning-70: rgb(230, 158, 52) !important;
+    --pwt-color-warning-60: rgb(223, 142, 29) !important;
+    --pwt-color-warning-50: rgb(195, 120, 15) !important;
+    --pwt-color-warning-40: rgb(165, 98, 6) !important;
+    --pwt-color-warning-30: rgb(135, 78, 0) !important;
+    --pwt-color-warning-20: rgb(105, 58, 0) !important;
+    --pwt-color-warning-15: rgb(85, 45, 0) !important;
+    --pwt-color-warning-10: rgb(62, 32, 0) !important;
+    --pwt-color-warning-5: rgb(38, 18, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Catppuccin Latte Background scale (base #eff1f5) */
+    --pwt-color-neutral-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-99: rgb(250, 251, 254) !important;
+    --pwt-color-neutral-95: rgb(239, 241, 245) !important;
+    --pwt-color-neutral-90: rgb(230, 233, 239) !important;
+    --pwt-color-neutral-80: rgb(220, 224, 232) !important;
+    --pwt-color-neutral-70: rgb(204, 208, 218) !important;
+    --pwt-color-neutral-60: rgb(172, 176, 190) !important;
+    --pwt-color-neutral-50: rgb(140, 143, 161) !important;
+    --pwt-color-neutral-40: rgb(108, 111, 133) !important;
+    --pwt-color-neutral-30: rgb(92, 95, 119) !important;
+    --pwt-color-neutral-20: rgb(76, 79, 105) !important;
+    --pwt-color-neutral-15: rgb(64, 66, 88) !important;
+    --pwt-color-neutral-10: rgb(50, 52, 72) !important;
+    --pwt-color-neutral-5: rgb(35, 36, 52) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Catppuccin Latte Overlay tones */
+    --pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-alt-99: rgb(250, 251, 254) !important;
+    --pwt-color-neutral-alt-95: rgb(242, 244, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(232, 235, 242) !important;
+    --pwt-color-neutral-alt-80: rgb(215, 218, 228) !important;
+    --pwt-color-neutral-alt-70: rgb(188, 192, 204) !important;
+    --pwt-color-neutral-alt-60: rgb(156, 160, 176) !important;
+    --pwt-color-neutral-alt-50: rgb(124, 128, 148) !important;
+    --pwt-color-neutral-alt-40: rgb(96, 100, 120) !important;
+    --pwt-color-neutral-alt-30: rgb(76, 80, 100) !important;
+    --pwt-color-neutral-alt-20: rgb(58, 62, 82) !important;
+    --pwt-color-neutral-alt-15: rgb(46, 48, 68) !important;
+    --pwt-color-neutral-alt-10: rgb(34, 36, 54) !important;
+    --pwt-color-neutral-alt-5: rgb(22, 24, 38) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (light surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-background: var(--pwt-color-neutral-95) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
+    --pwt-color-primary: var(--pwt-color-primary-40) !important;
+    --pwt-color-on-primary: var(--pwt-color-primary-100) !important;
+    --pwt-color-primary-container: var(--pwt-color-primary-90) !important;
+    --pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
+    background: var(--pwt-color-neutral-95) !important;
+    color: var(--pwt-color-neutral-10) !important;
+    color-scheme: light !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-95) !important;
+}
+
+/* ===== Logo — swap to dark variant for light background ===== */
+img[src*="proxmox_logo_white"] {
+    content: url("/images/proxmox_logo.svg") !important;
+}

themes/pdm/theme-catppuccin-macchiato.css

@@ -0,0 +1,180 @@
+/*!Catppuccin Macchiato*/
+/*
+ * ProxMorph PDM Theme: Catppuccin Macchiato
+ * Overrides the PWT Material Design tonal color system with Catppuccin Macchiato palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Catppuccin Community Palette
+ *
+ * ─── Catppuccin Macchiato Palette ─────────────────────────────
+ * Mauve (accent): #c6a0f6    Blue:     #8aadf4
+ * Green:          #a6da95    Red:      #ed8796
+ * Yellow:         #eed49f    Pink:     #f5bde6
+ * Text:           #cad3f5    Base:     #24273a
+ * Surface0:       #363a4f    Mantle:   #1e2030
+ * Crust:          #181926
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Catppuccin Macchiato Mauve (#c6a0f6) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(252, 248, 255) !important;
+    --pwt-color-primary-95: rgb(240, 228, 254) !important;
+    --pwt-color-primary-90: rgb(225, 208, 250) !important;
+    --pwt-color-primary-80: rgb(198, 160, 246) !important;
+    --pwt-color-primary-70: rgb(175, 138, 225) !important;
+    --pwt-color-primary-60: rgb(150, 114, 200) !important;
+    --pwt-color-primary-50: rgb(126, 92, 178) !important;
+    --pwt-color-primary-40: rgb(102, 70, 152) !important;
+    --pwt-color-primary-30: rgb(80, 48, 128) !important;
+    --pwt-color-primary-20: rgb(58, 30, 102) !important;
+    --pwt-color-primary-15: rgb(46, 20, 85) !important;
+    --pwt-color-primary-10: rgb(35, 12, 68) !important;
+    --pwt-color-primary-5: rgb(22, 5, 46) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Catppuccin Macchiato Blue (#8aadf4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(222, 236, 255) !important;
+    --pwt-color-secondary-90: rgb(198, 220, 254) !important;
+    --pwt-color-secondary-80: rgb(158, 192, 248) !important;
+    --pwt-color-secondary-70: rgb(138, 173, 244) !important;
+    --pwt-color-secondary-60: rgb(112, 148, 218) !important;
+    --pwt-color-secondary-50: rgb(88, 124, 192) !important;
+    --pwt-color-secondary-40: rgb(66, 100, 166) !important;
+    --pwt-color-secondary-30: rgb(46, 78, 138) !important;
+    --pwt-color-secondary-20: rgb(28, 56, 110) !important;
+    --pwt-color-secondary-15: rgb(20, 44, 90) !important;
+    --pwt-color-secondary-10: rgb(12, 32, 70) !important;
+    --pwt-color-secondary-5: rgb(5, 18, 46) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Catppuccin Macchiato Pink (#f5bde6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 250, 253) !important;
+    --pwt-color-tertiary-95: rgb(255, 236, 248) !important;
+    --pwt-color-tertiary-90: rgb(252, 215, 242) !important;
+    --pwt-color-tertiary-80: rgb(245, 189, 230) !important;
+    --pwt-color-tertiary-70: rgb(225, 162, 208) !important;
+    --pwt-color-tertiary-60: rgb(200, 136, 184) !important;
+    --pwt-color-tertiary-50: rgb(175, 112, 160) !important;
+    --pwt-color-tertiary-40: rgb(150, 88, 136) !important;
+    --pwt-color-tertiary-30: rgb(124, 64, 112) !important;
+    --pwt-color-tertiary-20: rgb(98, 42, 88) !important;
+    --pwt-color-tertiary-15: rgb(80, 30, 72) !important;
+    --pwt-color-tertiary-10: rgb(62, 18, 56) !important;
+    --pwt-color-tertiary-5: rgb(42, 6, 36) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Catppuccin Macchiato Green (#a6da95) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(248, 255, 246) !important;
+    --pwt-color-success-95: rgb(218, 252, 212) !important;
+    --pwt-color-success-90: rgb(190, 242, 182) !important;
+    --pwt-color-success-80: rgb(166, 218, 149) !important;
+    --pwt-color-success-70: rgb(142, 195, 128) !important;
+    --pwt-color-success-60: rgb(118, 172, 105) !important;
+    --pwt-color-success-50: rgb(95, 148, 82) !important;
+    --pwt-color-success-40: rgb(72, 125, 60) !important;
+    --pwt-color-success-30: rgb(52, 100, 40) !important;
+    --pwt-color-success-20: rgb(34, 76, 22) !important;
+    --pwt-color-success-15: rgb(24, 60, 14) !important;
+    --pwt-color-success-10: rgb(15, 45, 6) !important;
+    --pwt-color-success-5: rgb(6, 28, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Catppuccin Macchiato Red (#ed8796) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 249) !important;
+    --pwt-color-error-95: rgb(255, 228, 232) !important;
+    --pwt-color-error-90: rgb(252, 205, 212) !important;
+    --pwt-color-error-80: rgb(245, 170, 180) !important;
+    --pwt-color-error-70: rgb(237, 135, 150) !important;
+    --pwt-color-error-60: rgb(215, 108, 125) !important;
+    --pwt-color-error-50: rgb(192, 85, 102) !important;
+    --pwt-color-error-40: rgb(168, 62, 78) !important;
+    --pwt-color-error-30: rgb(140, 40, 56) !important;
+    --pwt-color-error-20: rgb(112, 20, 36) !important;
+    --pwt-color-error-15: rgb(92, 10, 25) !important;
+    --pwt-color-error-10: rgb(70, 0, 15) !important;
+    --pwt-color-error-5: rgb(46, 0, 6) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Catppuccin Macchiato Yellow (#eed49f) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 248) !important;
+    --pwt-color-warning-95: rgb(252, 244, 222) !important;
+    --pwt-color-warning-90: rgb(248, 236, 195) !important;
+    --pwt-color-warning-80: rgb(238, 212, 159) !important;
+    --pwt-color-warning-70: rgb(218, 192, 132) !important;
+    --pwt-color-warning-60: rgb(195, 168, 106) !important;
+    --pwt-color-warning-50: rgb(172, 145, 82) !important;
+    --pwt-color-warning-40: rgb(148, 122, 60) !important;
+    --pwt-color-warning-30: rgb(122, 98, 40) !important;
+    --pwt-color-warning-20: rgb(95, 75, 22) !important;
+    --pwt-color-warning-15: rgb(76, 58, 12) !important;
+    --pwt-color-warning-10: rgb(56, 42, 4) !important;
+    --pwt-color-warning-5: rgb(35, 26, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Catppuccin Macchiato Background scale (base #24273a) */
+    --pwt-color-neutral-100: rgb(202, 211, 245) !important;
+    --pwt-color-neutral-99: rgb(195, 204, 240) !important;
+    --pwt-color-neutral-95: rgb(182, 192, 225) !important;
+    --pwt-color-neutral-90: rgb(164, 172, 205) !important;
+    --pwt-color-neutral-80: rgb(142, 150, 180) !important;
+    --pwt-color-neutral-70: rgb(120, 128, 158) !important;
+    --pwt-color-neutral-60: rgb(100, 106, 135) !important;
+    --pwt-color-neutral-50: rgb(82, 88, 112) !important;
+    --pwt-color-neutral-40: rgb(54, 58, 79) !important;
+    --pwt-color-neutral-30: rgb(36, 39, 58) !important;
+    --pwt-color-neutral-20: rgb(30, 32, 48) !important;
+    --pwt-color-neutral-15: rgb(24, 26, 38) !important;
+    --pwt-color-neutral-10: rgb(18, 19, 30) !important;
+    --pwt-color-neutral-5: rgb(12, 12, 20) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Catppuccin Macchiato Overlay tones */
+    --pwt-color-neutral-alt-100: rgb(202, 211, 245) !important;
+    --pwt-color-neutral-alt-99: rgb(196, 206, 242) !important;
+    --pwt-color-neutral-alt-95: rgb(184, 194, 228) !important;
+    --pwt-color-neutral-alt-90: rgb(166, 174, 208) !important;
+    --pwt-color-neutral-alt-80: rgb(144, 152, 184) !important;
+    --pwt-color-neutral-alt-70: rgb(122, 130, 160) !important;
+    --pwt-color-neutral-alt-60: rgb(102, 108, 138) !important;
+    --pwt-color-neutral-alt-50: rgb(84, 90, 115) !important;
+    --pwt-color-neutral-alt-40: rgb(56, 60, 82) !important;
+    --pwt-color-neutral-alt-30: rgb(38, 42, 62) !important;
+    --pwt-color-neutral-alt-20: rgb(30, 34, 50) !important;
+    --pwt-color-neutral-alt-15: rgb(25, 28, 40) !important;
+    --pwt-color-neutral-alt-10: rgb(19, 20, 32) !important;
+    --pwt-color-neutral-alt-5: rgb(12, 13, 22) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-catppuccin-mocha-teal.css

@@ -0,0 +1,185 @@
+/*!Catppuccin Mocha Teal*/
+/*
+ * ProxMorph PDM Theme: Catppuccin Mocha Teal
+ * Overrides the PWT Material Design tonal color system with Catppuccin Mocha Teal palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Catppuccin Community Palette
+ *
+ * ─── Catppuccin Mocha Teal Palette ────────────────────────────
+ * Teal (accent): #94e2d5    Blue:     #89b4fa
+ * Green:          #a6e3a1    Red:      #f38ba8
+ * Yellow:         #f9e2af    Pink:     #f5c2e7
+ * Text:           #cdd6f4    Base:     #1e1e2e
+ * Surface0:       #313244    Mantle:   #181825
+ * Crust:          #11111b
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Catppuccin Teal (#94e2d5) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(245, 254, 252) !important;
+    --pwt-color-primary-95: rgb(220, 250, 245) !important;
+    --pwt-color-primary-90: rgb(185, 242, 232) !important;
+    --pwt-color-primary-80: rgb(148, 226, 213) !important;
+    --pwt-color-primary-70: rgb(118, 198, 186) !important;
+    --pwt-color-primary-60: rgb(88, 170, 160) !important;
+    --pwt-color-primary-50: rgb(62, 145, 135) !important;
+    --pwt-color-primary-40: rgb(38, 118, 110) !important;
+    --pwt-color-primary-30: rgb(18, 92, 85) !important;
+    --pwt-color-primary-20: rgb(4, 68, 62) !important;
+    --pwt-color-primary-15: rgb(0, 54, 48) !important;
+    --pwt-color-primary-10: rgb(0, 40, 36) !important;
+    --pwt-color-primary-5: rgb(0, 25, 22) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Catppuccin Blue (#89b4fa) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 251, 255) !important;
+    --pwt-color-secondary-95: rgb(225, 238, 255) !important;
+    --pwt-color-secondary-90: rgb(200, 222, 255) !important;
+    --pwt-color-secondary-80: rgb(160, 195, 250) !important;
+    --pwt-color-secondary-70: rgb(137, 180, 250) !important;
+    --pwt-color-secondary-60: rgb(110, 155, 220) !important;
+    --pwt-color-secondary-50: rgb(88, 130, 195) !important;
+    --pwt-color-secondary-40: rgb(68, 108, 170) !important;
+    --pwt-color-secondary-30: rgb(48, 85, 142) !important;
+    --pwt-color-secondary-20: rgb(32, 62, 112) !important;
+    --pwt-color-secondary-15: rgb(24, 48, 92) !important;
+    --pwt-color-secondary-10: rgb(16, 35, 72) !important;
+    --pwt-color-secondary-5: rgb(8, 20, 48) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Catppuccin Pink (#f5c2e7) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 250, 254) !important;
+    --pwt-color-tertiary-95: rgb(255, 238, 248) !important;
+    --pwt-color-tertiary-90: rgb(255, 220, 240) !important;
+    --pwt-color-tertiary-80: rgb(245, 194, 231) !important;
+    --pwt-color-tertiary-70: rgb(225, 168, 210) !important;
+    --pwt-color-tertiary-60: rgb(200, 140, 185) !important;
+    --pwt-color-tertiary-50: rgb(175, 115, 162) !important;
+    --pwt-color-tertiary-40: rgb(150, 90, 138) !important;
+    --pwt-color-tertiary-30: rgb(125, 65, 112) !important;
+    --pwt-color-tertiary-20: rgb(98, 42, 88) !important;
+    --pwt-color-tertiary-15: rgb(80, 30, 72) !important;
+    --pwt-color-tertiary-10: rgb(62, 18, 55) !important;
+    --pwt-color-tertiary-5: rgb(42, 8, 38) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Catppuccin Green (#a6e3a1) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(245, 255, 244) !important;
+    --pwt-color-success-95: rgb(215, 255, 212) !important;
+    --pwt-color-success-90: rgb(185, 245, 182) !important;
+    --pwt-color-success-80: rgb(166, 227, 161) !important;
+    --pwt-color-success-70: rgb(140, 200, 136) !important;
+    --pwt-color-success-60: rgb(115, 175, 112) !important;
+    --pwt-color-success-50: rgb(90, 150, 88) !important;
+    --pwt-color-success-40: rgb(68, 125, 65) !important;
+    --pwt-color-success-30: rgb(48, 100, 45) !important;
+    --pwt-color-success-20: rgb(30, 76, 28) !important;
+    --pwt-color-success-15: rgb(20, 60, 18) !important;
+    --pwt-color-success-10: rgb(12, 45, 10) !important;
+    --pwt-color-success-5: rgb(5, 28, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Catppuccin Red (#f38ba8) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 249, 250) !important;
+    --pwt-color-error-95: rgb(255, 232, 238) !important;
+    --pwt-color-error-90: rgb(255, 210, 220) !important;
+    --pwt-color-error-80: rgb(248, 165, 185) !important;
+    --pwt-color-error-70: rgb(243, 139, 168) !important;
+    --pwt-color-error-60: rgb(220, 110, 140) !important;
+    --pwt-color-error-50: rgb(195, 85, 115) !important;
+    --pwt-color-error-40: rgb(170, 60, 90) !important;
+    --pwt-color-error-30: rgb(142, 38, 68) !important;
+    --pwt-color-error-20: rgb(110, 18, 48) !important;
+    --pwt-color-error-15: rgb(90, 8, 35) !important;
+    --pwt-color-error-10: rgb(68, 0, 22) !important;
+    --pwt-color-error-5: rgb(45, 0, 12) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Catppuccin Yellow (#f9e2af) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 253, 248) !important;
+    --pwt-color-warning-95: rgb(255, 248, 225) !important;
+    --pwt-color-warning-90: rgb(252, 240, 195) !important;
+    --pwt-color-warning-80: rgb(249, 226, 175) !important;
+    --pwt-color-warning-70: rgb(225, 200, 145) !important;
+    --pwt-color-warning-60: rgb(200, 178, 118) !important;
+    --pwt-color-warning-50: rgb(175, 155, 92) !important;
+    --pwt-color-warning-40: rgb(148, 130, 68) !important;
+    --pwt-color-warning-30: rgb(120, 105, 45) !important;
+    --pwt-color-warning-20: rgb(92, 80, 25) !important;
+    --pwt-color-warning-15: rgb(72, 62, 15) !important;
+    --pwt-color-warning-10: rgb(52, 45, 5) !important;
+    --pwt-color-warning-5: rgb(32, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Catppuccin Background scale */
+    --pwt-color-neutral-100: rgb(205, 214, 244) !important;
+    --pwt-color-neutral-99: rgb(198, 208, 240) !important;
+    --pwt-color-neutral-95: rgb(186, 194, 222) !important;
+    --pwt-color-neutral-90: rgb(166, 173, 200) !important;
+    --pwt-color-neutral-80: rgb(147, 153, 178) !important;
+    --pwt-color-neutral-70: rgb(127, 132, 156) !important;
+    --pwt-color-neutral-60: rgb(108, 112, 134) !important;
+    --pwt-color-neutral-50: rgb(88, 91, 112) !important;
+    --pwt-color-neutral-40: rgb(69, 71, 90) !important;
+    --pwt-color-neutral-30: rgb(49, 50, 68) !important;
+    --pwt-color-neutral-20: rgb(30, 30, 46) !important;
+    --pwt-color-neutral-15: rgb(24, 24, 37) !important;
+    --pwt-color-neutral-10: rgb(17, 17, 27) !important;
+    --pwt-color-neutral-5: rgb(10, 10, 18) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Catppuccin Overlay tones */
+    --pwt-color-neutral-alt-100: rgb(205, 214, 244) !important;
+    --pwt-color-neutral-alt-99: rgb(200, 210, 242) !important;
+    --pwt-color-neutral-alt-95: rgb(186, 194, 222) !important;
+    --pwt-color-neutral-alt-90: rgb(166, 173, 200) !important;
+    --pwt-color-neutral-alt-80: rgb(147, 153, 178) !important;
+    --pwt-color-neutral-alt-70: rgb(127, 132, 156) !important;
+    --pwt-color-neutral-alt-60: rgb(108, 112, 134) !important;
+    --pwt-color-neutral-alt-50: rgb(88, 91, 112) !important;
+    --pwt-color-neutral-alt-40: rgb(69, 71, 90) !important;
+    --pwt-color-neutral-alt-30: rgb(49, 50, 68) !important;
+    --pwt-color-neutral-alt-20: rgb(30, 30, 46) !important;
+    --pwt-color-neutral-alt-15: rgb(24, 24, 37) !important;
+    --pwt-color-neutral-alt-10: rgb(17, 17, 27) !important;
+    --pwt-color-neutral-alt-5: rgb(10, 10, 18) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-catppuccin-mocha.css

@@ -0,0 +1,185 @@
+/*!Catppuccin Mocha*/
+/*
+ * ProxMorph PDM Theme: Catppuccin Mocha
+ * Overrides the PWT Material Design tonal color system with Catppuccin Mocha palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Catppuccin Community Palette
+ *
+ * ─── Catppuccin Mocha Palette ──────────────────────────────────
+ * Mauve (accent): #cba6f7    Blue:     #89b4fa
+ * Green:          #a6e3a1    Red:      #f38ba8
+ * Yellow:         #f9e2af    Pink:     #f5c2e7
+ * Text:           #cdd6f4    Base:     #1e1e2e
+ * Surface0:       #313244    Mantle:   #181825
+ * Crust:          #11111b
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Catppuccin Mauve (#cba6f7) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(252, 248, 255) !important;
+    --pwt-color-primary-95: rgb(242, 232, 255) !important;
+    --pwt-color-primary-90: rgb(230, 215, 255) !important;
+    --pwt-color-primary-80: rgb(203, 166, 247) !important;
+    --pwt-color-primary-70: rgb(178, 140, 225) !important;
+    --pwt-color-primary-60: rgb(152, 115, 200) !important;
+    --pwt-color-primary-50: rgb(128, 92, 178) !important;
+    --pwt-color-primary-40: rgb(105, 70, 155) !important;
+    --pwt-color-primary-30: rgb(82, 50, 130) !important;
+    --pwt-color-primary-20: rgb(60, 32, 105) !important;
+    --pwt-color-primary-15: rgb(48, 22, 88) !important;
+    --pwt-color-primary-10: rgb(38, 14, 72) !important;
+    --pwt-color-primary-5: rgb(24, 6, 50) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Catppuccin Blue (#89b4fa) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 251, 255) !important;
+    --pwt-color-secondary-95: rgb(225, 238, 255) !important;
+    --pwt-color-secondary-90: rgb(200, 222, 255) !important;
+    --pwt-color-secondary-80: rgb(160, 195, 250) !important;
+    --pwt-color-secondary-70: rgb(137, 180, 250) !important;
+    --pwt-color-secondary-60: rgb(110, 155, 220) !important;
+    --pwt-color-secondary-50: rgb(88, 130, 195) !important;
+    --pwt-color-secondary-40: rgb(68, 108, 170) !important;
+    --pwt-color-secondary-30: rgb(48, 85, 142) !important;
+    --pwt-color-secondary-20: rgb(32, 62, 112) !important;
+    --pwt-color-secondary-15: rgb(24, 48, 92) !important;
+    --pwt-color-secondary-10: rgb(16, 35, 72) !important;
+    --pwt-color-secondary-5: rgb(8, 20, 48) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Catppuccin Pink (#f5c2e7) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 250, 254) !important;
+    --pwt-color-tertiary-95: rgb(255, 238, 248) !important;
+    --pwt-color-tertiary-90: rgb(255, 220, 240) !important;
+    --pwt-color-tertiary-80: rgb(245, 194, 231) !important;
+    --pwt-color-tertiary-70: rgb(225, 168, 210) !important;
+    --pwt-color-tertiary-60: rgb(200, 140, 185) !important;
+    --pwt-color-tertiary-50: rgb(175, 115, 162) !important;
+    --pwt-color-tertiary-40: rgb(150, 90, 138) !important;
+    --pwt-color-tertiary-30: rgb(125, 65, 112) !important;
+    --pwt-color-tertiary-20: rgb(98, 42, 88) !important;
+    --pwt-color-tertiary-15: rgb(80, 30, 72) !important;
+    --pwt-color-tertiary-10: rgb(62, 18, 55) !important;
+    --pwt-color-tertiary-5: rgb(42, 8, 38) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Catppuccin Green (#a6e3a1) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(245, 255, 244) !important;
+    --pwt-color-success-95: rgb(215, 255, 212) !important;
+    --pwt-color-success-90: rgb(185, 245, 182) !important;
+    --pwt-color-success-80: rgb(166, 227, 161) !important;
+    --pwt-color-success-70: rgb(140, 200, 136) !important;
+    --pwt-color-success-60: rgb(115, 175, 112) !important;
+    --pwt-color-success-50: rgb(90, 150, 88) !important;
+    --pwt-color-success-40: rgb(68, 125, 65) !important;
+    --pwt-color-success-30: rgb(48, 100, 45) !important;
+    --pwt-color-success-20: rgb(30, 76, 28) !important;
+    --pwt-color-success-15: rgb(20, 60, 18) !important;
+    --pwt-color-success-10: rgb(12, 45, 10) !important;
+    --pwt-color-success-5: rgb(5, 28, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Catppuccin Red (#f38ba8) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 249, 250) !important;
+    --pwt-color-error-95: rgb(255, 232, 238) !important;
+    --pwt-color-error-90: rgb(255, 210, 220) !important;
+    --pwt-color-error-80: rgb(248, 165, 185) !important;
+    --pwt-color-error-70: rgb(243, 139, 168) !important;
+    --pwt-color-error-60: rgb(220, 110, 140) !important;
+    --pwt-color-error-50: rgb(195, 85, 115) !important;
+    --pwt-color-error-40: rgb(170, 60, 90) !important;
+    --pwt-color-error-30: rgb(142, 38, 68) !important;
+    --pwt-color-error-20: rgb(110, 18, 48) !important;
+    --pwt-color-error-15: rgb(90, 8, 35) !important;
+    --pwt-color-error-10: rgb(68, 0, 22) !important;
+    --pwt-color-error-5: rgb(45, 0, 12) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Catppuccin Yellow (#f9e2af) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 253, 248) !important;
+    --pwt-color-warning-95: rgb(255, 248, 225) !important;
+    --pwt-color-warning-90: rgb(252, 240, 195) !important;
+    --pwt-color-warning-80: rgb(249, 226, 175) !important;
+    --pwt-color-warning-70: rgb(225, 200, 145) !important;
+    --pwt-color-warning-60: rgb(200, 178, 118) !important;
+    --pwt-color-warning-50: rgb(175, 155, 92) !important;
+    --pwt-color-warning-40: rgb(148, 130, 68) !important;
+    --pwt-color-warning-30: rgb(120, 105, 45) !important;
+    --pwt-color-warning-20: rgb(92, 80, 25) !important;
+    --pwt-color-warning-15: rgb(72, 62, 15) !important;
+    --pwt-color-warning-10: rgb(52, 45, 5) !important;
+    --pwt-color-warning-5: rgb(32, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Catppuccin Background scale */
+    --pwt-color-neutral-100: rgb(205, 214, 244) !important;
+    --pwt-color-neutral-99: rgb(198, 208, 240) !important;
+    --pwt-color-neutral-95: rgb(186, 194, 222) !important;
+    --pwt-color-neutral-90: rgb(166, 173, 200) !important;
+    --pwt-color-neutral-80: rgb(147, 153, 178) !important;
+    --pwt-color-neutral-70: rgb(127, 132, 156) !important;
+    --pwt-color-neutral-60: rgb(108, 112, 134) !important;
+    --pwt-color-neutral-50: rgb(88, 91, 112) !important;
+    --pwt-color-neutral-40: rgb(69, 71, 90) !important;
+    --pwt-color-neutral-30: rgb(49, 50, 68) !important;
+    --pwt-color-neutral-20: rgb(30, 30, 46) !important;
+    --pwt-color-neutral-15: rgb(24, 24, 37) !important;
+    --pwt-color-neutral-10: rgb(17, 17, 27) !important;
+    --pwt-color-neutral-5: rgb(10, 10, 18) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Catppuccin Overlay tones */
+    --pwt-color-neutral-alt-100: rgb(205, 214, 244) !important;
+    --pwt-color-neutral-alt-99: rgb(200, 210, 242) !important;
+    --pwt-color-neutral-alt-95: rgb(186, 194, 222) !important;
+    --pwt-color-neutral-alt-90: rgb(166, 173, 200) !important;
+    --pwt-color-neutral-alt-80: rgb(147, 153, 178) !important;
+    --pwt-color-neutral-alt-70: rgb(127, 132, 156) !important;
+    --pwt-color-neutral-alt-60: rgb(108, 112, 134) !important;
+    --pwt-color-neutral-alt-50: rgb(88, 91, 112) !important;
+    --pwt-color-neutral-alt-40: rgb(69, 71, 90) !important;
+    --pwt-color-neutral-alt-30: rgb(49, 50, 68) !important;
+    --pwt-color-neutral-alt-20: rgb(30, 30, 46) !important;
+    --pwt-color-neutral-alt-15: rgb(24, 24, 37) !important;
+    --pwt-color-neutral-alt-10: rgb(17, 17, 27) !important;
+    --pwt-color-neutral-alt-5: rgb(10, 10, 18) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-dracula-cyan.css

@@ -0,0 +1,181 @@
+/*!Dracula Cyan*/
+/*
+ * ProxMorph PDM Theme: Dracula Cyan
+ * Overrides the PWT Material Design tonal color system with Dracula Cyan palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Dracula Theme (https://draculatheme.com)
+ *
+ * ─── Dracula Cyan Palette ─────────────────────────────────────
+ * Background:   #282a36    Accent:   #8be9fd (Cyan)
+ * Foreground:   #f8f8f2    Comment:  #6272a4
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Dracula Cyan (#8be9fd) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(245, 253, 255) !important;
+    --pwt-color-primary-95: rgb(214, 247, 255) !important;
+    --pwt-color-primary-90: rgb(175, 240, 254) !important;
+    --pwt-color-primary-80: rgb(139, 233, 253) !important;
+    --pwt-color-primary-70: rgb(98, 200, 228) !important;
+    --pwt-color-primary-60: rgb(60, 168, 205) !important;
+    --pwt-color-primary-50: rgb(25, 138, 180) !important;
+    --pwt-color-primary-40: rgb(0, 110, 155) !important;
+    --pwt-color-primary-30: rgb(0, 82, 125) !important;
+    --pwt-color-primary-20: rgb(0, 58, 95) !important;
+    --pwt-color-primary-15: rgb(0, 45, 78) !important;
+    --pwt-color-primary-10: rgb(0, 32, 60) !important;
+    --pwt-color-primary-5: rgb(0, 18, 38) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Dracula Comment/Overlay (#6272a4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 236, 252) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 245) !important;
+    --pwt-color-secondary-80: rgb(178, 196, 230) !important;
+    --pwt-color-secondary-70: rgb(146, 163, 200) !important;
+    --pwt-color-secondary-60: rgb(118, 137, 180) !important;
+    --pwt-color-secondary-50: rgb(98, 114, 164) !important;
+    --pwt-color-secondary-40: rgb(78, 94, 140) !important;
+    --pwt-color-secondary-30: rgb(58, 72, 115) !important;
+    --pwt-color-secondary-20: rgb(40, 52, 90) !important;
+    --pwt-color-secondary-15: rgb(32, 42, 75) !important;
+    --pwt-color-secondary-10: rgb(24, 32, 60) !important;
+    --pwt-color-secondary-5: rgb(16, 20, 42) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 234, 244) !important;
+    --pwt-color-tertiary-90: rgb(255, 210, 232) !important;
+    --pwt-color-tertiary-80: rgb(255, 165, 210) !important;
+    --pwt-color-tertiary-70: rgb(255, 121, 198) !important;
+    --pwt-color-tertiary-60: rgb(230, 95, 175) !important;
+    --pwt-color-tertiary-50: rgb(200, 70, 150) !important;
+    --pwt-color-tertiary-40: rgb(170, 48, 125) !important;
+    --pwt-color-tertiary-30: rgb(140, 28, 100) !important;
+    --pwt-color-tertiary-20: rgb(108, 12, 78) !important;
+    --pwt-color-tertiary-15: rgb(88, 4, 62) !important;
+    --pwt-color-tertiary-10: rgb(68, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(45, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(240, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 215) !important;
+    --pwt-color-success-90: rgb(140, 255, 175) !important;
+    --pwt-color-success-80: rgb(80, 250, 123) !important;
+    --pwt-color-success-70: rgb(55, 220, 98) !important;
+    --pwt-color-success-60: rgb(30, 190, 75) !important;
+    --pwt-color-success-50: rgb(10, 160, 55) !important;
+    --pwt-color-success-40: rgb(0, 130, 40) !important;
+    --pwt-color-success-30: rgb(0, 100, 28) !important;
+    --pwt-color-success-20: rgb(0, 72, 18) !important;
+    --pwt-color-success-15: rgb(0, 55, 12) !important;
+    --pwt-color-success-10: rgb(0, 40, 8) !important;
+    --pwt-color-success-5: rgb(0, 25, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Dracula Red (#ff5555) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 230, 230) !important;
+    --pwt-color-error-90: rgb(255, 205, 205) !important;
+    --pwt-color-error-80: rgb(255, 150, 150) !important;
+    --pwt-color-error-70: rgb(255, 110, 110) !important;
+    --pwt-color-error-60: rgb(255, 85, 85) !important;
+    --pwt-color-error-50: rgb(230, 60, 60) !important;
+    --pwt-color-error-40: rgb(200, 38, 38) !important;
+    --pwt-color-error-30: rgb(168, 16, 16) !important;
+    --pwt-color-error-20: rgb(120, 10, 10) !important;
+    --pwt-color-error-15: rgb(95, 5, 5) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(48, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Dracula Yellow (#f1fa8c) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 254, 248) !important;
+    --pwt-color-warning-95: rgb(252, 255, 210) !important;
+    --pwt-color-warning-90: rgb(245, 252, 160) !important;
+    --pwt-color-warning-80: rgb(241, 250, 140) !important;
+    --pwt-color-warning-70: rgb(218, 228, 100) !important;
+    --pwt-color-warning-60: rgb(195, 205, 65) !important;
+    --pwt-color-warning-50: rgb(170, 180, 35) !important;
+    --pwt-color-warning-40: rgb(140, 150, 15) !important;
+    --pwt-color-warning-30: rgb(110, 118, 0) !important;
+    --pwt-color-warning-20: rgb(80, 85, 0) !important;
+    --pwt-color-warning-15: rgb(60, 65, 0) !important;
+    --pwt-color-warning-10: rgb(42, 46, 0) !important;
+    --pwt-color-warning-5: rgb(25, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Dracula Background/Surface scale */
+    --pwt-color-neutral-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-99: rgb(240, 240, 236) !important;
+    --pwt-color-neutral-95: rgb(220, 222, 218) !important;
+    --pwt-color-neutral-90: rgb(208, 212, 224) !important;
+    --pwt-color-neutral-80: rgb(176, 181, 200) !important;
+    --pwt-color-neutral-70: rgb(146, 152, 184) !important;
+    --pwt-color-neutral-60: rgb(124, 131, 160) !important;
+    --pwt-color-neutral-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-40: rgb(86, 90, 114) !important;
+    --pwt-color-neutral-30: rgb(68, 71, 90) !important;
+    --pwt-color-neutral-20: rgb(40, 42, 54) !important;
+    --pwt-color-neutral-15: rgb(33, 34, 44) !important;
+    --pwt-color-neutral-10: rgb(30, 31, 41) !important;
+    --pwt-color-neutral-5: rgb(22, 23, 30) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Dracula Comment tones */
+    --pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
+    --pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
+    --pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
+    --pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
+    --pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
+    --pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-alt-40: rgb(80, 90, 130) !important;
+    --pwt-color-neutral-alt-30: rgb(60, 68, 105) !important;
+    --pwt-color-neutral-alt-20: rgb(44, 50, 80) !important;
+    --pwt-color-neutral-alt-15: rgb(36, 40, 65) !important;
+    --pwt-color-neutral-alt-10: rgb(28, 32, 52) !important;
+    --pwt-color-neutral-alt-5: rgb(18, 20, 35) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-dracula-green.css

@@ -0,0 +1,181 @@
+/*!Dracula Green*/
+/*
+ * ProxMorph PDM Theme: Dracula Green
+ * Overrides the PWT Material Design tonal color system with Dracula Green palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Dracula Theme (https://draculatheme.com)
+ *
+ * ─── Dracula Green Palette ────────────────────────────────────
+ * Background:   #1c2820    Accent:   #50fa7b (Green)
+ * Foreground:   #f8f8f2    Comment:  #6272a4
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(240, 255, 245) !important;
+    --pwt-color-primary-95: rgb(200, 255, 215) !important;
+    --pwt-color-primary-90: rgb(140, 255, 175) !important;
+    --pwt-color-primary-80: rgb(80, 250, 123) !important;
+    --pwt-color-primary-70: rgb(55, 220, 98) !important;
+    --pwt-color-primary-60: rgb(30, 190, 75) !important;
+    --pwt-color-primary-50: rgb(10, 160, 55) !important;
+    --pwt-color-primary-40: rgb(0, 130, 40) !important;
+    --pwt-color-primary-30: rgb(0, 100, 28) !important;
+    --pwt-color-primary-20: rgb(0, 72, 18) !important;
+    --pwt-color-primary-15: rgb(0, 55, 12) !important;
+    --pwt-color-primary-10: rgb(0, 40, 8) !important;
+    --pwt-color-primary-5: rgb(0, 25, 4) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Dracula Comment/Overlay (#6272a4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 236, 252) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 245) !important;
+    --pwt-color-secondary-80: rgb(178, 196, 230) !important;
+    --pwt-color-secondary-70: rgb(146, 163, 200) !important;
+    --pwt-color-secondary-60: rgb(118, 137, 180) !important;
+    --pwt-color-secondary-50: rgb(98, 114, 164) !important;
+    --pwt-color-secondary-40: rgb(78, 94, 140) !important;
+    --pwt-color-secondary-30: rgb(58, 72, 115) !important;
+    --pwt-color-secondary-20: rgb(40, 52, 90) !important;
+    --pwt-color-secondary-15: rgb(32, 42, 75) !important;
+    --pwt-color-secondary-10: rgb(24, 32, 60) !important;
+    --pwt-color-secondary-5: rgb(16, 20, 42) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 234, 244) !important;
+    --pwt-color-tertiary-90: rgb(255, 210, 232) !important;
+    --pwt-color-tertiary-80: rgb(255, 165, 210) !important;
+    --pwt-color-tertiary-70: rgb(255, 121, 198) !important;
+    --pwt-color-tertiary-60: rgb(230, 95, 175) !important;
+    --pwt-color-tertiary-50: rgb(200, 70, 150) !important;
+    --pwt-color-tertiary-40: rgb(170, 48, 125) !important;
+    --pwt-color-tertiary-30: rgb(140, 28, 100) !important;
+    --pwt-color-tertiary-20: rgb(108, 12, 78) !important;
+    --pwt-color-tertiary-15: rgb(88, 4, 62) !important;
+    --pwt-color-tertiary-10: rgb(68, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(45, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(240, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 215) !important;
+    --pwt-color-success-90: rgb(140, 255, 175) !important;
+    --pwt-color-success-80: rgb(80, 250, 123) !important;
+    --pwt-color-success-70: rgb(55, 220, 98) !important;
+    --pwt-color-success-60: rgb(30, 190, 75) !important;
+    --pwt-color-success-50: rgb(10, 160, 55) !important;
+    --pwt-color-success-40: rgb(0, 130, 40) !important;
+    --pwt-color-success-30: rgb(0, 100, 28) !important;
+    --pwt-color-success-20: rgb(0, 72, 18) !important;
+    --pwt-color-success-15: rgb(0, 55, 12) !important;
+    --pwt-color-success-10: rgb(0, 40, 8) !important;
+    --pwt-color-success-5: rgb(0, 25, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Dracula Red (#ff5555) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 230, 230) !important;
+    --pwt-color-error-90: rgb(255, 205, 205) !important;
+    --pwt-color-error-80: rgb(255, 150, 150) !important;
+    --pwt-color-error-70: rgb(255, 110, 110) !important;
+    --pwt-color-error-60: rgb(255, 85, 85) !important;
+    --pwt-color-error-50: rgb(230, 60, 60) !important;
+    --pwt-color-error-40: rgb(200, 38, 38) !important;
+    --pwt-color-error-30: rgb(168, 16, 16) !important;
+    --pwt-color-error-20: rgb(120, 10, 10) !important;
+    --pwt-color-error-15: rgb(95, 5, 5) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(48, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Dracula Yellow (#f1fa8c) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 254, 248) !important;
+    --pwt-color-warning-95: rgb(252, 255, 210) !important;
+    --pwt-color-warning-90: rgb(245, 252, 160) !important;
+    --pwt-color-warning-80: rgb(241, 250, 140) !important;
+    --pwt-color-warning-70: rgb(218, 228, 100) !important;
+    --pwt-color-warning-60: rgb(195, 205, 65) !important;
+    --pwt-color-warning-50: rgb(170, 180, 35) !important;
+    --pwt-color-warning-40: rgb(140, 150, 15) !important;
+    --pwt-color-warning-30: rgb(110, 118, 0) !important;
+    --pwt-color-warning-20: rgb(80, 85, 0) !important;
+    --pwt-color-warning-15: rgb(60, 65, 0) !important;
+    --pwt-color-warning-10: rgb(42, 46, 0) !important;
+    --pwt-color-warning-5: rgb(25, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+
+    /* Neutral — Dracula Green (forest-tinted) Background/Surface scale */
+    --pwt-color-neutral-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-99: rgb(238, 242, 240) !important;
+    --pwt-color-neutral-95: rgb(215, 225, 218) !important;
+    --pwt-color-neutral-90: rgb(200, 215, 205) !important;
+    --pwt-color-neutral-80: rgb(165, 185, 175) !important;
+    --pwt-color-neutral-70: rgb(130, 155, 145) !important;
+    --pwt-color-neutral-60: rgb(100, 130, 118) !important;
+    --pwt-color-neutral-50: rgb(75, 105, 92) !important;
+    --pwt-color-neutral-40: rgb(60, 85, 72) !important;
+    --pwt-color-neutral-30: rgb(46, 68, 56) !important;
+    --pwt-color-neutral-20: rgb(28, 40, 32) !important;
+    --pwt-color-neutral-15: rgb(22, 32, 26) !important;
+    --pwt-color-neutral-10: rgb(16, 24, 20) !important;
+    --pwt-color-neutral-5: rgb(10, 15, 12) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Dracula Green Comment tones */
+    --pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-alt-99: rgb(238, 242, 240) !important;
+    --pwt-color-neutral-alt-95: rgb(218, 228, 222) !important;
+    --pwt-color-neutral-alt-90: rgb(200, 212, 205) !important;
+    --pwt-color-neutral-alt-80: rgb(168, 182, 175) !important;
+    --pwt-color-neutral-alt-70: rgb(135, 152, 145) !important;
+    --pwt-color-neutral-alt-60: rgb(105, 125, 118) !important;
+    --pwt-color-neutral-alt-50: rgb(80, 100, 92) !important;
+    --pwt-color-neutral-alt-40: rgb(62, 82, 72) !important;
+    --pwt-color-neutral-alt-30: rgb(48, 65, 55) !important;
+    --pwt-color-neutral-alt-20: rgb(32, 45, 36) !important;
+    --pwt-color-neutral-alt-15: rgb(25, 36, 28) !important;
+    --pwt-color-neutral-alt-10: rgb(18, 28, 22) !important;
+    --pwt-color-neutral-alt-5: rgb(10, 16, 12) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-dracula-midnight.css

@@ -0,0 +1,182 @@
+/*!Dracula Midnight*/
+/*
+ * ProxMorph PDM Theme: Dracula Midnight
+ * Overrides the PWT Material Design tonal color system with Dracula Midnight palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Dracula Theme (https://draculatheme.com)
+ *
+ * ─── Dracula Midnight Palette ─────────────────────────────────
+ * Background:   #191a21    Accent:   #bd93f9 (Purple)
+ * Foreground:   #f8f8f2    Comment:  #6272a4
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Dracula Purple (#bd93f9) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(252, 248, 255) !important;
+    --pwt-color-primary-95: rgb(240, 230, 255) !important;
+    --pwt-color-primary-90: rgb(225, 210, 255) !important;
+    --pwt-color-primary-80: rgb(189, 147, 249) !important;
+    --pwt-color-primary-70: rgb(163, 120, 230) !important;
+    --pwt-color-primary-60: rgb(137, 95, 210) !important;
+    --pwt-color-primary-50: rgb(112, 72, 190) !important;
+    --pwt-color-primary-40: rgb(88, 52, 168) !important;
+    --pwt-color-primary-30: rgb(65, 35, 140) !important;
+    --pwt-color-primary-20: rgb(46, 20, 110) !important;
+    --pwt-color-primary-15: rgb(36, 12, 90) !important;
+    --pwt-color-primary-10: rgb(28, 5, 72) !important;
+    --pwt-color-primary-5: rgb(18, 2, 48) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+
+    /* Secondary — Dracula Comment/Overlay (#6272a4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 236, 252) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 245) !important;
+    --pwt-color-secondary-80: rgb(178, 196, 230) !important;
+    --pwt-color-secondary-70: rgb(146, 163, 200) !important;
+    --pwt-color-secondary-60: rgb(118, 137, 180) !important;
+    --pwt-color-secondary-50: rgb(98, 114, 164) !important;
+    --pwt-color-secondary-40: rgb(78, 94, 140) !important;
+    --pwt-color-secondary-30: rgb(58, 72, 115) !important;
+    --pwt-color-secondary-20: rgb(40, 52, 90) !important;
+    --pwt-color-secondary-15: rgb(32, 42, 75) !important;
+    --pwt-color-secondary-10: rgb(24, 32, 60) !important;
+    --pwt-color-secondary-5: rgb(16, 20, 42) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 234, 244) !important;
+    --pwt-color-tertiary-90: rgb(255, 210, 232) !important;
+    --pwt-color-tertiary-80: rgb(255, 165, 210) !important;
+    --pwt-color-tertiary-70: rgb(255, 121, 198) !important;
+    --pwt-color-tertiary-60: rgb(230, 95, 175) !important;
+    --pwt-color-tertiary-50: rgb(200, 70, 150) !important;
+    --pwt-color-tertiary-40: rgb(170, 48, 125) !important;
+    --pwt-color-tertiary-30: rgb(140, 28, 100) !important;
+    --pwt-color-tertiary-20: rgb(108, 12, 78) !important;
+    --pwt-color-tertiary-15: rgb(88, 4, 62) !important;
+    --pwt-color-tertiary-10: rgb(68, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(45, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(240, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 215) !important;
+    --pwt-color-success-90: rgb(140, 255, 175) !important;
+    --pwt-color-success-80: rgb(80, 250, 123) !important;
+    --pwt-color-success-70: rgb(55, 220, 98) !important;
+    --pwt-color-success-60: rgb(30, 190, 75) !important;
+    --pwt-color-success-50: rgb(10, 160, 55) !important;
+    --pwt-color-success-40: rgb(0, 130, 40) !important;
+    --pwt-color-success-30: rgb(0, 100, 28) !important;
+    --pwt-color-success-20: rgb(0, 72, 18) !important;
+    --pwt-color-success-15: rgb(0, 55, 12) !important;
+    --pwt-color-success-10: rgb(0, 40, 8) !important;
+    --pwt-color-success-5: rgb(0, 25, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Dracula Red (#ff5555) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 230, 230) !important;
+    --pwt-color-error-90: rgb(255, 205, 205) !important;
+    --pwt-color-error-80: rgb(255, 150, 150) !important;
+    --pwt-color-error-70: rgb(255, 110, 110) !important;
+    --pwt-color-error-60: rgb(255, 85, 85) !important;
+    --pwt-color-error-50: rgb(230, 60, 60) !important;
+    --pwt-color-error-40: rgb(200, 38, 38) !important;
+    --pwt-color-error-30: rgb(168, 16, 16) !important;
+    --pwt-color-error-20: rgb(120, 10, 10) !important;
+    --pwt-color-error-15: rgb(95, 5, 5) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(48, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Dracula Yellow (#f1fa8c) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 254, 248) !important;
+    --pwt-color-warning-95: rgb(252, 255, 210) !important;
+    --pwt-color-warning-90: rgb(245, 252, 160) !important;
+    --pwt-color-warning-80: rgb(241, 250, 140) !important;
+    --pwt-color-warning-70: rgb(218, 228, 100) !important;
+    --pwt-color-warning-60: rgb(195, 205, 65) !important;
+    --pwt-color-warning-50: rgb(170, 180, 35) !important;
+    --pwt-color-warning-40: rgb(140, 150, 15) !important;
+    --pwt-color-warning-30: rgb(110, 118, 0) !important;
+    --pwt-color-warning-20: rgb(80, 85, 0) !important;
+    --pwt-color-warning-15: rgb(60, 65, 0) !important;
+    --pwt-color-warning-10: rgb(42, 46, 0) !important;
+    --pwt-color-warning-5: rgb(25, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+
+    /* Neutral — Dracula Midnight (darker) Background/Surface scale */
+    --pwt-color-neutral-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-99: rgb(240, 240, 236) !important;
+    --pwt-color-neutral-95: rgb(220, 222, 218) !important;
+    --pwt-color-neutral-90: rgb(208, 212, 224) !important;
+    --pwt-color-neutral-80: rgb(176, 181, 200) !important;
+    --pwt-color-neutral-70: rgb(146, 152, 184) !important;
+    --pwt-color-neutral-60: rgb(124, 131, 160) !important;
+    --pwt-color-neutral-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-40: rgb(76, 80, 102) !important;
+    --pwt-color-neutral-30: rgb(55, 58, 76) !important;
+    --pwt-color-neutral-20: rgb(36, 38, 50) !important;
+    --pwt-color-neutral-15: rgb(28, 30, 40) !important;
+    --pwt-color-neutral-10: rgb(22, 23, 32) !important;
+    --pwt-color-neutral-5: rgb(16, 16, 22) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Dracula Midnight Comment tones */
+    --pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
+    --pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
+    --pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
+    --pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
+    --pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
+    --pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-alt-40: rgb(72, 82, 120) !important;
+    --pwt-color-neutral-alt-30: rgb(52, 60, 95) !important;
+    --pwt-color-neutral-alt-20: rgb(36, 42, 70) !important;
+    --pwt-color-neutral-alt-15: rgb(28, 32, 55) !important;
+    --pwt-color-neutral-alt-10: rgb(22, 25, 42) !important;
+    --pwt-color-neutral-alt-5: rgb(14, 15, 28) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-dracula-orange.css

@@ -0,0 +1,181 @@
+/*!Dracula Orange*/
+/*
+ * ProxMorph PDM Theme: Dracula Orange
+ * Overrides the PWT Material Design tonal color system with Dracula Orange palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Dracula Theme (https://draculatheme.com)
+ *
+ * ─── Dracula Orange Palette ───────────────────────────────────
+ * Background:   #26201b    Accent:   #ffb86c (Orange)
+ * Foreground:   #f8f8f2    Comment:  #6272a4
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Dracula Orange (#ffb86c) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(255, 252, 248) !important;
+    --pwt-color-primary-95: rgb(255, 240, 222) !important;
+    --pwt-color-primary-90: rgb(255, 225, 185) !important;
+    --pwt-color-primary-80: rgb(255, 184, 108) !important;
+    --pwt-color-primary-70: rgb(230, 158, 82) !important;
+    --pwt-color-primary-60: rgb(205, 132, 58) !important;
+    --pwt-color-primary-50: rgb(180, 108, 38) !important;
+    --pwt-color-primary-40: rgb(152, 86, 22) !important;
+    --pwt-color-primary-30: rgb(122, 65, 10) !important;
+    --pwt-color-primary-20: rgb(90, 46, 2) !important;
+    --pwt-color-primary-15: rgb(72, 36, 0) !important;
+    --pwt-color-primary-10: rgb(55, 26, 0) !important;
+    --pwt-color-primary-5: rgb(35, 15, 0) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Dracula Comment/Overlay (#6272a4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 236, 252) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 245) !important;
+    --pwt-color-secondary-80: rgb(178, 196, 230) !important;
+    --pwt-color-secondary-70: rgb(146, 163, 200) !important;
+    --pwt-color-secondary-60: rgb(118, 137, 180) !important;
+    --pwt-color-secondary-50: rgb(98, 114, 164) !important;
+    --pwt-color-secondary-40: rgb(78, 94, 140) !important;
+    --pwt-color-secondary-30: rgb(58, 72, 115) !important;
+    --pwt-color-secondary-20: rgb(40, 52, 90) !important;
+    --pwt-color-secondary-15: rgb(32, 42, 75) !important;
+    --pwt-color-secondary-10: rgb(24, 32, 60) !important;
+    --pwt-color-secondary-5: rgb(16, 20, 42) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 234, 244) !important;
+    --pwt-color-tertiary-90: rgb(255, 210, 232) !important;
+    --pwt-color-tertiary-80: rgb(255, 165, 210) !important;
+    --pwt-color-tertiary-70: rgb(255, 121, 198) !important;
+    --pwt-color-tertiary-60: rgb(230, 95, 175) !important;
+    --pwt-color-tertiary-50: rgb(200, 70, 150) !important;
+    --pwt-color-tertiary-40: rgb(170, 48, 125) !important;
+    --pwt-color-tertiary-30: rgb(140, 28, 100) !important;
+    --pwt-color-tertiary-20: rgb(108, 12, 78) !important;
+    --pwt-color-tertiary-15: rgb(88, 4, 62) !important;
+    --pwt-color-tertiary-10: rgb(68, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(45, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(240, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 215) !important;
+    --pwt-color-success-90: rgb(140, 255, 175) !important;
+    --pwt-color-success-80: rgb(80, 250, 123) !important;
+    --pwt-color-success-70: rgb(55, 220, 98) !important;
+    --pwt-color-success-60: rgb(30, 190, 75) !important;
+    --pwt-color-success-50: rgb(10, 160, 55) !important;
+    --pwt-color-success-40: rgb(0, 130, 40) !important;
+    --pwt-color-success-30: rgb(0, 100, 28) !important;
+    --pwt-color-success-20: rgb(0, 72, 18) !important;
+    --pwt-color-success-15: rgb(0, 55, 12) !important;
+    --pwt-color-success-10: rgb(0, 40, 8) !important;
+    --pwt-color-success-5: rgb(0, 25, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Dracula Red (#ff5555) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 230, 230) !important;
+    --pwt-color-error-90: rgb(255, 205, 205) !important;
+    --pwt-color-error-80: rgb(255, 150, 150) !important;
+    --pwt-color-error-70: rgb(255, 110, 110) !important;
+    --pwt-color-error-60: rgb(255, 85, 85) !important;
+    --pwt-color-error-50: rgb(230, 60, 60) !important;
+    --pwt-color-error-40: rgb(200, 38, 38) !important;
+    --pwt-color-error-30: rgb(168, 16, 16) !important;
+    --pwt-color-error-20: rgb(120, 10, 10) !important;
+    --pwt-color-error-15: rgb(95, 5, 5) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(48, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Dracula Yellow (#f1fa8c) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 254, 248) !important;
+    --pwt-color-warning-95: rgb(252, 255, 210) !important;
+    --pwt-color-warning-90: rgb(245, 252, 160) !important;
+    --pwt-color-warning-80: rgb(241, 250, 140) !important;
+    --pwt-color-warning-70: rgb(218, 228, 100) !important;
+    --pwt-color-warning-60: rgb(195, 205, 65) !important;
+    --pwt-color-warning-50: rgb(170, 180, 35) !important;
+    --pwt-color-warning-40: rgb(140, 150, 15) !important;
+    --pwt-color-warning-30: rgb(110, 118, 0) !important;
+    --pwt-color-warning-20: rgb(80, 85, 0) !important;
+    --pwt-color-warning-15: rgb(60, 65, 0) !important;
+    --pwt-color-warning-10: rgb(42, 46, 0) !important;
+    --pwt-color-warning-5: rgb(25, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+
+    /* Neutral — Dracula Orange (warm-tinted) Background/Surface scale */
+    --pwt-color-neutral-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-99: rgb(242, 240, 236) !important;
+    --pwt-color-neutral-95: rgb(228, 222, 215) !important;
+    --pwt-color-neutral-90: rgb(212, 205, 198) !important;
+    --pwt-color-neutral-80: rgb(180, 172, 162) !important;
+    --pwt-color-neutral-70: rgb(148, 140, 130) !important;
+    --pwt-color-neutral-60: rgb(120, 112, 102) !important;
+    --pwt-color-neutral-50: rgb(95, 88, 78) !important;
+    --pwt-color-neutral-40: rgb(75, 68, 58) !important;
+    --pwt-color-neutral-30: rgb(58, 52, 44) !important;
+    --pwt-color-neutral-20: rgb(38, 32, 27) !important;
+    --pwt-color-neutral-15: rgb(30, 26, 22) !important;
+    --pwt-color-neutral-10: rgb(22, 20, 17) !important;
+    --pwt-color-neutral-5: rgb(14, 12, 10) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Dracula Orange Comment tones */
+    --pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-alt-99: rgb(242, 240, 236) !important;
+    --pwt-color-neutral-alt-95: rgb(230, 225, 218) !important;
+    --pwt-color-neutral-alt-90: rgb(215, 208, 200) !important;
+    --pwt-color-neutral-alt-80: rgb(182, 175, 166) !important;
+    --pwt-color-neutral-alt-70: rgb(150, 142, 132) !important;
+    --pwt-color-neutral-alt-60: rgb(122, 115, 105) !important;
+    --pwt-color-neutral-alt-50: rgb(98, 90, 80) !important;
+    --pwt-color-neutral-alt-40: rgb(78, 70, 60) !important;
+    --pwt-color-neutral-alt-30: rgb(60, 54, 45) !important;
+    --pwt-color-neutral-alt-20: rgb(42, 36, 30) !important;
+    --pwt-color-neutral-alt-15: rgb(34, 28, 24) !important;
+    --pwt-color-neutral-alt-10: rgb(25, 22, 18) !important;
+    --pwt-color-neutral-alt-5: rgb(16, 14, 11) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-dracula-pink.css

@@ -0,0 +1,181 @@
+/*!Dracula Pink*/
+/*
+ * ProxMorph PDM Theme: Dracula Pink
+ * Overrides the PWT Material Design tonal color system with Dracula Pink palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Dracula Theme (https://draculatheme.com)
+ *
+ * ─── Dracula Pink Palette ─────────────────────────────────────
+ * Background:   #282a36    Accent:   #ff79c6 (Pink)
+ * Foreground:   #f8f8f2    Comment:  #6272a4
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(255, 248, 252) !important;
+    --pwt-color-primary-95: rgb(255, 230, 242) !important;
+    --pwt-color-primary-90: rgb(255, 195, 225) !important;
+    --pwt-color-primary-80: rgb(255, 121, 198) !important;
+    --pwt-color-primary-70: rgb(230, 95, 175) !important;
+    --pwt-color-primary-60: rgb(200, 70, 150) !important;
+    --pwt-color-primary-50: rgb(170, 50, 125) !important;
+    --pwt-color-primary-40: rgb(140, 35, 100) !important;
+    --pwt-color-primary-30: rgb(110, 20, 78) !important;
+    --pwt-color-primary-20: rgb(82, 10, 58) !important;
+    --pwt-color-primary-15: rgb(65, 4, 45) !important;
+    --pwt-color-primary-10: rgb(50, 0, 35) !important;
+    --pwt-color-primary-5: rgb(30, 0, 20) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Dracula Comment/Overlay (#6272a4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 236, 252) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 245) !important;
+    --pwt-color-secondary-80: rgb(178, 196, 230) !important;
+    --pwt-color-secondary-70: rgb(146, 163, 200) !important;
+    --pwt-color-secondary-60: rgb(118, 137, 180) !important;
+    --pwt-color-secondary-50: rgb(98, 114, 164) !important;
+    --pwt-color-secondary-40: rgb(78, 94, 140) !important;
+    --pwt-color-secondary-30: rgb(58, 72, 115) !important;
+    --pwt-color-secondary-20: rgb(40, 52, 90) !important;
+    --pwt-color-secondary-15: rgb(32, 42, 75) !important;
+    --pwt-color-secondary-10: rgb(24, 32, 60) !important;
+    --pwt-color-secondary-5: rgb(16, 20, 42) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 234, 244) !important;
+    --pwt-color-tertiary-90: rgb(255, 210, 232) !important;
+    --pwt-color-tertiary-80: rgb(255, 165, 210) !important;
+    --pwt-color-tertiary-70: rgb(255, 121, 198) !important;
+    --pwt-color-tertiary-60: rgb(230, 95, 175) !important;
+    --pwt-color-tertiary-50: rgb(200, 70, 150) !important;
+    --pwt-color-tertiary-40: rgb(170, 48, 125) !important;
+    --pwt-color-tertiary-30: rgb(140, 28, 100) !important;
+    --pwt-color-tertiary-20: rgb(108, 12, 78) !important;
+    --pwt-color-tertiary-15: rgb(88, 4, 62) !important;
+    --pwt-color-tertiary-10: rgb(68, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(45, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(240, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 215) !important;
+    --pwt-color-success-90: rgb(140, 255, 175) !important;
+    --pwt-color-success-80: rgb(80, 250, 123) !important;
+    --pwt-color-success-70: rgb(55, 220, 98) !important;
+    --pwt-color-success-60: rgb(30, 190, 75) !important;
+    --pwt-color-success-50: rgb(10, 160, 55) !important;
+    --pwt-color-success-40: rgb(0, 130, 40) !important;
+    --pwt-color-success-30: rgb(0, 100, 28) !important;
+    --pwt-color-success-20: rgb(0, 72, 18) !important;
+    --pwt-color-success-15: rgb(0, 55, 12) !important;
+    --pwt-color-success-10: rgb(0, 40, 8) !important;
+    --pwt-color-success-5: rgb(0, 25, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Dracula Red (#ff5555) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 230, 230) !important;
+    --pwt-color-error-90: rgb(255, 205, 205) !important;
+    --pwt-color-error-80: rgb(255, 150, 150) !important;
+    --pwt-color-error-70: rgb(255, 110, 110) !important;
+    --pwt-color-error-60: rgb(255, 85, 85) !important;
+    --pwt-color-error-50: rgb(230, 60, 60) !important;
+    --pwt-color-error-40: rgb(200, 38, 38) !important;
+    --pwt-color-error-30: rgb(168, 16, 16) !important;
+    --pwt-color-error-20: rgb(120, 10, 10) !important;
+    --pwt-color-error-15: rgb(95, 5, 5) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(48, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Dracula Yellow (#f1fa8c) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 254, 248) !important;
+    --pwt-color-warning-95: rgb(252, 255, 210) !important;
+    --pwt-color-warning-90: rgb(245, 252, 160) !important;
+    --pwt-color-warning-80: rgb(241, 250, 140) !important;
+    --pwt-color-warning-70: rgb(218, 228, 100) !important;
+    --pwt-color-warning-60: rgb(195, 205, 65) !important;
+    --pwt-color-warning-50: rgb(170, 180, 35) !important;
+    --pwt-color-warning-40: rgb(140, 150, 15) !important;
+    --pwt-color-warning-30: rgb(110, 118, 0) !important;
+    --pwt-color-warning-20: rgb(80, 85, 0) !important;
+    --pwt-color-warning-15: rgb(60, 65, 0) !important;
+    --pwt-color-warning-10: rgb(42, 46, 0) !important;
+    --pwt-color-warning-5: rgb(25, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Dracula Background/Surface scale */
+    --pwt-color-neutral-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-99: rgb(240, 240, 236) !important;
+    --pwt-color-neutral-95: rgb(220, 222, 218) !important;
+    --pwt-color-neutral-90: rgb(208, 212, 224) !important;
+    --pwt-color-neutral-80: rgb(176, 181, 200) !important;
+    --pwt-color-neutral-70: rgb(146, 152, 184) !important;
+    --pwt-color-neutral-60: rgb(124, 131, 160) !important;
+    --pwt-color-neutral-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-40: rgb(86, 90, 114) !important;
+    --pwt-color-neutral-30: rgb(68, 71, 90) !important;
+    --pwt-color-neutral-20: rgb(40, 42, 54) !important;
+    --pwt-color-neutral-15: rgb(33, 34, 44) !important;
+    --pwt-color-neutral-10: rgb(30, 31, 41) !important;
+    --pwt-color-neutral-5: rgb(22, 23, 30) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Dracula Comment tones */
+    --pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
+    --pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
+    --pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
+    --pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
+    --pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
+    --pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-alt-40: rgb(80, 90, 130) !important;
+    --pwt-color-neutral-alt-30: rgb(60, 68, 105) !important;
+    --pwt-color-neutral-alt-20: rgb(44, 50, 80) !important;
+    --pwt-color-neutral-alt-15: rgb(36, 40, 65) !important;
+    --pwt-color-neutral-alt-10: rgb(28, 32, 52) !important;
+    --pwt-color-neutral-alt-5: rgb(18, 20, 35) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-dracula.css

@@ -0,0 +1,189 @@
+/*!Dracula*/
+/*
+ * ProxMorph PDM Theme: Dracula
+ * Overrides the PWt Material Design tonal color system with Dracula palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Dracula Theme (https://draculatheme.com)
+ *
+ * This file is injected into PDM via index.hbs and overrides the
+ * tonal color values from *-yew-style.css. The WASM dark/light mode
+ * selectors continue to work because they reference these tonal vars.
+ *
+ * ─── Dracula Specification Palette ─────────────────────────────
+ * Background:   #282a36    Current Line: #44475a
+ * Foreground:   #f8f8f2    Comment:      #6272a4
+ * Purple:       #bd93f9    Pink:         #ff79c6
+ * Cyan:         #8be9fd    Green:        #50fa7b
+ * Orange:       #ffb86c    Red:          #ff5555
+ * Yellow:       #f1fa8c
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Dracula Purple (#bd93f9) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(252, 248, 255) !important;
+    --pwt-color-primary-95: rgb(240, 230, 255) !important;
+    --pwt-color-primary-90: rgb(225, 210, 255) !important;
+    --pwt-color-primary-80: rgb(189, 147, 249) !important;
+    --pwt-color-primary-70: rgb(163, 120, 230) !important;
+    --pwt-color-primary-60: rgb(137, 95, 210) !important;
+    --pwt-color-primary-50: rgb(112, 72, 190) !important;
+    --pwt-color-primary-40: rgb(88, 52, 168) !important;
+    --pwt-color-primary-30: rgb(65, 35, 140) !important;
+    --pwt-color-primary-20: rgb(46, 20, 110) !important;
+    --pwt-color-primary-15: rgb(36, 12, 90) !important;
+    --pwt-color-primary-10: rgb(28, 5, 72) !important;
+    --pwt-color-primary-5: rgb(18, 2, 48) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Dracula Comment/Overlay (#6272a4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 236, 252) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 245) !important;
+    --pwt-color-secondary-80: rgb(178, 196, 230) !important;
+    --pwt-color-secondary-70: rgb(146, 163, 200) !important;
+    --pwt-color-secondary-60: rgb(118, 137, 180) !important;
+    --pwt-color-secondary-50: rgb(98, 114, 164) !important;
+    --pwt-color-secondary-40: rgb(78, 94, 140) !important;
+    --pwt-color-secondary-30: rgb(58, 72, 115) !important;
+    --pwt-color-secondary-20: rgb(40, 52, 90) !important;
+    --pwt-color-secondary-15: rgb(32, 42, 75) !important;
+    --pwt-color-secondary-10: rgb(24, 32, 60) !important;
+    --pwt-color-secondary-5: rgb(16, 20, 42) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Dracula Pink (#ff79c6) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 234, 244) !important;
+    --pwt-color-tertiary-90: rgb(255, 210, 232) !important;
+    --pwt-color-tertiary-80: rgb(255, 165, 210) !important;
+    --pwt-color-tertiary-70: rgb(255, 121, 198) !important;
+    --pwt-color-tertiary-60: rgb(230, 95, 175) !important;
+    --pwt-color-tertiary-50: rgb(200, 70, 150) !important;
+    --pwt-color-tertiary-40: rgb(170, 48, 125) !important;
+    --pwt-color-tertiary-30: rgb(140, 28, 100) !important;
+    --pwt-color-tertiary-20: rgb(108, 12, 78) !important;
+    --pwt-color-tertiary-15: rgb(88, 4, 62) !important;
+    --pwt-color-tertiary-10: rgb(68, 0, 48) !important;
+    --pwt-color-tertiary-5: rgb(45, 0, 30) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Dracula Green (#50fa7b) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(240, 255, 245) !important;
+    --pwt-color-success-95: rgb(200, 255, 215) !important;
+    --pwt-color-success-90: rgb(140, 255, 175) !important;
+    --pwt-color-success-80: rgb(80, 250, 123) !important;
+    --pwt-color-success-70: rgb(55, 220, 98) !important;
+    --pwt-color-success-60: rgb(30, 190, 75) !important;
+    --pwt-color-success-50: rgb(10, 160, 55) !important;
+    --pwt-color-success-40: rgb(0, 130, 40) !important;
+    --pwt-color-success-30: rgb(0, 100, 28) !important;
+    --pwt-color-success-20: rgb(0, 72, 18) !important;
+    --pwt-color-success-15: rgb(0, 55, 12) !important;
+    --pwt-color-success-10: rgb(0, 40, 8) !important;
+    --pwt-color-success-5: rgb(0, 25, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Dracula Red (#ff5555) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 230, 230) !important;
+    --pwt-color-error-90: rgb(255, 205, 205) !important;
+    --pwt-color-error-80: rgb(255, 150, 150) !important;
+    --pwt-color-error-70: rgb(255, 110, 110) !important;
+    --pwt-color-error-60: rgb(255, 85, 85) !important;
+    --pwt-color-error-50: rgb(230, 60, 60) !important;
+    --pwt-color-error-40: rgb(200, 38, 38) !important;
+    --pwt-color-error-30: rgb(168, 16, 16) !important;
+    --pwt-color-error-20: rgb(120, 10, 10) !important;
+    --pwt-color-error-15: rgb(95, 5, 5) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(48, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Dracula Yellow (#f1fa8c) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 254, 248) !important;
+    --pwt-color-warning-95: rgb(252, 255, 210) !important;
+    --pwt-color-warning-90: rgb(245, 252, 160) !important;
+    --pwt-color-warning-80: rgb(241, 250, 140) !important;
+    --pwt-color-warning-70: rgb(218, 228, 100) !important;
+    --pwt-color-warning-60: rgb(195, 205, 65) !important;
+    --pwt-color-warning-50: rgb(170, 180, 35) !important;
+    --pwt-color-warning-40: rgb(140, 150, 15) !important;
+    --pwt-color-warning-30: rgb(110, 118, 0) !important;
+    --pwt-color-warning-20: rgb(80, 85, 0) !important;
+    --pwt-color-warning-15: rgb(60, 65, 0) !important;
+    --pwt-color-warning-10: rgb(42, 46, 0) !important;
+    --pwt-color-warning-5: rgb(25, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Dracula Background/Surface scale */
+    --pwt-color-neutral-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-99: rgb(240, 240, 236) !important;
+    --pwt-color-neutral-95: rgb(220, 222, 218) !important;
+    --pwt-color-neutral-90: rgb(208, 212, 224) !important;
+    --pwt-color-neutral-80: rgb(176, 181, 200) !important;
+    --pwt-color-neutral-70: rgb(146, 152, 184) !important;
+    --pwt-color-neutral-60: rgb(124, 131, 160) !important;
+    --pwt-color-neutral-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-40: rgb(86, 90, 114) !important;
+    --pwt-color-neutral-30: rgb(68, 71, 90) !important;
+    --pwt-color-neutral-20: rgb(40, 42, 54) !important;
+    --pwt-color-neutral-15: rgb(33, 34, 44) !important;
+    --pwt-color-neutral-10: rgb(30, 31, 41) !important;
+    --pwt-color-neutral-5: rgb(22, 23, 30) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Dracula Comment tones */
+    --pwt-color-neutral-alt-100: rgb(248, 248, 242) !important;
+    --pwt-color-neutral-alt-99: rgb(242, 244, 255) !important;
+    --pwt-color-neutral-alt-95: rgb(225, 230, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(210, 216, 238) !important;
+    --pwt-color-neutral-alt-80: rgb(178, 186, 215) !important;
+    --pwt-color-neutral-alt-70: rgb(146, 156, 190) !important;
+    --pwt-color-neutral-alt-60: rgb(118, 128, 165) !important;
+    --pwt-color-neutral-alt-50: rgb(98, 114, 164) !important;
+    --pwt-color-neutral-alt-40: rgb(80, 90, 130) !important;
+    --pwt-color-neutral-alt-30: rgb(60, 68, 105) !important;
+    --pwt-color-neutral-alt-20: rgb(44, 50, 80) !important;
+    --pwt-color-neutral-alt-15: rgb(36, 40, 65) !important;
+    --pwt-color-neutral-alt-10: rgb(28, 32, 52) !important;
+    --pwt-color-neutral-alt-5: rgb(18, 20, 35) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-github-dark.css

@@ -0,0 +1,183 @@
+/*!GitHub Dark*/
+/*
+ * ProxMorph PDM Theme: GitHub Dark
+ * Overrides the PWT Material Design tonal color system with GitHub Primer palette
+ * Version: 1.0.0
+ * Author: ProxMorph / GitHub Primer Design System
+ *
+ * ─── GitHub Primer Dark Palette ────────────────────────────────
+ * Accent Blue:  #4493f8    Emphasis: #1f6feb
+ * Success:      #3fb950    Danger:   #f85149
+ * Attention:    #d29922    Text:     #f0f6fc
+ * Canvas:       #0d1117    Subtle:   #161b22
+ * Border:       #3d444d
+ */
+
+:root {
+    /* Primary — GitHub Accent Blue (#4493f8) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(246, 251, 255) !important;
+    --pwt-color-primary-95: rgb(218, 238, 255) !important;
+    --pwt-color-primary-90: rgb(188, 222, 255) !important;
+    --pwt-color-primary-80: rgb(130, 188, 252) !important;
+    --pwt-color-primary-70: rgb(68, 147, 248) !important;
+    --pwt-color-primary-60: rgb(31, 111, 235) !important;
+    --pwt-color-primary-50: rgb(18, 90, 205) !important;
+    --pwt-color-primary-40: rgb(8, 72, 172) !important;
+    --pwt-color-primary-30: rgb(2, 55, 140) !important;
+    --pwt-color-primary-20: rgb(0, 40, 108) !important;
+    --pwt-color-primary-15: rgb(0, 30, 85) !important;
+    --pwt-color-primary-10: rgb(0, 22, 65) !important;
+    --pwt-color-primary-5: rgb(0, 12, 42) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — GitHub Muted tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(250, 252, 255) !important;
+    --pwt-color-secondary-95: rgb(230, 238, 248) !important;
+    --pwt-color-secondary-90: rgb(210, 220, 235) !important;
+    --pwt-color-secondary-80: rgb(175, 190, 210) !important;
+    --pwt-color-secondary-70: rgb(145, 152, 161) !important;
+    --pwt-color-secondary-60: rgb(110, 118, 129) !important;
+    --pwt-color-secondary-50: rgb(88, 95, 105) !important;
+    --pwt-color-secondary-40: rgb(61, 68, 77) !important;
+    --pwt-color-secondary-30: rgb(48, 54, 62) !important;
+    --pwt-color-secondary-20: rgb(22, 27, 34) !important;
+    --pwt-color-secondary-15: rgb(16, 20, 28) !important;
+    --pwt-color-secondary-10: rgb(13, 17, 23) !important;
+    --pwt-color-secondary-5: rgb(6, 8, 14) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — GitHub Purple (#a371f7) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(252, 250, 255) !important;
+    --pwt-color-tertiary-95: rgb(238, 228, 255) !important;
+    --pwt-color-tertiary-90: rgb(222, 208, 255) !important;
+    --pwt-color-tertiary-80: rgb(188, 160, 252) !important;
+    --pwt-color-tertiary-70: rgb(163, 113, 247) !important;
+    --pwt-color-tertiary-60: rgb(138, 88, 225) !important;
+    --pwt-color-tertiary-50: rgb(115, 65, 200) !important;
+    --pwt-color-tertiary-40: rgb(92, 45, 175) !important;
+    --pwt-color-tertiary-30: rgb(72, 28, 148) !important;
+    --pwt-color-tertiary-20: rgb(52, 14, 118) !important;
+    --pwt-color-tertiary-15: rgb(42, 8, 98) !important;
+    --pwt-color-tertiary-10: rgb(32, 4, 78) !important;
+    --pwt-color-tertiary-5: rgb(20, 0, 50) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — GitHub Green (#3fb950) */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(242, 255, 245) !important;
+    --pwt-color-success-95: rgb(205, 255, 215) !important;
+    --pwt-color-success-90: rgb(165, 248, 180) !important;
+    --pwt-color-success-80: rgb(105, 225, 125) !important;
+    --pwt-color-success-70: rgb(63, 185, 80) !important;
+    --pwt-color-success-60: rgb(46, 160, 67) !important;
+    --pwt-color-success-50: rgb(35, 134, 54) !important;
+    --pwt-color-success-40: rgb(22, 110, 40) !important;
+    --pwt-color-success-30: rgb(12, 88, 28) !important;
+    --pwt-color-success-20: rgb(4, 66, 18) !important;
+    --pwt-color-success-15: rgb(0, 52, 12) !important;
+    --pwt-color-success-10: rgb(0, 38, 6) !important;
+    --pwt-color-success-5: rgb(0, 24, 2) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — GitHub Danger Red (#f85149) */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 228, 226) !important;
+    --pwt-color-error-90: rgb(255, 200, 198) !important;
+    --pwt-color-error-80: rgb(255, 148, 144) !important;
+    --pwt-color-error-70: rgb(248, 81, 73) !important;
+    --pwt-color-error-60: rgb(218, 54, 51) !important;
+    --pwt-color-error-50: rgb(190, 36, 34) !important;
+    --pwt-color-error-40: rgb(162, 20, 18) !important;
+    --pwt-color-error-30: rgb(132, 8, 6) !important;
+    --pwt-color-error-20: rgb(100, 2, 0) !important;
+    --pwt-color-error-15: rgb(80, 0, 0) !important;
+    --pwt-color-error-10: rgb(60, 0, 0) !important;
+    --pwt-color-error-5: rgb(38, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — GitHub Attention (#d29922) */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 244) !important;
+    --pwt-color-warning-95: rgb(255, 240, 200) !important;
+    --pwt-color-warning-90: rgb(248, 225, 155) !important;
+    --pwt-color-warning-80: rgb(235, 198, 95) !important;
+    --pwt-color-warning-70: rgb(210, 153, 34) !important;
+    --pwt-color-warning-60: rgb(185, 130, 15) !important;
+    --pwt-color-warning-50: rgb(158, 106, 3) !important;
+    --pwt-color-warning-40: rgb(132, 88, 0) !important;
+    --pwt-color-warning-30: rgb(105, 68, 0) !important;
+    --pwt-color-warning-20: rgb(78, 50, 0) !important;
+    --pwt-color-warning-15: rgb(60, 38, 0) !important;
+    --pwt-color-warning-10: rgb(44, 28, 0) !important;
+    --pwt-color-warning-5: rgb(28, 16, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — GitHub Canvas scale */
+    --pwt-color-neutral-100: rgb(240, 246, 252) !important;
+    --pwt-color-neutral-99: rgb(232, 238, 245) !important;
+    --pwt-color-neutral-95: rgb(210, 218, 228) !important;
+    --pwt-color-neutral-90: rgb(185, 195, 208) !important;
+    --pwt-color-neutral-80: rgb(155, 165, 178) !important;
+    --pwt-color-neutral-70: rgb(125, 135, 148) !important;
+    --pwt-color-neutral-60: rgb(110, 118, 129) !important;
+    --pwt-color-neutral-50: rgb(88, 95, 108) !important;
+    --pwt-color-neutral-40: rgb(61, 68, 77) !important;
+    --pwt-color-neutral-30: rgb(33, 38, 45) !important;
+    --pwt-color-neutral-20: rgb(22, 27, 34) !important;
+    --pwt-color-neutral-15: rgb(13, 17, 23) !important;
+    --pwt-color-neutral-10: rgb(1, 4, 9) !important;
+    --pwt-color-neutral-5: rgb(0, 2, 6) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt */
+    --pwt-color-neutral-alt-100: rgb(240, 246, 252) !important;
+    --pwt-color-neutral-alt-99: rgb(235, 241, 248) !important;
+    --pwt-color-neutral-alt-95: rgb(215, 222, 232) !important;
+    --pwt-color-neutral-alt-90: rgb(192, 200, 212) !important;
+    --pwt-color-neutral-alt-80: rgb(160, 170, 185) !important;
+    --pwt-color-neutral-alt-70: rgb(130, 140, 155) !important;
+    --pwt-color-neutral-alt-60: rgb(102, 112, 128) !important;
+    --pwt-color-neutral-alt-50: rgb(80, 90, 105) !important;
+    --pwt-color-neutral-alt-40: rgb(58, 65, 78) !important;
+    --pwt-color-neutral-alt-30: rgb(38, 44, 55) !important;
+    --pwt-color-neutral-alt-20: rgb(24, 30, 38) !important;
+    --pwt-color-neutral-alt-15: rgb(15, 20, 28) !important;
+    --pwt-color-neutral-alt-10: rgb(8, 12, 18) !important;
+    --pwt-color-neutral-alt-5: rgb(2, 4, 10) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-gruvbox-dark.css

@@ -0,0 +1,181 @@
+/*!Gruvbox Dark*/
+/*
+ * ProxMorph PDM Theme: Gruvbox Dark
+ * Overrides the PWT Material Design tonal color system with Gruvbox palette
+ * Version: 1.0.0
+ *
+ * ─── Gruvbox Dark Palette ──────────────────────────────────────
+ * Accent Yellow: #fabd2f    Orange:   #fe8019
+ * Green:         #b8bb26    Red:      #fb4934
+ * Aqua:          #8ec07c    Blue:     #83a598
+ * Text:          #ebdbb2    Base:     #282828
+ */
+
+:root {
+    /* Primary — Gruvbox Yellow (#fabd2f) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(255, 253, 245) !important;
+    --pwt-color-primary-95: rgb(255, 245, 210) !important;
+    --pwt-color-primary-90: rgb(255, 235, 175) !important;
+    --pwt-color-primary-80: rgb(250, 210, 110) !important;
+    --pwt-color-primary-70: rgb(250, 189, 47) !important;
+    --pwt-color-primary-60: rgb(225, 168, 30) !important;
+    --pwt-color-primary-50: rgb(198, 145, 18) !important;
+    --pwt-color-primary-40: rgb(168, 120, 8) !important;
+    --pwt-color-primary-30: rgb(138, 98, 0) !important;
+    --pwt-color-primary-20: rgb(108, 75, 0) !important;
+    --pwt-color-primary-15: rgb(85, 58, 0) !important;
+    --pwt-color-primary-10: rgb(65, 44, 0) !important;
+    --pwt-color-primary-5: rgb(40, 28, 0) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Gruvbox Blue (#83a598) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 254, 252) !important;
+    --pwt-color-secondary-95: rgb(222, 242, 238) !important;
+    --pwt-color-secondary-90: rgb(195, 228, 222) !important;
+    --pwt-color-secondary-80: rgb(158, 200, 192) !important;
+    --pwt-color-secondary-70: rgb(131, 165, 152) !important;
+    --pwt-color-secondary-60: rgb(108, 142, 130) !important;
+    --pwt-color-secondary-50: rgb(85, 118, 108) !important;
+    --pwt-color-secondary-40: rgb(65, 96, 86) !important;
+    --pwt-color-secondary-30: rgb(46, 75, 66) !important;
+    --pwt-color-secondary-20: rgb(30, 55, 48) !important;
+    --pwt-color-secondary-15: rgb(22, 44, 38) !important;
+    --pwt-color-secondary-10: rgb(14, 34, 28) !important;
+    --pwt-color-secondary-5: rgb(6, 20, 16) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Gruvbox Aqua (#8ec07c) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(248, 255, 246) !important;
+    --pwt-color-tertiary-95: rgb(225, 248, 218) !important;
+    --pwt-color-tertiary-90: rgb(200, 238, 192) !important;
+    --pwt-color-tertiary-80: rgb(165, 215, 155) !important;
+    --pwt-color-tertiary-70: rgb(142, 192, 124) !important;
+    --pwt-color-tertiary-60: rgb(118, 168, 102) !important;
+    --pwt-color-tertiary-50: rgb(95, 142, 80) !important;
+    --pwt-color-tertiary-40: rgb(75, 118, 62) !important;
+    --pwt-color-tertiary-30: rgb(55, 95, 42) !important;
+    --pwt-color-tertiary-20: rgb(38, 72, 28) !important;
+    --pwt-color-tertiary-15: rgb(28, 58, 18) !important;
+    --pwt-color-tertiary-10: rgb(20, 44, 12) !important;
+    --pwt-color-tertiary-5: rgb(10, 28, 5) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Gruvbox Green (#b8bb26) */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(252, 255, 242) !important;
+    --pwt-color-success-95: rgb(238, 248, 195) !important;
+    --pwt-color-success-90: rgb(218, 235, 130) !important;
+    --pwt-color-success-80: rgb(200, 215, 68) !important;
+    --pwt-color-success-70: rgb(184, 187, 38) !important;
+    --pwt-color-success-60: rgb(160, 165, 25) !important;
+    --pwt-color-success-50: rgb(135, 140, 12) !important;
+    --pwt-color-success-40: rgb(110, 115, 2) !important;
+    --pwt-color-success-30: rgb(88, 92, 0) !important;
+    --pwt-color-success-20: rgb(65, 68, 0) !important;
+    --pwt-color-success-15: rgb(50, 52, 0) !important;
+    --pwt-color-success-10: rgb(38, 40, 0) !important;
+    --pwt-color-success-5: rgb(22, 24, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Gruvbox Red (#fb4934) */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 246) !important;
+    --pwt-color-error-95: rgb(255, 228, 222) !important;
+    --pwt-color-error-90: rgb(255, 200, 192) !important;
+    --pwt-color-error-80: rgb(255, 148, 135) !important;
+    --pwt-color-error-70: rgb(251, 105, 82) !important;
+    --pwt-color-error-60: rgb(251, 73, 52) !important;
+    --pwt-color-error-50: rgb(225, 50, 35) !important;
+    --pwt-color-error-40: rgb(195, 32, 18) !important;
+    --pwt-color-error-30: rgb(165, 14, 4) !important;
+    --pwt-color-error-20: rgb(120, 8, 0) !important;
+    --pwt-color-error-15: rgb(95, 4, 0) !important;
+    --pwt-color-error-10: rgb(72, 0, 0) !important;
+    --pwt-color-error-5: rgb(45, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Gruvbox Orange (#fe8019) */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 251, 246) !important;
+    --pwt-color-warning-95: rgb(255, 238, 215) !important;
+    --pwt-color-warning-90: rgb(255, 220, 175) !important;
+    --pwt-color-warning-80: rgb(255, 185, 110) !important;
+    --pwt-color-warning-70: rgb(254, 128, 25) !important;
+    --pwt-color-warning-60: rgb(228, 108, 12) !important;
+    --pwt-color-warning-50: rgb(200, 90, 4) !important;
+    --pwt-color-warning-40: rgb(170, 72, 0) !important;
+    --pwt-color-warning-30: rgb(138, 55, 0) !important;
+    --pwt-color-warning-20: rgb(105, 40, 0) !important;
+    --pwt-color-warning-15: rgb(82, 30, 0) !important;
+    --pwt-color-warning-10: rgb(60, 22, 0) !important;
+    --pwt-color-warning-5: rgb(38, 12, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Gruvbox Background scale */
+    --pwt-color-neutral-100: rgb(235, 219, 178) !important;
+    --pwt-color-neutral-99: rgb(228, 212, 172) !important;
+    --pwt-color-neutral-95: rgb(213, 196, 161) !important;
+    --pwt-color-neutral-90: rgb(189, 174, 147) !important;
+    --pwt-color-neutral-80: rgb(168, 153, 132) !important;
+    --pwt-color-neutral-70: rgb(146, 131, 116) !important;
+    --pwt-color-neutral-60: rgb(124, 111, 100) !important;
+    --pwt-color-neutral-50: rgb(102, 92, 84) !important;
+    --pwt-color-neutral-40: rgb(80, 73, 69) !important;
+    --pwt-color-neutral-30: rgb(60, 56, 54) !important;
+    --pwt-color-neutral-20: rgb(40, 40, 40) !important;
+    --pwt-color-neutral-15: rgb(29, 32, 33) !important;
+    --pwt-color-neutral-10: rgb(24, 26, 28) !important;
+    --pwt-color-neutral-5: rgb(16, 16, 18) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt */
+    --pwt-color-neutral-alt-100: rgb(235, 219, 178) !important;
+    --pwt-color-neutral-alt-99: rgb(230, 215, 175) !important;
+    --pwt-color-neutral-alt-95: rgb(215, 200, 165) !important;
+    --pwt-color-neutral-alt-90: rgb(195, 180, 148) !important;
+    --pwt-color-neutral-alt-80: rgb(170, 158, 135) !important;
+    --pwt-color-neutral-alt-70: rgb(148, 135, 118) !important;
+    --pwt-color-neutral-alt-60: rgb(126, 115, 102) !important;
+    --pwt-color-neutral-alt-50: rgb(105, 95, 85) !important;
+    --pwt-color-neutral-alt-40: rgb(83, 76, 70) !important;
+    --pwt-color-neutral-alt-30: rgb(62, 58, 55) !important;
+    --pwt-color-neutral-alt-20: rgb(42, 42, 42) !important;
+    --pwt-color-neutral-alt-15: rgb(32, 34, 35) !important;
+    --pwt-color-neutral-alt-10: rgb(25, 27, 28) !important;
+    --pwt-color-neutral-alt-5: rgb(16, 17, 18) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-gruvbox-light.css

@@ -0,0 +1,194 @@
+/*!Gruvbox Light*/
+/*
+ * ProxMorph PDM Theme: Gruvbox Light
+ * Overrides the PWT Material Design tonal color system with Gruvbox Light palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Gruvbox (https://github.com/morhetz/gruvbox)
+ *
+ * ─── Gruvbox Light Palette ────────────────────────────────────
+ * Yellow (accent): #d79921    Aqua:     #427b58
+ * Green:           #98971a    Red:      #cc241d
+ * Orange:          #d65d0e    Purple:   #8f3f71
+ * Text (dark):     #282828    Background:#fbf1c7
+ * bg1:             #ebdbb2    bg2:      #d5c4a1
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Gruvbox Yellow (#d79921) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(255, 252, 245) !important;
+    --pwt-color-primary-95: rgb(255, 242, 208) !important;
+    --pwt-color-primary-90: rgb(252, 230, 168) !important;
+    --pwt-color-primary-80: rgb(240, 200, 100) !important;
+    --pwt-color-primary-70: rgb(228, 172, 52) !important;
+    --pwt-color-primary-60: rgb(215, 153, 33) !important;
+    --pwt-color-primary-50: rgb(188, 130, 20) !important;
+    --pwt-color-primary-40: rgb(160, 108, 10) !important;
+    --pwt-color-primary-30: rgb(130, 86, 2) !important;
+    --pwt-color-primary-20: rgb(100, 65, 0) !important;
+    --pwt-color-primary-15: rgb(80, 50, 0) !important;
+    --pwt-color-primary-10: rgb(60, 36, 0) !important;
+    --pwt-color-primary-5: rgb(38, 22, 0) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Gruvbox Aqua (#427b58) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(245, 254, 250) !important;
+    --pwt-color-secondary-95: rgb(210, 245, 228) !important;
+    --pwt-color-secondary-90: rgb(170, 232, 202) !important;
+    --pwt-color-secondary-80: rgb(105, 198, 155) !important;
+    --pwt-color-secondary-70: rgb(72, 165, 118) !important;
+    --pwt-color-secondary-60: rgb(66, 123, 88) !important;
+    --pwt-color-secondary-50: rgb(52, 105, 72) !important;
+    --pwt-color-secondary-40: rgb(38, 85, 56) !important;
+    --pwt-color-secondary-30: rgb(26, 68, 42) !important;
+    --pwt-color-secondary-20: rgb(16, 52, 30) !important;
+    --pwt-color-secondary-15: rgb(10, 42, 22) !important;
+    --pwt-color-secondary-10: rgb(5, 32, 15) !important;
+    --pwt-color-secondary-5: rgb(0, 20, 8) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Gruvbox Purple (#8f3f71) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(248, 225, 240) !important;
+    --pwt-color-tertiary-90: rgb(238, 198, 225) !important;
+    --pwt-color-tertiary-80: rgb(215, 148, 195) !important;
+    --pwt-color-tertiary-70: rgb(185, 105, 162) !important;
+    --pwt-color-tertiary-60: rgb(143, 63, 113) !important;
+    --pwt-color-tertiary-50: rgb(122, 48, 95) !important;
+    --pwt-color-tertiary-40: rgb(100, 35, 78) !important;
+    --pwt-color-tertiary-30: rgb(80, 22, 62) !important;
+    --pwt-color-tertiary-20: rgb(60, 12, 46) !important;
+    --pwt-color-tertiary-15: rgb(48, 6, 36) !important;
+    --pwt-color-tertiary-10: rgb(36, 2, 26) !important;
+    --pwt-color-tertiary-5: rgb(22, 0, 14) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Gruvbox Green (#98971a) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(252, 255, 238) !important;
+    --pwt-color-success-95: rgb(235, 248, 185) !important;
+    --pwt-color-success-90: rgb(215, 238, 135) !important;
+    --pwt-color-success-80: rgb(180, 210, 68) !important;
+    --pwt-color-success-70: rgb(160, 185, 38) !important;
+    --pwt-color-success-60: rgb(152, 151, 26) !important;
+    --pwt-color-success-50: rgb(130, 128, 15) !important;
+    --pwt-color-success-40: rgb(108, 106, 6) !important;
+    --pwt-color-success-30: rgb(86, 84, 0) !important;
+    --pwt-color-success-20: rgb(65, 64, 0) !important;
+    --pwt-color-success-15: rgb(52, 50, 0) !important;
+    --pwt-color-success-10: rgb(38, 36, 0) !important;
+    --pwt-color-success-5: rgb(22, 20, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Gruvbox Red (#cc241d) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 246) !important;
+    --pwt-color-error-95: rgb(255, 220, 216) !important;
+    --pwt-color-error-90: rgb(255, 188, 182) !important;
+    --pwt-color-error-80: rgb(240, 128, 118) !important;
+    --pwt-color-error-70: rgb(225, 72, 62) !important;
+    --pwt-color-error-60: rgb(204, 36, 29) !important;
+    --pwt-color-error-50: rgb(178, 22, 16) !important;
+    --pwt-color-error-40: rgb(150, 12, 8) !important;
+    --pwt-color-error-30: rgb(122, 4, 2) !important;
+    --pwt-color-error-20: rgb(94, 0, 0) !important;
+    --pwt-color-error-15: rgb(75, 0, 0) !important;
+    --pwt-color-error-10: rgb(56, 0, 0) !important;
+    --pwt-color-error-5: rgb(35, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Gruvbox Orange (#d65d0e) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 250, 245) !important;
+    --pwt-color-warning-95: rgb(255, 230, 205) !important;
+    --pwt-color-warning-90: rgb(252, 205, 160) !important;
+    --pwt-color-warning-80: rgb(240, 155, 80) !important;
+    --pwt-color-warning-70: rgb(228, 118, 32) !important;
+    --pwt-color-warning-60: rgb(214, 93, 14) !important;
+    --pwt-color-warning-50: rgb(188, 76, 5) !important;
+    --pwt-color-warning-40: rgb(160, 60, 0) !important;
+    --pwt-color-warning-30: rgb(130, 46, 0) !important;
+    --pwt-color-warning-20: rgb(100, 32, 0) !important;
+    --pwt-color-warning-15: rgb(80, 24, 0) !important;
+    --pwt-color-warning-10: rgb(58, 16, 0) !important;
+    --pwt-color-warning-5: rgb(36, 8, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Gruvbox Light Background scale (#fbf1c7 base) */
+    --pwt-color-neutral-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-99: rgb(253, 249, 238) !important;
+    --pwt-color-neutral-95: rgb(251, 241, 199) !important;
+    --pwt-color-neutral-90: rgb(235, 219, 178) !important;
+    --pwt-color-neutral-80: rgb(213, 196, 161) !important;
+    --pwt-color-neutral-70: rgb(189, 174, 147) !important;
+    --pwt-color-neutral-60: rgb(168, 153, 132) !important;
+    --pwt-color-neutral-50: rgb(146, 131, 116) !important;
+    --pwt-color-neutral-40: rgb(124, 111, 100) !important;
+    --pwt-color-neutral-30: rgb(102, 92, 84) !important;
+    --pwt-color-neutral-20: rgb(80, 73, 69) !important;
+    --pwt-color-neutral-15: rgb(60, 56, 54) !important;
+    --pwt-color-neutral-10: rgb(40, 40, 40) !important;
+    --pwt-color-neutral-5: rgb(24, 24, 24) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Gruvbox Light fg tones */
+    --pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-alt-99: rgb(252, 248, 235) !important;
+    --pwt-color-neutral-alt-95: rgb(248, 240, 202) !important;
+    --pwt-color-neutral-alt-90: rgb(238, 225, 182) !important;
+    --pwt-color-neutral-alt-80: rgb(218, 202, 165) !important;
+    --pwt-color-neutral-alt-70: rgb(195, 180, 148) !important;
+    --pwt-color-neutral-alt-60: rgb(172, 158, 132) !important;
+    --pwt-color-neutral-alt-50: rgb(150, 136, 118) !important;
+    --pwt-color-neutral-alt-40: rgb(128, 115, 102) !important;
+    --pwt-color-neutral-alt-30: rgb(106, 95, 85) !important;
+    --pwt-color-neutral-alt-20: rgb(84, 76, 70) !important;
+    --pwt-color-neutral-alt-15: rgb(64, 58, 55) !important;
+    --pwt-color-neutral-alt-10: rgb(45, 42, 40) !important;
+    --pwt-color-neutral-alt-5: rgb(28, 26, 25) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (light surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-background: var(--pwt-color-neutral-95) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
+    --pwt-color-primary: var(--pwt-color-primary-40) !important;
+    --pwt-color-on-primary: var(--pwt-color-primary-100) !important;
+    --pwt-color-primary-container: var(--pwt-color-primary-90) !important;
+    --pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
+    background: var(--pwt-color-neutral-95) !important;
+    color: var(--pwt-color-neutral-10) !important;
+    color-scheme: light !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-95) !important;
+}
+
+/* ===== Logo — swap to dark variant for light background ===== */
+img[src*="proxmox_logo_white"] {
+    content: url("/images/proxmox_logo.svg") !important;
+}

themes/pdm/theme-nord-dark.css

@@ -0,0 +1,181 @@
+/*!Nord Dark*/
+/*
+ * ProxMorph PDM Theme: Nord Dark
+ * Overrides the PWT Material Design tonal color system with Nord palette
+ * Version: 1.0.0
+ *
+ * ─── Nord Palette ──────────────────────────────────────────────
+ * Frost 1 (accent): #88c0d0    Frost 2:  #81a1c1
+ * Aurora Green:     #a3be8c    Aurora Yellow: #ebcb8b
+ * Aurora Red:       #bf616a    Aurora Orange: #d08770
+ * Snow Storm:       #e5e9f0    Polar Night: #2e3440
+ */
+
+:root {
+    /* Primary — Nord Frost (#88c0d0) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(248, 254, 255) !important;
+    --pwt-color-primary-95: rgb(225, 245, 252) !important;
+    --pwt-color-primary-90: rgb(200, 232, 242) !important;
+    --pwt-color-primary-80: rgb(160, 210, 225) !important;
+    --pwt-color-primary-70: rgb(136, 192, 208) !important;
+    --pwt-color-primary-60: rgb(110, 168, 185) !important;
+    --pwt-color-primary-50: rgb(88, 142, 160) !important;
+    --pwt-color-primary-40: rgb(65, 118, 135) !important;
+    --pwt-color-primary-30: rgb(45, 95, 112) !important;
+    --pwt-color-primary-20: rgb(28, 72, 88) !important;
+    --pwt-color-primary-15: rgb(18, 58, 72) !important;
+    --pwt-color-primary-10: rgb(10, 44, 56) !important;
+    --pwt-color-primary-5: rgb(4, 28, 38) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Nord Frost 2 (#81a1c1) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 252, 255) !important;
+    --pwt-color-secondary-95: rgb(225, 238, 252) !important;
+    --pwt-color-secondary-90: rgb(200, 222, 240) !important;
+    --pwt-color-secondary-80: rgb(160, 192, 215) !important;
+    --pwt-color-secondary-70: rgb(129, 161, 193) !important;
+    --pwt-color-secondary-60: rgb(105, 138, 170) !important;
+    --pwt-color-secondary-50: rgb(82, 115, 148) !important;
+    --pwt-color-secondary-40: rgb(62, 95, 125) !important;
+    --pwt-color-secondary-30: rgb(44, 75, 102) !important;
+    --pwt-color-secondary-20: rgb(28, 56, 78) !important;
+    --pwt-color-secondary-15: rgb(20, 45, 65) !important;
+    --pwt-color-secondary-10: rgb(12, 35, 52) !important;
+    --pwt-color-secondary-5: rgb(5, 22, 35) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Nord Aurora Purple (#b48ead) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 250, 254) !important;
+    --pwt-color-tertiary-95: rgb(245, 232, 242) !important;
+    --pwt-color-tertiary-90: rgb(232, 212, 228) !important;
+    --pwt-color-tertiary-80: rgb(205, 175, 200) !important;
+    --pwt-color-tertiary-70: rgb(180, 142, 173) !important;
+    --pwt-color-tertiary-60: rgb(155, 118, 148) !important;
+    --pwt-color-tertiary-50: rgb(130, 95, 125) !important;
+    --pwt-color-tertiary-40: rgb(108, 72, 102) !important;
+    --pwt-color-tertiary-30: rgb(85, 52, 80) !important;
+    --pwt-color-tertiary-20: rgb(62, 34, 58) !important;
+    --pwt-color-tertiary-15: rgb(50, 24, 48) !important;
+    --pwt-color-tertiary-10: rgb(38, 16, 36) !important;
+    --pwt-color-tertiary-5: rgb(25, 8, 24) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Nord Aurora Green (#a3be8c) */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(248, 255, 245) !important;
+    --pwt-color-success-95: rgb(225, 245, 215) !important;
+    --pwt-color-success-90: rgb(200, 232, 190) !important;
+    --pwt-color-success-80: rgb(175, 210, 160) !important;
+    --pwt-color-success-70: rgb(163, 190, 140) !important;
+    --pwt-color-success-60: rgb(138, 165, 118) !important;
+    --pwt-color-success-50: rgb(115, 140, 95) !important;
+    --pwt-color-success-40: rgb(92, 118, 75) !important;
+    --pwt-color-success-30: rgb(70, 95, 55) !important;
+    --pwt-color-success-20: rgb(50, 72, 38) !important;
+    --pwt-color-success-15: rgb(38, 58, 28) !important;
+    --pwt-color-success-10: rgb(28, 44, 18) !important;
+    --pwt-color-success-5: rgb(16, 28, 10) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Nord Aurora Red (#bf616a) */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 249, 249) !important;
+    --pwt-color-error-95: rgb(255, 228, 230) !important;
+    --pwt-color-error-90: rgb(248, 202, 206) !important;
+    --pwt-color-error-80: rgb(225, 150, 158) !important;
+    --pwt-color-error-70: rgb(205, 115, 125) !important;
+    --pwt-color-error-60: rgb(191, 97, 106) !important;
+    --pwt-color-error-50: rgb(168, 72, 82) !important;
+    --pwt-color-error-40: rgb(142, 50, 60) !important;
+    --pwt-color-error-30: rgb(118, 30, 40) !important;
+    --pwt-color-error-20: rgb(90, 16, 24) !important;
+    --pwt-color-error-15: rgb(72, 8, 16) !important;
+    --pwt-color-error-10: rgb(55, 2, 8) !important;
+    --pwt-color-error-5: rgb(35, 0, 4) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Nord Aurora Yellow (#ebcb8b) */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 253, 248) !important;
+    --pwt-color-warning-95: rgb(252, 245, 222) !important;
+    --pwt-color-warning-90: rgb(248, 235, 195) !important;
+    --pwt-color-warning-80: rgb(240, 218, 160) !important;
+    --pwt-color-warning-70: rgb(235, 203, 139) !important;
+    --pwt-color-warning-60: rgb(210, 178, 112) !important;
+    --pwt-color-warning-50: rgb(185, 155, 88) !important;
+    --pwt-color-warning-40: rgb(158, 130, 65) !important;
+    --pwt-color-warning-30: rgb(130, 105, 42) !important;
+    --pwt-color-warning-20: rgb(100, 80, 22) !important;
+    --pwt-color-warning-15: rgb(78, 62, 12) !important;
+    --pwt-color-warning-10: rgb(58, 45, 4) !important;
+    --pwt-color-warning-5: rgb(35, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Nord Polar Night scale */
+    --pwt-color-neutral-100: rgb(236, 239, 244) !important;
+    --pwt-color-neutral-99: rgb(229, 233, 240) !important;
+    --pwt-color-neutral-95: rgb(216, 222, 233) !important;
+    --pwt-color-neutral-90: rgb(195, 202, 218) !important;
+    --pwt-color-neutral-80: rgb(168, 178, 198) !important;
+    --pwt-color-neutral-70: rgb(140, 152, 175) !important;
+    --pwt-color-neutral-60: rgb(115, 128, 152) !important;
+    --pwt-color-neutral-50: rgb(92, 105, 130) !important;
+    --pwt-color-neutral-40: rgb(76, 86, 106) !important;
+    --pwt-color-neutral-30: rgb(67, 76, 94) !important;
+    --pwt-color-neutral-20: rgb(59, 66, 82) !important;
+    --pwt-color-neutral-15: rgb(52, 58, 72) !important;
+    --pwt-color-neutral-10: rgb(46, 52, 64) !important;
+    --pwt-color-neutral-5: rgb(36, 40, 52) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt */
+    --pwt-color-neutral-alt-100: rgb(236, 239, 244) !important;
+    --pwt-color-neutral-alt-99: rgb(232, 236, 242) !important;
+    --pwt-color-neutral-alt-95: rgb(218, 225, 238) !important;
+    --pwt-color-neutral-alt-90: rgb(200, 208, 225) !important;
+    --pwt-color-neutral-alt-80: rgb(170, 182, 202) !important;
+    --pwt-color-neutral-alt-70: rgb(142, 155, 180) !important;
+    --pwt-color-neutral-alt-60: rgb(118, 130, 158) !important;
+    --pwt-color-neutral-alt-50: rgb(95, 108, 135) !important;
+    --pwt-color-neutral-alt-40: rgb(76, 88, 112) !important;
+    --pwt-color-neutral-alt-30: rgb(60, 70, 92) !important;
+    --pwt-color-neutral-alt-20: rgb(48, 56, 74) !important;
+    --pwt-color-neutral-alt-15: rgb(40, 46, 62) !important;
+    --pwt-color-neutral-alt-10: rgb(32, 38, 50) !important;
+    --pwt-color-neutral-alt-5: rgb(22, 26, 38) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-nord-light.css

@@ -0,0 +1,194 @@
+/*!Nord Light*/
+/*
+ * ProxMorph PDM Theme: Nord Light
+ * Overrides the PWT Material Design tonal color system with Nord Light palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Nord (https://www.nordtheme.com)
+ *
+ * ─── Nord Light Palette ───────────────────────────────────────
+ * Frost Blue (accent): #5e81ac   Frost Cyan:  #88c0d0
+ * Aurora Green: #a3be8c   Aurora Red:   #bf616a
+ * Aurora Yellow:#ebcb8b   Aurora Purple:#b48ead
+ * Text:         #2e3440   Background:  #eceff4
+ * Snow:         #d8dee9   Night:       #3b4252
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Nord Frost Blue (#5e81ac) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(248, 251, 255) !important;
+    --pwt-color-primary-95: rgb(220, 235, 252) !important;
+    --pwt-color-primary-90: rgb(188, 215, 245) !important;
+    --pwt-color-primary-80: rgb(138, 180, 225) !important;
+    --pwt-color-primary-70: rgb(110, 155, 200) !important;
+    --pwt-color-primary-60: rgb(94, 129, 172) !important;
+    --pwt-color-primary-50: rgb(76, 108, 148) !important;
+    --pwt-color-primary-40: rgb(60, 88, 125) !important;
+    --pwt-color-primary-30: rgb(45, 68, 100) !important;
+    --pwt-color-primary-20: rgb(32, 50, 78) !important;
+    --pwt-color-primary-15: rgb(24, 38, 62) !important;
+    --pwt-color-primary-10: rgb(16, 28, 48) !important;
+    --pwt-color-primary-5: rgb(8, 15, 30) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Nord Frost Cyan (#88c0d0) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 254, 255) !important;
+    --pwt-color-secondary-95: rgb(218, 245, 250) !important;
+    --pwt-color-secondary-90: rgb(188, 235, 242) !important;
+    --pwt-color-secondary-80: rgb(150, 210, 225) !important;
+    --pwt-color-secondary-70: rgb(136, 192, 208) !important;
+    --pwt-color-secondary-60: rgb(108, 165, 182) !important;
+    --pwt-color-secondary-50: rgb(85, 140, 158) !important;
+    --pwt-color-secondary-40: rgb(64, 115, 132) !important;
+    --pwt-color-secondary-30: rgb(45, 92, 108) !important;
+    --pwt-color-secondary-20: rgb(28, 68, 82) !important;
+    --pwt-color-secondary-15: rgb(20, 54, 66) !important;
+    --pwt-color-secondary-10: rgb(12, 40, 50) !important;
+    --pwt-color-secondary-5: rgb(5, 24, 32) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Nord Aurora Purple (#b48ead) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 250, 254) !important;
+    --pwt-color-tertiary-95: rgb(245, 232, 242) !important;
+    --pwt-color-tertiary-90: rgb(235, 210, 230) !important;
+    --pwt-color-tertiary-80: rgb(210, 172, 202) !important;
+    --pwt-color-tertiary-70: rgb(180, 142, 173) !important;
+    --pwt-color-tertiary-60: rgb(155, 115, 148) !important;
+    --pwt-color-tertiary-50: rgb(132, 92, 125) !important;
+    --pwt-color-tertiary-40: rgb(108, 70, 102) !important;
+    --pwt-color-tertiary-30: rgb(86, 50, 80) !important;
+    --pwt-color-tertiary-20: rgb(64, 32, 58) !important;
+    --pwt-color-tertiary-15: rgb(50, 22, 46) !important;
+    --pwt-color-tertiary-10: rgb(38, 14, 34) !important;
+    --pwt-color-tertiary-5: rgb(22, 5, 20) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Nord Aurora Green (#a3be8c) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(250, 255, 248) !important;
+    --pwt-color-success-95: rgb(228, 248, 218) !important;
+    --pwt-color-success-90: rgb(200, 235, 185) !important;
+    --pwt-color-success-80: rgb(172, 210, 152) !important;
+    --pwt-color-success-70: rgb(163, 190, 140) !important;
+    --pwt-color-success-60: rgb(138, 165, 116) !important;
+    --pwt-color-success-50: rgb(115, 142, 95) !important;
+    --pwt-color-success-40: rgb(92, 118, 74) !important;
+    --pwt-color-success-30: rgb(72, 96, 55) !important;
+    --pwt-color-success-20: rgb(52, 74, 38) !important;
+    --pwt-color-success-15: rgb(40, 58, 28) !important;
+    --pwt-color-success-10: rgb(28, 44, 18) !important;
+    --pwt-color-success-5: rgb(16, 28, 8) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Nord Aurora Red (#bf616a) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 249) !important;
+    --pwt-color-error-95: rgb(255, 225, 228) !important;
+    --pwt-color-error-90: rgb(248, 195, 200) !important;
+    --pwt-color-error-80: rgb(225, 148, 155) !important;
+    --pwt-color-error-70: rgb(191, 97, 106) !important;
+    --pwt-color-error-60: rgb(168, 72, 82) !important;
+    --pwt-color-error-50: rgb(145, 52, 62) !important;
+    --pwt-color-error-40: rgb(120, 35, 44) !important;
+    --pwt-color-error-30: rgb(98, 20, 28) !important;
+    --pwt-color-error-20: rgb(75, 8, 15) !important;
+    --pwt-color-error-15: rgb(60, 2, 8) !important;
+    --pwt-color-error-10: rgb(45, 0, 4) !important;
+    --pwt-color-error-5: rgb(28, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Nord Aurora Yellow (#ebcb8b) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 248) !important;
+    --pwt-color-warning-95: rgb(252, 242, 218) !important;
+    --pwt-color-warning-90: rgb(248, 230, 185) !important;
+    --pwt-color-warning-80: rgb(238, 212, 148) !important;
+    --pwt-color-warning-70: rgb(235, 203, 139) !important;
+    --pwt-color-warning-60: rgb(212, 178, 110) !important;
+    --pwt-color-warning-50: rgb(188, 155, 85) !important;
+    --pwt-color-warning-40: rgb(162, 130, 62) !important;
+    --pwt-color-warning-30: rgb(135, 105, 40) !important;
+    --pwt-color-warning-20: rgb(108, 82, 22) !important;
+    --pwt-color-warning-15: rgb(86, 64, 12) !important;
+    --pwt-color-warning-10: rgb(65, 46, 4) !important;
+    --pwt-color-warning-5: rgb(42, 28, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Nord Snow Storm (polar) scale (#eceff4 base) */
+    --pwt-color-neutral-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-99: rgb(246, 248, 252) !important;
+    --pwt-color-neutral-95: rgb(236, 239, 244) !important;
+    --pwt-color-neutral-90: rgb(229, 233, 240) !important;
+    --pwt-color-neutral-80: rgb(216, 222, 233) !important;
+    --pwt-color-neutral-70: rgb(190, 198, 214) !important;
+    --pwt-color-neutral-60: rgb(165, 174, 195) !important;
+    --pwt-color-neutral-50: rgb(136, 146, 170) !important;
+    --pwt-color-neutral-40: rgb(76, 86, 106) !important;
+    --pwt-color-neutral-30: rgb(67, 76, 94) !important;
+    --pwt-color-neutral-20: rgb(59, 66, 82) !important;
+    --pwt-color-neutral-15: rgb(52, 58, 72) !important;
+    --pwt-color-neutral-10: rgb(46, 52, 64) !important;
+    --pwt-color-neutral-5: rgb(36, 40, 52) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Nord Frost/Snow tones */
+    --pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-alt-99: rgb(248, 250, 254) !important;
+    --pwt-color-neutral-alt-95: rgb(238, 242, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(230, 235, 242) !important;
+    --pwt-color-neutral-alt-80: rgb(218, 224, 235) !important;
+    --pwt-color-neutral-alt-70: rgb(195, 202, 218) !important;
+    --pwt-color-neutral-alt-60: rgb(170, 178, 198) !important;
+    --pwt-color-neutral-alt-50: rgb(142, 152, 175) !important;
+    --pwt-color-neutral-alt-40: rgb(80, 90, 112) !important;
+    --pwt-color-neutral-alt-30: rgb(70, 78, 98) !important;
+    --pwt-color-neutral-alt-20: rgb(60, 68, 85) !important;
+    --pwt-color-neutral-alt-15: rgb(54, 60, 75) !important;
+    --pwt-color-neutral-alt-10: rgb(48, 54, 68) !important;
+    --pwt-color-neutral-alt-5: rgb(38, 42, 55) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (light surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-background: var(--pwt-color-neutral-95) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
+    --pwt-color-primary: var(--pwt-color-primary-40) !important;
+    --pwt-color-on-primary: var(--pwt-color-primary-100) !important;
+    --pwt-color-primary-container: var(--pwt-color-primary-90) !important;
+    --pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
+    background: var(--pwt-color-neutral-95) !important;
+    color: var(--pwt-color-neutral-10) !important;
+    color-scheme: light !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-95) !important;
+}
+
+/* ===== Logo — swap to dark variant for light background ===== */
+img[src*="proxmox_logo_white"] {
+    content: url("/images/proxmox_logo.svg") !important;
+}

themes/pdm/theme-solarized-dark.css

@@ -0,0 +1,184 @@
+/*!Solarized Dark*/
+/*
+ * ProxMorph PDM Theme: Solarized Dark
+ * Overrides the PWT Material Design tonal color system with Solarized palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Ethan Schoonover (Solarized)
+ *
+ * ─── Solarized Palette ─────────────────────────────────────────
+ * Blue:    #268bd2    Cyan:    #2aa198
+ * Green:   #859900    Yellow:  #b58900
+ * Red:     #dc322f    Orange:  #cb4b16
+ * Base03:  #002b36    Base02:  #073642
+ * Base01:  #586e75    Base0:   #839496
+ * Base1:   #93a1a1
+ */
+
+:root {
+    /* Primary — Solarized Blue (#268bd2) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(246, 252, 255) !important;
+    --pwt-color-primary-95: rgb(218, 240, 255) !important;
+    --pwt-color-primary-90: rgb(188, 225, 248) !important;
+    --pwt-color-primary-80: rgb(130, 195, 235) !important;
+    --pwt-color-primary-70: rgb(75, 165, 222) !important;
+    --pwt-color-primary-60: rgb(38, 139, 210) !important;
+    --pwt-color-primary-50: rgb(25, 115, 185) !important;
+    --pwt-color-primary-40: rgb(12, 95, 160) !important;
+    --pwt-color-primary-30: rgb(4, 75, 132) !important;
+    --pwt-color-primary-20: rgb(0, 55, 105) !important;
+    --pwt-color-primary-15: rgb(0, 44, 85) !important;
+    --pwt-color-primary-10: rgb(0, 32, 65) !important;
+    --pwt-color-primary-5: rgb(0, 18, 42) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Solarized Cyan (#2aa198) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(245, 255, 254) !important;
+    --pwt-color-secondary-95: rgb(215, 248, 245) !important;
+    --pwt-color-secondary-90: rgb(180, 238, 232) !important;
+    --pwt-color-secondary-80: rgb(115, 210, 202) !important;
+    --pwt-color-secondary-70: rgb(65, 185, 175) !important;
+    --pwt-color-secondary-60: rgb(42, 161, 152) !important;
+    --pwt-color-secondary-50: rgb(28, 135, 128) !important;
+    --pwt-color-secondary-40: rgb(15, 110, 105) !important;
+    --pwt-color-secondary-30: rgb(4, 88, 82) !important;
+    --pwt-color-secondary-20: rgb(0, 65, 60) !important;
+    --pwt-color-secondary-15: rgb(0, 52, 48) !important;
+    --pwt-color-secondary-10: rgb(0, 38, 35) !important;
+    --pwt-color-secondary-5: rgb(0, 22, 20) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Solarized Violet (#6c71c4) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(250, 250, 255) !important;
+    --pwt-color-tertiary-95: rgb(232, 232, 252) !important;
+    --pwt-color-tertiary-90: rgb(210, 212, 242) !important;
+    --pwt-color-tertiary-80: rgb(168, 172, 228) !important;
+    --pwt-color-tertiary-70: rgb(130, 135, 210) !important;
+    --pwt-color-tertiary-60: rgb(108, 113, 196) !important;
+    --pwt-color-tertiary-50: rgb(85, 90, 172) !important;
+    --pwt-color-tertiary-40: rgb(65, 70, 148) !important;
+    --pwt-color-tertiary-30: rgb(46, 50, 122) !important;
+    --pwt-color-tertiary-20: rgb(30, 34, 98) !important;
+    --pwt-color-tertiary-15: rgb(22, 25, 80) !important;
+    --pwt-color-tertiary-10: rgb(14, 16, 62) !important;
+    --pwt-color-tertiary-5: rgb(6, 8, 40) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Solarized Green (#859900) */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(250, 255, 242) !important;
+    --pwt-color-success-95: rgb(228, 248, 195) !important;
+    --pwt-color-success-90: rgb(205, 238, 130) !important;
+    --pwt-color-success-80: rgb(175, 215, 55) !important;
+    --pwt-color-success-70: rgb(155, 190, 15) !important;
+    --pwt-color-success-60: rgb(133, 153, 0) !important;
+    --pwt-color-success-50: rgb(112, 130, 0) !important;
+    --pwt-color-success-40: rgb(90, 108, 0) !important;
+    --pwt-color-success-30: rgb(70, 85, 0) !important;
+    --pwt-color-success-20: rgb(50, 62, 0) !important;
+    --pwt-color-success-15: rgb(38, 48, 0) !important;
+    --pwt-color-success-10: rgb(28, 35, 0) !important;
+    --pwt-color-success-5: rgb(16, 20, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Solarized Red (#dc322f) */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 225, 224) !important;
+    --pwt-color-error-90: rgb(255, 198, 197) !important;
+    --pwt-color-error-80: rgb(248, 140, 138) !important;
+    --pwt-color-error-70: rgb(238, 90, 88) !important;
+    --pwt-color-error-60: rgb(220, 50, 47) !important;
+    --pwt-color-error-50: rgb(192, 35, 32) !important;
+    --pwt-color-error-40: rgb(165, 20, 18) !important;
+    --pwt-color-error-30: rgb(135, 8, 6) !important;
+    --pwt-color-error-20: rgb(102, 2, 0) !important;
+    --pwt-color-error-15: rgb(82, 0, 0) !important;
+    --pwt-color-error-10: rgb(62, 0, 0) !important;
+    --pwt-color-error-5: rgb(40, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Solarized Yellow (#b58900) */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 242) !important;
+    --pwt-color-warning-95: rgb(255, 242, 195) !important;
+    --pwt-color-warning-90: rgb(248, 225, 135) !important;
+    --pwt-color-warning-80: rgb(225, 195, 60) !important;
+    --pwt-color-warning-70: rgb(200, 168, 15) !important;
+    --pwt-color-warning-60: rgb(181, 137, 0) !important;
+    --pwt-color-warning-50: rgb(155, 118, 0) !important;
+    --pwt-color-warning-40: rgb(130, 98, 0) !important;
+    --pwt-color-warning-30: rgb(105, 78, 0) !important;
+    --pwt-color-warning-20: rgb(78, 58, 0) !important;
+    --pwt-color-warning-15: rgb(60, 44, 0) !important;
+    --pwt-color-warning-10: rgb(44, 32, 0) !important;
+    --pwt-color-warning-5: rgb(28, 18, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Solarized Base scale */
+    --pwt-color-neutral-100: rgb(253, 246, 227) !important;
+    --pwt-color-neutral-99: rgb(238, 232, 213) !important;
+    --pwt-color-neutral-95: rgb(198, 200, 198) !important;
+    --pwt-color-neutral-90: rgb(147, 161, 161) !important;
+    --pwt-color-neutral-80: rgb(131, 148, 150) !important;
+    --pwt-color-neutral-70: rgb(110, 128, 132) !important;
+    --pwt-color-neutral-60: rgb(88, 110, 117) !important;
+    --pwt-color-neutral-50: rgb(70, 92, 100) !important;
+    --pwt-color-neutral-40: rgb(55, 75, 82) !important;
+    --pwt-color-neutral-30: rgb(42, 60, 68) !important;
+    --pwt-color-neutral-20: rgb(7, 54, 66) !important;
+    --pwt-color-neutral-15: rgb(0, 43, 54) !important;
+    --pwt-color-neutral-10: rgb(0, 34, 44) !important;
+    --pwt-color-neutral-5: rgb(0, 22, 30) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt */
+    --pwt-color-neutral-alt-100: rgb(253, 246, 227) !important;
+    --pwt-color-neutral-alt-99: rgb(240, 235, 218) !important;
+    --pwt-color-neutral-alt-95: rgb(202, 205, 202) !important;
+    --pwt-color-neutral-alt-90: rgb(152, 166, 166) !important;
+    --pwt-color-neutral-alt-80: rgb(135, 152, 155) !important;
+    --pwt-color-neutral-alt-70: rgb(115, 132, 138) !important;
+    --pwt-color-neutral-alt-60: rgb(92, 115, 122) !important;
+    --pwt-color-neutral-alt-50: rgb(74, 95, 104) !important;
+    --pwt-color-neutral-alt-40: rgb(58, 78, 86) !important;
+    --pwt-color-neutral-alt-30: rgb(44, 62, 70) !important;
+    --pwt-color-neutral-alt-20: rgb(12, 50, 60) !important;
+    --pwt-color-neutral-alt-15: rgb(4, 40, 50) !important;
+    --pwt-color-neutral-alt-10: rgb(0, 30, 40) !important;
+    --pwt-color-neutral-alt-5: rgb(0, 18, 26) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-solarized-light.css

@@ -0,0 +1,194 @@
+/*!Solarized Light*/
+/*
+ * ProxMorph PDM Theme: Solarized Light
+ * Overrides the PWT Material Design tonal color system with Solarized Light palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Ethan Schoonover (https://ethanschoonover.com/solarized)
+ *
+ * ─── Solarized Light Palette ──────────────────────────────────
+ * Blue (accent):  #268bd2    Cyan:     #2aa198
+ * Green:          #859900    Red:      #dc322f
+ * Yellow:         #b58900    Magenta:  #d33682
+ * Text:           #657b83 (base00)  Background: #fdf6e3 (base3)
+ * base1:          #93a1a1    base2:    #eee8d5
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — Solarized Blue (#268bd2) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(248, 252, 255) !important;
+    --pwt-color-primary-95: rgb(215, 238, 255) !important;
+    --pwt-color-primary-90: rgb(178, 222, 252) !important;
+    --pwt-color-primary-80: rgb(115, 188, 238) !important;
+    --pwt-color-primary-70: rgb(62, 158, 222) !important;
+    --pwt-color-primary-60: rgb(38, 139, 210) !important;
+    --pwt-color-primary-50: rgb(25, 118, 185) !important;
+    --pwt-color-primary-40: rgb(15, 98, 158) !important;
+    --pwt-color-primary-30: rgb(6, 78, 130) !important;
+    --pwt-color-primary-20: rgb(0, 58, 102) !important;
+    --pwt-color-primary-15: rgb(0, 46, 82) !important;
+    --pwt-color-primary-10: rgb(0, 34, 62) !important;
+    --pwt-color-primary-5: rgb(0, 20, 38) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Solarized Cyan (#2aa198) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(245, 255, 254) !important;
+    --pwt-color-secondary-95: rgb(208, 248, 244) !important;
+    --pwt-color-secondary-90: rgb(168, 238, 232) !important;
+    --pwt-color-secondary-80: rgb(100, 210, 200) !important;
+    --pwt-color-secondary-70: rgb(55, 180, 172) !important;
+    --pwt-color-secondary-60: rgb(42, 161, 152) !important;
+    --pwt-color-secondary-50: rgb(28, 138, 130) !important;
+    --pwt-color-secondary-40: rgb(16, 115, 108) !important;
+    --pwt-color-secondary-30: rgb(6, 92, 86) !important;
+    --pwt-color-secondary-20: rgb(0, 70, 65) !important;
+    --pwt-color-secondary-15: rgb(0, 55, 52) !important;
+    --pwt-color-secondary-10: rgb(0, 42, 38) !important;
+    --pwt-color-secondary-5: rgb(0, 25, 22) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Solarized Magenta (#d33682) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 252) !important;
+    --pwt-color-tertiary-95: rgb(255, 225, 240) !important;
+    --pwt-color-tertiary-90: rgb(252, 198, 222) !important;
+    --pwt-color-tertiary-80: rgb(238, 140, 185) !important;
+    --pwt-color-tertiary-70: rgb(225, 85, 152) !important;
+    --pwt-color-tertiary-60: rgb(211, 54, 130) !important;
+    --pwt-color-tertiary-50: rgb(185, 38, 110) !important;
+    --pwt-color-tertiary-40: rgb(158, 24, 92) !important;
+    --pwt-color-tertiary-30: rgb(128, 12, 72) !important;
+    --pwt-color-tertiary-20: rgb(98, 2, 54) !important;
+    --pwt-color-tertiary-15: rgb(78, 0, 42) !important;
+    --pwt-color-tertiary-10: rgb(58, 0, 30) !important;
+    --pwt-color-tertiary-5: rgb(36, 0, 16) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Solarized Green (#859900) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(252, 255, 240) !important;
+    --pwt-color-success-95: rgb(232, 250, 182) !important;
+    --pwt-color-success-90: rgb(210, 240, 125) !important;
+    --pwt-color-success-80: rgb(170, 210, 40) !important;
+    --pwt-color-success-70: rgb(148, 178, 10) !important;
+    --pwt-color-success-60: rgb(133, 153, 0) !important;
+    --pwt-color-success-50: rgb(112, 130, 0) !important;
+    --pwt-color-success-40: rgb(92, 108, 0) !important;
+    --pwt-color-success-30: rgb(72, 86, 0) !important;
+    --pwt-color-success-20: rgb(54, 66, 0) !important;
+    --pwt-color-success-15: rgb(42, 52, 0) !important;
+    --pwt-color-success-10: rgb(30, 38, 0) !important;
+    --pwt-color-success-5: rgb(18, 22, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Solarized Red (#dc322f) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 218, 218) !important;
+    --pwt-color-error-90: rgb(255, 185, 184) !important;
+    --pwt-color-error-80: rgb(245, 120, 118) !important;
+    --pwt-color-error-70: rgb(235, 72, 70) !important;
+    --pwt-color-error-60: rgb(220, 50, 47) !important;
+    --pwt-color-error-50: rgb(192, 35, 32) !important;
+    --pwt-color-error-40: rgb(162, 22, 20) !important;
+    --pwt-color-error-30: rgb(132, 10, 10) !important;
+    --pwt-color-error-20: rgb(102, 2, 2) !important;
+    --pwt-color-error-15: rgb(82, 0, 0) !important;
+    --pwt-color-error-10: rgb(60, 0, 0) !important;
+    --pwt-color-error-5: rgb(38, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Solarized Yellow (#b58900) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 242) !important;
+    --pwt-color-warning-95: rgb(255, 240, 195) !important;
+    --pwt-color-warning-90: rgb(248, 225, 148) !important;
+    --pwt-color-warning-80: rgb(232, 195, 62) !important;
+    --pwt-color-warning-70: rgb(202, 162, 10) !important;
+    --pwt-color-warning-60: rgb(181, 137, 0) !important;
+    --pwt-color-warning-50: rgb(155, 115, 0) !important;
+    --pwt-color-warning-40: rgb(130, 95, 0) !important;
+    --pwt-color-warning-30: rgb(105, 75, 0) !important;
+    --pwt-color-warning-20: rgb(80, 56, 0) !important;
+    --pwt-color-warning-15: rgb(64, 44, 0) !important;
+    --pwt-color-warning-10: rgb(48, 32, 0) !important;
+    --pwt-color-warning-5: rgb(28, 18, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Solarized Light Background scale (#fdf6e3 base3) */
+    --pwt-color-neutral-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-99: rgb(254, 250, 240) !important;
+    --pwt-color-neutral-95: rgb(253, 246, 227) !important;
+    --pwt-color-neutral-90: rgb(238, 232, 213) !important;
+    --pwt-color-neutral-80: rgb(220, 215, 200) !important;
+    --pwt-color-neutral-70: rgb(195, 192, 180) !important;
+    --pwt-color-neutral-60: rgb(147, 161, 161) !important;
+    --pwt-color-neutral-50: rgb(131, 148, 150) !important;
+    --pwt-color-neutral-40: rgb(101, 123, 131) !important;
+    --pwt-color-neutral-30: rgb(88, 110, 117) !important;
+    --pwt-color-neutral-20: rgb(73, 95, 102) !important;
+    --pwt-color-neutral-15: rgb(56, 76, 82) !important;
+    --pwt-color-neutral-10: rgb(42, 60, 65) !important;
+    --pwt-color-neutral-5: rgb(28, 42, 46) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — Solarized Light content tones */
+    --pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-alt-99: rgb(254, 250, 242) !important;
+    --pwt-color-neutral-alt-95: rgb(252, 248, 232) !important;
+    --pwt-color-neutral-alt-90: rgb(242, 236, 218) !important;
+    --pwt-color-neutral-alt-80: rgb(225, 220, 205) !important;
+    --pwt-color-neutral-alt-70: rgb(200, 196, 185) !important;
+    --pwt-color-neutral-alt-60: rgb(150, 162, 164) !important;
+    --pwt-color-neutral-alt-50: rgb(134, 150, 152) !important;
+    --pwt-color-neutral-alt-40: rgb(105, 126, 134) !important;
+    --pwt-color-neutral-alt-30: rgb(90, 112, 120) !important;
+    --pwt-color-neutral-alt-20: rgb(76, 98, 105) !important;
+    --pwt-color-neutral-alt-15: rgb(60, 80, 86) !important;
+    --pwt-color-neutral-alt-10: rgb(46, 64, 70) !important;
+    --pwt-color-neutral-alt-5: rgb(30, 45, 50) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (light surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-background: var(--pwt-color-neutral-95) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
+    --pwt-color-primary: var(--pwt-color-primary-40) !important;
+    --pwt-color-on-primary: var(--pwt-color-primary-100) !important;
+    --pwt-color-primary-container: var(--pwt-color-primary-90) !important;
+    --pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
+    background: var(--pwt-color-neutral-95) !important;
+    color: var(--pwt-color-neutral-10) !important;
+    color-scheme: light !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-95) !important;
+}
+
+/* ===== Logo — swap to dark variant for light background ===== */
+img[src*="proxmox_logo_white"] {
+    content: url("/images/proxmox_logo.svg") !important;
+}

themes/pdm/theme-theraiwy-dark.css

@@ -0,0 +1,182 @@
+/*!TheRaiwy Dark*/
+/*
+ * ProxMorph PDM Theme: TheRaiwy Dark
+ * Overrides the PWT Material Design tonal color system with TheRaiwy cyber palette
+ * Version: 1.0.0
+ *
+ * ─── TheRaiwy Cyber Dark Palette ────────────────────────────────
+ * Accent Red:  #dc2626    Emphasis: #c62222
+ * Success:     #22c55e    Danger:   #dc2626
+ * Attention:   #cc9903    Text:     #f0ede8
+ * Canvas:      #080808    Surface:  #0d0d0d
+ * Border:      #2e2e31
+ */
+
+:root {
+    /* Primary — TheRaiwy Accent Red (#dc2626) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(255, 247, 247) !important;
+    --pwt-color-primary-95: rgb(255, 226, 226) !important;
+    --pwt-color-primary-90: rgb(255, 202, 202) !important;
+    --pwt-color-primary-80: rgb(255, 148, 148) !important;
+    --pwt-color-primary-70: rgb(240, 90, 90) !important;
+    --pwt-color-primary-60: rgb(220, 38, 38) !important;
+    --pwt-color-primary-50: rgb(198, 30, 30) !important;
+    --pwt-color-primary-40: rgb(163, 24, 24) !important;
+    --pwt-color-primary-30: rgb(128, 18, 18) !important;
+    --pwt-color-primary-20: rgb(92, 12, 12) !important;
+    --pwt-color-primary-15: rgb(66, 8, 8) !important;
+    --pwt-color-primary-10: rgb(42, 5, 5) !important;
+    --pwt-color-primary-5: rgb(20, 2, 2) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — TheRaiwy Muted (#6b6966) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(247, 246, 245) !important;
+    --pwt-color-secondary-95: rgb(230, 228, 226) !important;
+    --pwt-color-secondary-90: rgb(212, 210, 207) !important;
+    --pwt-color-secondary-80: rgb(176, 174, 170) !important;
+    --pwt-color-secondary-70: rgb(148, 145, 141) !important;
+    --pwt-color-secondary-60: rgb(120, 118, 114) !important;
+    --pwt-color-secondary-50: rgb(107, 105, 102) !important;
+    --pwt-color-secondary-40: rgb(90, 88, 84) !important;
+    --pwt-color-secondary-30: rgb(72, 70, 67) !important;
+    --pwt-color-secondary-20: rgb(54, 53, 50) !important;
+    --pwt-color-secondary-15: rgb(38, 37, 35) !important;
+    --pwt-color-secondary-10: rgb(22, 21, 20) !important;
+    --pwt-color-secondary-5: rgb(12, 11, 10) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — TheRaiwy Warm Copper (#c08465) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 244) !important;
+    --pwt-color-tertiary-95: rgb(250, 234, 224) !important;
+    --pwt-color-tertiary-90: rgb(240, 218, 204) !important;
+    --pwt-color-tertiary-80: rgb(220, 186, 166) !important;
+    --pwt-color-tertiary-70: rgb(200, 156, 130) !important;
+    --pwt-color-tertiary-60: rgb(182, 128, 96) !important;
+    --pwt-color-tertiary-50: rgb(162, 106, 74) !important;
+    --pwt-color-tertiary-40: rgb(140, 86, 56) !important;
+    --pwt-color-tertiary-30: rgb(116, 66, 40) !important;
+    --pwt-color-tertiary-20: rgb(92, 48, 26) !important;
+    --pwt-color-tertiary-15: rgb(74, 36, 18) !important;
+    --pwt-color-tertiary-10: rgb(56, 24, 10) !important;
+    --pwt-color-tertiary-5: rgb(34, 12, 4) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — TheRaiwy Green (#22c55e) */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(242, 255, 246) !important;
+    --pwt-color-success-95: rgb(210, 250, 222) !important;
+    --pwt-color-success-90: rgb(172, 242, 196) !important;
+    --pwt-color-success-80: rgb(114, 225, 150) !important;
+    --pwt-color-success-70: rgb(60, 200, 110) !important;
+    --pwt-color-success-60: rgb(34, 197, 94) !important;
+    --pwt-color-success-50: rgb(22, 163, 74) !important;
+    --pwt-color-success-40: rgb(16, 138, 60) !important;
+    --pwt-color-success-30: rgb(10, 112, 46) !important;
+    --pwt-color-success-20: rgb(6, 86, 34) !important;
+    --pwt-color-success-15: rgb(2, 68, 24) !important;
+    --pwt-color-success-10: rgb(0, 50, 16) !important;
+    --pwt-color-success-5: rgb(0, 30, 8) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — TheRaiwy Red (#dc2626) */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 247, 247) !important;
+    --pwt-color-error-95: rgb(255, 226, 226) !important;
+    --pwt-color-error-90: rgb(255, 202, 202) !important;
+    --pwt-color-error-80: rgb(255, 148, 148) !important;
+    --pwt-color-error-70: rgb(240, 90, 90) !important;
+    --pwt-color-error-60: rgb(220, 38, 38) !important;
+    --pwt-color-error-50: rgb(185, 28, 28) !important;
+    --pwt-color-error-40: rgb(153, 20, 20) !important;
+    --pwt-color-error-30: rgb(120, 12, 12) !important;
+    --pwt-color-error-20: rgb(88, 6, 6) !important;
+    --pwt-color-error-15: rgb(64, 2, 2) !important;
+    --pwt-color-error-10: rgb(44, 0, 0) !important;
+    --pwt-color-error-5: rgb(22, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — TheRaiwy Amber (#cc9903) */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 242) !important;
+    --pwt-color-warning-95: rgb(255, 244, 206) !important;
+    --pwt-color-warning-90: rgb(252, 232, 166) !important;
+    --pwt-color-warning-80: rgb(240, 210, 106) !important;
+    --pwt-color-warning-70: rgb(220, 180, 50) !important;
+    --pwt-color-warning-60: rgb(204, 153, 3) !important;
+    --pwt-color-warning-50: rgb(176, 130, 2) !important;
+    --pwt-color-warning-40: rgb(148, 108, 0) !important;
+    --pwt-color-warning-30: rgb(118, 84, 0) !important;
+    --pwt-color-warning-20: rgb(90, 62, 0) !important;
+    --pwt-color-warning-15: rgb(68, 46, 0) !important;
+    --pwt-color-warning-10: rgb(48, 32, 0) !important;
+    --pwt-color-warning-5: rgb(26, 16, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — TheRaiwy Dark surface scale */
+    --pwt-color-neutral-100: rgb(240, 237, 232) !important;
+    --pwt-color-neutral-99: rgb(224, 222, 218) !important;
+    --pwt-color-neutral-95: rgb(198, 196, 192) !important;
+    --pwt-color-neutral-90: rgb(170, 168, 165) !important;
+    --pwt-color-neutral-80: rgb(136, 134, 131) !important;
+    --pwt-color-neutral-70: rgb(108, 106, 104) !important;
+    --pwt-color-neutral-60: rgb(90, 88, 86) !important;
+    --pwt-color-neutral-50: rgb(72, 70, 68) !important;
+    --pwt-color-neutral-40: rgb(54, 53, 50) !important;
+    --pwt-color-neutral-30: rgb(46, 46, 49) !important;
+    --pwt-color-neutral-20: rgb(22, 22, 24) !important;
+    --pwt-color-neutral-15: rgb(13, 13, 13) !important;
+    --pwt-color-neutral-10: rgb(8, 8, 8) !important;
+    --pwt-color-neutral-5: rgb(4, 4, 4) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — TheRaiwy subtle variant */
+    --pwt-color-neutral-alt-100: rgb(240, 237, 232) !important;
+    --pwt-color-neutral-alt-99: rgb(226, 224, 220) !important;
+    --pwt-color-neutral-alt-95: rgb(202, 200, 196) !important;
+    --pwt-color-neutral-alt-90: rgb(176, 174, 170) !important;
+    --pwt-color-neutral-alt-80: rgb(142, 140, 136) !important;
+    --pwt-color-neutral-alt-70: rgb(114, 112, 108) !important;
+    --pwt-color-neutral-alt-60: rgb(96, 94, 90) !important;
+    --pwt-color-neutral-alt-50: rgb(78, 76, 72) !important;
+    --pwt-color-neutral-alt-40: rgb(60, 58, 56) !important;
+    --pwt-color-neutral-alt-30: rgb(50, 48, 46) !important;
+    --pwt-color-neutral-alt-20: rgb(30, 28, 26) !important;
+    --pwt-color-neutral-alt-15: rgb(18, 17, 16) !important;
+    --pwt-color-neutral-alt-10: rgb(12, 11, 10) !important;
+    --pwt-color-neutral-alt-5: rgb(6, 6, 6) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-100) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-100) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-100) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-100) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-100) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-100) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-100) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-100) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-100) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-100) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-tokyo-night.css

@@ -0,0 +1,181 @@
+/*!Tokyo Night*/
+/*
+ * ProxMorph PDM Theme: Tokyo Night
+ * Overrides the PWT Material Design tonal color system with Tokyo Night palette
+ * Version: 1.0.0
+ *
+ * ─── Tokyo Night Palette ───────────────────────────────────────
+ * Accent Blue:  #7aa2f7    Purple:   #9d7cd8
+ * Green:        #9ece6a    Yellow:   #e0af68
+ * Red:          #f7768e    Cyan:     #7dcfff
+ * Text:         #c0caf5    Base:     #1a1b26
+ */
+
+:root {
+    /* Primary — Tokyo Night Blue (#7aa2f7) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(248, 252, 255) !important;
+    --pwt-color-primary-95: rgb(225, 238, 255) !important;
+    --pwt-color-primary-90: rgb(200, 222, 255) !important;
+    --pwt-color-primary-80: rgb(155, 192, 252) !important;
+    --pwt-color-primary-70: rgb(122, 162, 247) !important;
+    --pwt-color-primary-60: rgb(98, 140, 225) !important;
+    --pwt-color-primary-50: rgb(78, 118, 200) !important;
+    --pwt-color-primary-40: rgb(58, 96, 175) !important;
+    --pwt-color-primary-30: rgb(40, 75, 148) !important;
+    --pwt-color-primary-20: rgb(25, 55, 118) !important;
+    --pwt-color-primary-15: rgb(18, 44, 98) !important;
+    --pwt-color-primary-10: rgb(10, 32, 78) !important;
+    --pwt-color-primary-5: rgb(4, 18, 50) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — Tokyo Night Purple (#9d7cd8) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(252, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(238, 228, 255) !important;
+    --pwt-color-secondary-90: rgb(222, 210, 250) !important;
+    --pwt-color-secondary-80: rgb(188, 168, 235) !important;
+    --pwt-color-secondary-70: rgb(157, 124, 216) !important;
+    --pwt-color-secondary-60: rgb(132, 102, 192) !important;
+    --pwt-color-secondary-50: rgb(108, 80, 168) !important;
+    --pwt-color-secondary-40: rgb(85, 60, 145) !important;
+    --pwt-color-secondary-30: rgb(65, 42, 120) !important;
+    --pwt-color-secondary-20: rgb(46, 26, 95) !important;
+    --pwt-color-secondary-15: rgb(36, 18, 78) !important;
+    --pwt-color-secondary-10: rgb(28, 12, 62) !important;
+    --pwt-color-secondary-5: rgb(16, 5, 40) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — Tokyo Night Cyan (#7dcfff) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(248, 254, 255) !important;
+    --pwt-color-tertiary-95: rgb(222, 248, 255) !important;
+    --pwt-color-tertiary-90: rgb(195, 238, 255) !important;
+    --pwt-color-tertiary-80: rgb(150, 218, 255) !important;
+    --pwt-color-tertiary-70: rgb(125, 207, 255) !important;
+    --pwt-color-tertiary-60: rgb(98, 182, 230) !important;
+    --pwt-color-tertiary-50: rgb(75, 155, 205) !important;
+    --pwt-color-tertiary-40: rgb(55, 130, 178) !important;
+    --pwt-color-tertiary-30: rgb(38, 105, 150) !important;
+    --pwt-color-tertiary-20: rgb(22, 80, 120) !important;
+    --pwt-color-tertiary-15: rgb(14, 65, 100) !important;
+    --pwt-color-tertiary-10: rgb(8, 48, 78) !important;
+    --pwt-color-tertiary-5: rgb(2, 30, 50) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — Tokyo Night Green (#9ece6a) */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(248, 255, 242) !important;
+    --pwt-color-success-95: rgb(225, 248, 200) !important;
+    --pwt-color-success-90: rgb(200, 238, 165) !important;
+    --pwt-color-success-80: rgb(175, 220, 130) !important;
+    --pwt-color-success-70: rgb(158, 206, 106) !important;
+    --pwt-color-success-60: rgb(132, 180, 82) !important;
+    --pwt-color-success-50: rgb(108, 155, 60) !important;
+    --pwt-color-success-40: rgb(86, 130, 42) !important;
+    --pwt-color-success-30: rgb(66, 105, 25) !important;
+    --pwt-color-success-20: rgb(48, 80, 12) !important;
+    --pwt-color-success-15: rgb(36, 62, 5) !important;
+    --pwt-color-success-10: rgb(26, 46, 0) !important;
+    --pwt-color-success-5: rgb(14, 28, 0) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — Tokyo Night Red (#f7768e) */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 249, 250) !important;
+    --pwt-color-error-95: rgb(255, 232, 236) !important;
+    --pwt-color-error-90: rgb(255, 210, 218) !important;
+    --pwt-color-error-80: rgb(252, 165, 180) !important;
+    --pwt-color-error-70: rgb(247, 118, 142) !important;
+    --pwt-color-error-60: rgb(225, 92, 118) !important;
+    --pwt-color-error-50: rgb(200, 68, 95) !important;
+    --pwt-color-error-40: rgb(172, 46, 72) !important;
+    --pwt-color-error-30: rgb(145, 26, 52) !important;
+    --pwt-color-error-20: rgb(112, 10, 35) !important;
+    --pwt-color-error-15: rgb(90, 4, 24) !important;
+    --pwt-color-error-10: rgb(68, 0, 14) !important;
+    --pwt-color-error-5: rgb(45, 0, 6) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — Tokyo Night Yellow (#e0af68) */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 246) !important;
+    --pwt-color-warning-95: rgb(255, 242, 215) !important;
+    --pwt-color-warning-90: rgb(248, 228, 180) !important;
+    --pwt-color-warning-80: rgb(238, 200, 138) !important;
+    --pwt-color-warning-70: rgb(224, 175, 104) !important;
+    --pwt-color-warning-60: rgb(200, 152, 80) !important;
+    --pwt-color-warning-50: rgb(175, 130, 58) !important;
+    --pwt-color-warning-40: rgb(150, 108, 38) !important;
+    --pwt-color-warning-30: rgb(122, 85, 20) !important;
+    --pwt-color-warning-20: rgb(95, 65, 8) !important;
+    --pwt-color-warning-15: rgb(75, 50, 2) !important;
+    --pwt-color-warning-10: rgb(55, 36, 0) !important;
+    --pwt-color-warning-5: rgb(35, 22, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — Tokyo Night Background scale */
+    --pwt-color-neutral-100: rgb(192, 202, 245) !important;
+    --pwt-color-neutral-99: rgb(185, 196, 240) !important;
+    --pwt-color-neutral-95: rgb(169, 177, 214) !important;
+    --pwt-color-neutral-90: rgb(148, 160, 198) !important;
+    --pwt-color-neutral-80: rgb(125, 138, 178) !important;
+    --pwt-color-neutral-70: rgb(105, 118, 158) !important;
+    --pwt-color-neutral-60: rgb(86, 98, 138) !important;
+    --pwt-color-neutral-50: rgb(68, 80, 118) !important;
+    --pwt-color-neutral-40: rgb(52, 62, 98) !important;
+    --pwt-color-neutral-30: rgb(36, 40, 59) !important;
+    --pwt-color-neutral-20: rgb(31, 35, 53) !important;
+    --pwt-color-neutral-15: rgb(26, 27, 38) !important;
+    --pwt-color-neutral-10: rgb(22, 22, 30) !important;
+    --pwt-color-neutral-5: rgb(14, 14, 20) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt */
+    --pwt-color-neutral-alt-100: rgb(192, 202, 245) !important;
+    --pwt-color-neutral-alt-99: rgb(188, 198, 242) !important;
+    --pwt-color-neutral-alt-95: rgb(172, 182, 225) !important;
+    --pwt-color-neutral-alt-90: rgb(152, 162, 205) !important;
+    --pwt-color-neutral-alt-80: rgb(128, 140, 182) !important;
+    --pwt-color-neutral-alt-70: rgb(108, 120, 162) !important;
+    --pwt-color-neutral-alt-60: rgb(88, 100, 142) !important;
+    --pwt-color-neutral-alt-50: rgb(70, 82, 122) !important;
+    --pwt-color-neutral-alt-40: rgb(54, 65, 102) !important;
+    --pwt-color-neutral-alt-30: rgb(38, 48, 78) !important;
+    --pwt-color-neutral-alt-20: rgb(28, 34, 56) !important;
+    --pwt-color-neutral-alt-15: rgb(22, 26, 42) !important;
+    --pwt-color-neutral-alt-10: rgb(18, 20, 32) !important;
+    --pwt-color-neutral-alt-5: rgb(12, 12, 22) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-10) !important;
+}

themes/pdm/theme-unifi-light.css

@@ -0,0 +1,194 @@
+/*!UniFi Light*/
+/*
+ * ProxMorph PDM Theme: UniFi Light
+ * Overrides the PWT Material Design tonal color system with UniFi Light palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Ubiquiti Design System
+ *
+ * ─── UniFi Light Palette ──────────────────────────────────────
+ * Blue (accent):  #006FFF    Secondary: #00A4E4
+ * Green:          #00C853    Red:       #F44336
+ * Yellow:         #FFB300    Purple:    #7B1FA2
+ * Text (dark):    #1A1A1A   Background:#F5F6FA
+ * Surface:        #FFFFFF    Border:    #E0E0E0
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — UniFi Blue (#006FFF) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(248, 251, 255) !important;
+    --pwt-color-primary-95: rgb(215, 232, 255) !important;
+    --pwt-color-primary-90: rgb(178, 212, 255) !important;
+    --pwt-color-primary-80: rgb(105, 170, 255) !important;
+    --pwt-color-primary-70: rgb(50, 135, 255) !important;
+    --pwt-color-primary-60: rgb(0, 111, 255) !important;
+    --pwt-color-primary-50: rgb(0, 92, 218) !important;
+    --pwt-color-primary-40: rgb(0, 74, 182) !important;
+    --pwt-color-primary-30: rgb(0, 56, 145) !important;
+    --pwt-color-primary-20: rgb(0, 40, 110) !important;
+    --pwt-color-primary-15: rgb(0, 30, 88) !important;
+    --pwt-color-primary-10: rgb(0, 22, 68) !important;
+    --pwt-color-primary-5: rgb(0, 12, 42) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — UniFi Teal (#00A4E4) tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(245, 253, 255) !important;
+    --pwt-color-secondary-95: rgb(210, 245, 255) !important;
+    --pwt-color-secondary-90: rgb(170, 232, 252) !important;
+    --pwt-color-secondary-80: rgb(100, 202, 238) !important;
+    --pwt-color-secondary-70: rgb(40, 178, 232) !important;
+    --pwt-color-secondary-60: rgb(0, 164, 228) !important;
+    --pwt-color-secondary-50: rgb(0, 138, 198) !important;
+    --pwt-color-secondary-40: rgb(0, 112, 165) !important;
+    --pwt-color-secondary-30: rgb(0, 88, 132) !important;
+    --pwt-color-secondary-20: rgb(0, 65, 100) !important;
+    --pwt-color-secondary-15: rgb(0, 50, 80) !important;
+    --pwt-color-secondary-10: rgb(0, 38, 60) !important;
+    --pwt-color-secondary-5: rgb(0, 22, 38) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — UniFi Purple (#7B1FA2) tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(255, 248, 255) !important;
+    --pwt-color-tertiary-95: rgb(248, 225, 255) !important;
+    --pwt-color-tertiary-90: rgb(235, 198, 255) !important;
+    --pwt-color-tertiary-80: rgb(208, 148, 242) !important;
+    --pwt-color-tertiary-70: rgb(175, 95, 215) !important;
+    --pwt-color-tertiary-60: rgb(123, 31, 162) !important;
+    --pwt-color-tertiary-50: rgb(105, 20, 140) !important;
+    --pwt-color-tertiary-40: rgb(85, 12, 118) !important;
+    --pwt-color-tertiary-30: rgb(68, 5, 95) !important;
+    --pwt-color-tertiary-20: rgb(50, 0, 72) !important;
+    --pwt-color-tertiary-15: rgb(40, 0, 58) !important;
+    --pwt-color-tertiary-10: rgb(28, 0, 42) !important;
+    --pwt-color-tertiary-5: rgb(16, 0, 25) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — UniFi Green (#00C853) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(245, 255, 248) !important;
+    --pwt-color-success-95: rgb(200, 255, 218) !important;
+    --pwt-color-success-90: rgb(150, 248, 185) !important;
+    --pwt-color-success-80: rgb(80, 228, 138) !important;
+    --pwt-color-success-70: rgb(20, 210, 100) !important;
+    --pwt-color-success-60: rgb(0, 200, 83) !important;
+    --pwt-color-success-50: rgb(0, 172, 68) !important;
+    --pwt-color-success-40: rgb(0, 142, 52) !important;
+    --pwt-color-success-30: rgb(0, 115, 38) !important;
+    --pwt-color-success-20: rgb(0, 88, 26) !important;
+    --pwt-color-success-15: rgb(0, 70, 18) !important;
+    --pwt-color-success-10: rgb(0, 52, 12) !important;
+    --pwt-color-success-5: rgb(0, 32, 5) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — UniFi Red (#F44336) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 218, 215) !important;
+    --pwt-color-error-90: rgb(255, 185, 180) !important;
+    --pwt-color-error-80: rgb(252, 128, 118) !important;
+    --pwt-color-error-70: rgb(248, 88, 75) !important;
+    --pwt-color-error-60: rgb(244, 67, 54) !important;
+    --pwt-color-error-50: rgb(215, 48, 38) !important;
+    --pwt-color-error-40: rgb(182, 32, 24) !important;
+    --pwt-color-error-30: rgb(148, 18, 12) !important;
+    --pwt-color-error-20: rgb(115, 6, 2) !important;
+    --pwt-color-error-15: rgb(92, 0, 0) !important;
+    --pwt-color-error-10: rgb(68, 0, 0) !important;
+    --pwt-color-error-5: rgb(42, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — UniFi Amber (#FFB300) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 242) !important;
+    --pwt-color-warning-95: rgb(255, 240, 195) !important;
+    --pwt-color-warning-90: rgb(255, 225, 145) !important;
+    --pwt-color-warning-80: rgb(255, 200, 60) !important;
+    --pwt-color-warning-70: rgb(255, 185, 15) !important;
+    --pwt-color-warning-60: rgb(255, 179, 0) !important;
+    --pwt-color-warning-50: rgb(222, 152, 0) !important;
+    --pwt-color-warning-40: rgb(188, 126, 0) !important;
+    --pwt-color-warning-30: rgb(155, 100, 0) !important;
+    --pwt-color-warning-20: rgb(120, 76, 0) !important;
+    --pwt-color-warning-15: rgb(96, 58, 0) !important;
+    --pwt-color-warning-10: rgb(72, 42, 0) !important;
+    --pwt-color-warning-5: rgb(44, 24, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — UniFi Light Background scale (#F5F6FA base) */
+    --pwt-color-neutral-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-99: rgb(250, 250, 252) !important;
+    --pwt-color-neutral-95: rgb(245, 246, 250) !important;
+    --pwt-color-neutral-90: rgb(235, 236, 242) !important;
+    --pwt-color-neutral-80: rgb(224, 224, 230) !important;
+    --pwt-color-neutral-70: rgb(200, 200, 210) !important;
+    --pwt-color-neutral-60: rgb(170, 172, 185) !important;
+    --pwt-color-neutral-50: rgb(140, 142, 158) !important;
+    --pwt-color-neutral-40: rgb(108, 110, 128) !important;
+    --pwt-color-neutral-30: rgb(82, 84, 100) !important;
+    --pwt-color-neutral-20: rgb(58, 60, 75) !important;
+    --pwt-color-neutral-15: rgb(42, 44, 58) !important;
+    --pwt-color-neutral-10: rgb(26, 26, 38) !important;
+    --pwt-color-neutral-5: rgb(16, 16, 24) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — UniFi Light border/surface tones */
+    --pwt-color-neutral-alt-100: rgb(255, 255, 255) !important;
+    --pwt-color-neutral-alt-99: rgb(250, 251, 254) !important;
+    --pwt-color-neutral-alt-95: rgb(242, 244, 248) !important;
+    --pwt-color-neutral-alt-90: rgb(232, 234, 240) !important;
+    --pwt-color-neutral-alt-80: rgb(218, 220, 228) !important;
+    --pwt-color-neutral-alt-70: rgb(196, 198, 208) !important;
+    --pwt-color-neutral-alt-60: rgb(168, 170, 182) !important;
+    --pwt-color-neutral-alt-50: rgb(138, 140, 155) !important;
+    --pwt-color-neutral-alt-40: rgb(106, 108, 126) !important;
+    --pwt-color-neutral-alt-30: rgb(80, 82, 98) !important;
+    --pwt-color-neutral-alt-20: rgb(56, 58, 72) !important;
+    --pwt-color-neutral-alt-15: rgb(42, 44, 56) !important;
+    --pwt-color-neutral-alt-10: rgb(28, 28, 40) !important;
+    --pwt-color-neutral-alt-5: rgb(16, 16, 26) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (light surfaces) ===== */
+:root.pwt-dark-mode {
+    --pwt-color-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-90) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-90) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-95) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-20) !important;
+    --pwt-color-background: var(--pwt-color-neutral-95) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-20) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-shadow: rgba(0, 0, 0, 0.12) !important;
+    --pwt-color-primary: var(--pwt-color-primary-40) !important;
+    --pwt-color-on-primary: var(--pwt-color-primary-100) !important;
+    --pwt-color-primary-container: var(--pwt-color-primary-90) !important;
+    --pwt-color-on-primary-container: var(--pwt-color-primary-10) !important;
+    background: var(--pwt-color-neutral-95) !important;
+    color: var(--pwt-color-neutral-10) !important;
+    color-scheme: light !important;
+}
+
+body {
+    background-color: var(--pwt-color-neutral-95) !important;
+}
+
+/* ===== Logo — swap to dark variant for light background ===== */
+img[src*="proxmox_logo_white"] {
+    content: url("/images/proxmox_logo.svg") !important;
+}

themes/pdm/theme-unifi.css

@@ -0,0 +1,192 @@
+/*!UniFi*/
+/*
+ * ProxMorph PDM Theme: UniFi
+ * Overrides the PWT Material Design tonal color system with UniFi palette
+ * Version: 1.0.0
+ * Author: ProxMorph / Ubiquiti Design System
+ *
+ * ─── UniFi Palette ─────────────────────────────────────────────
+ * Accent Blue:  #006EFF    Blue Hover:  #4797FF
+ * Success:      #37BE5F    Warning:     #f5a623
+ * Danger:       #f03a3e    Text:        #DEE0E3
+ * Base:         #131416    Surface:     #282B2F
+ * Elevated:     #34383D
+ */
+
+/* ===== Tonal Color Overrides ===== */
+:root {
+    /* Primary — UniFi Blue (#006EFF) tonal scale */
+    --pwt-color-primary-100: rgb(255, 255, 255) !important;
+    --pwt-color-primary-99: rgb(245, 250, 255) !important;
+    --pwt-color-primary-95: rgb(220, 238, 255) !important;
+    --pwt-color-primary-90: rgb(190, 222, 255) !important;
+    --pwt-color-primary-80: rgb(130, 190, 255) !important;
+    --pwt-color-primary-70: rgb(71, 151, 255) !important;
+    --pwt-color-primary-60: rgb(0, 110, 255) !important;
+    --pwt-color-primary-50: rgb(0, 90, 210) !important;
+    --pwt-color-primary-40: rgb(0, 72, 170) !important;
+    --pwt-color-primary-30: rgb(0, 55, 135) !important;
+    --pwt-color-primary-20: rgb(0, 40, 100) !important;
+    --pwt-color-primary-15: rgb(0, 30, 80) !important;
+    --pwt-color-primary-10: rgb(0, 22, 62) !important;
+    --pwt-color-primary-5: rgb(0, 12, 40) !important;
+    --pwt-color-primary-0: rgb(0, 0, 0) !important;
+
+    /* Secondary — UniFi Dim Blue tonal scale */
+    --pwt-color-secondary-100: rgb(255, 255, 255) !important;
+    --pwt-color-secondary-99: rgb(248, 250, 255) !important;
+    --pwt-color-secondary-95: rgb(228, 235, 248) !important;
+    --pwt-color-secondary-90: rgb(208, 218, 238) !important;
+    --pwt-color-secondary-80: rgb(175, 190, 215) !important;
+    --pwt-color-secondary-70: rgb(145, 162, 192) !important;
+    --pwt-color-secondary-60: rgb(115, 124, 135) !important;
+    --pwt-color-secondary-50: rgb(95, 105, 118) !important;
+    --pwt-color-secondary-40: rgb(75, 85, 98) !important;
+    --pwt-color-secondary-30: rgb(52, 56, 61) !important;
+    --pwt-color-secondary-20: rgb(40, 43, 47) !important;
+    --pwt-color-secondary-15: rgb(32, 35, 38) !important;
+    --pwt-color-secondary-10: rgb(24, 26, 30) !important;
+    --pwt-color-secondary-5: rgb(16, 17, 20) !important;
+    --pwt-color-secondary-0: rgb(0, 0, 0) !important;
+
+    /* Tertiary — UniFi Cyan/Teal tonal scale */
+    --pwt-color-tertiary-100: rgb(255, 255, 255) !important;
+    --pwt-color-tertiary-99: rgb(248, 254, 255) !important;
+    --pwt-color-tertiary-95: rgb(225, 248, 255) !important;
+    --pwt-color-tertiary-90: rgb(195, 238, 252) !important;
+    --pwt-color-tertiary-80: rgb(140, 215, 240) !important;
+    --pwt-color-tertiary-70: rgb(90, 192, 225) !important;
+    --pwt-color-tertiary-60: rgb(50, 168, 200) !important;
+    --pwt-color-tertiary-50: rgb(20, 142, 175) !important;
+    --pwt-color-tertiary-40: rgb(0, 118, 150) !important;
+    --pwt-color-tertiary-30: rgb(0, 92, 120) !important;
+    --pwt-color-tertiary-20: rgb(0, 68, 92) !important;
+    --pwt-color-tertiary-15: rgb(0, 52, 72) !important;
+    --pwt-color-tertiary-10: rgb(0, 38, 55) !important;
+    --pwt-color-tertiary-5: rgb(0, 22, 35) !important;
+    --pwt-color-tertiary-0: rgb(0, 0, 0) !important;
+
+    /* Success — UniFi Green (#37BE5F) tonal scale */
+    --pwt-color-success-100: rgb(255, 255, 255) !important;
+    --pwt-color-success-99: rgb(242, 255, 246) !important;
+    --pwt-color-success-95: rgb(205, 255, 220) !important;
+    --pwt-color-success-90: rgb(160, 248, 185) !important;
+    --pwt-color-success-80: rgb(100, 220, 135) !important;
+    --pwt-color-success-70: rgb(55, 190, 95) !important;
+    --pwt-color-success-60: rgb(40, 165, 78) !important;
+    --pwt-color-success-50: rgb(25, 140, 60) !important;
+    --pwt-color-success-40: rgb(12, 115, 45) !important;
+    --pwt-color-success-30: rgb(0, 90, 32) !important;
+    --pwt-color-success-20: rgb(0, 66, 20) !important;
+    --pwt-color-success-15: rgb(0, 50, 14) !important;
+    --pwt-color-success-10: rgb(0, 36, 8) !important;
+    --pwt-color-success-5: rgb(0, 22, 4) !important;
+    --pwt-color-success-0: rgb(0, 0, 0) !important;
+
+    /* Error — UniFi Danger (#f03a3e) tonal scale */
+    --pwt-color-error-100: rgb(255, 255, 255) !important;
+    --pwt-color-error-99: rgb(255, 248, 248) !important;
+    --pwt-color-error-95: rgb(255, 228, 228) !important;
+    --pwt-color-error-90: rgb(255, 200, 202) !important;
+    --pwt-color-error-80: rgb(255, 145, 148) !important;
+    --pwt-color-error-70: rgb(248, 95, 98) !important;
+    --pwt-color-error-60: rgb(240, 58, 62) !important;
+    --pwt-color-error-50: rgb(210, 40, 44) !important;
+    --pwt-color-error-40: rgb(180, 24, 28) !important;
+    --pwt-color-error-30: rgb(148, 10, 14) !important;
+    --pwt-color-error-20: rgb(110, 4, 8) !important;
+    --pwt-color-error-15: rgb(88, 0, 2) !important;
+    --pwt-color-error-10: rgb(65, 0, 0) !important;
+    --pwt-color-error-5: rgb(42, 0, 0) !important;
+    --pwt-color-error-0: rgb(0, 0, 0) !important;
+
+    /* Warning — UniFi Warning (#f5a623) tonal scale */
+    --pwt-color-warning-100: rgb(255, 255, 255) !important;
+    --pwt-color-warning-99: rgb(255, 252, 245) !important;
+    --pwt-color-warning-95: rgb(255, 242, 210) !important;
+    --pwt-color-warning-90: rgb(255, 228, 168) !important;
+    --pwt-color-warning-80: rgb(252, 205, 105) !important;
+    --pwt-color-warning-70: rgb(245, 166, 35) !important;
+    --pwt-color-warning-60: rgb(218, 145, 20) !important;
+    --pwt-color-warning-50: rgb(190, 122, 8) !important;
+    --pwt-color-warning-40: rgb(158, 100, 0) !important;
+    --pwt-color-warning-30: rgb(125, 78, 0) !important;
+    --pwt-color-warning-20: rgb(92, 56, 0) !important;
+    --pwt-color-warning-15: rgb(72, 42, 0) !important;
+    --pwt-color-warning-10: rgb(52, 30, 0) !important;
+    --pwt-color-warning-5: rgb(32, 18, 0) !important;
+    --pwt-color-warning-0: rgb(0, 0, 0) !important;
+
+    /* Neutral — UniFi Dark Background scale */
+    --pwt-color-neutral-100: rgb(249, 250, 250) !important;
+    --pwt-color-neutral-99: rgb(240, 242, 244) !important;
+    --pwt-color-neutral-95: rgb(222, 224, 227) !important;
+    --pwt-color-neutral-90: rgb(200, 205, 210) !important;
+    --pwt-color-neutral-80: rgb(183, 188, 194) !important;
+    --pwt-color-neutral-70: rgb(155, 162, 172) !important;
+    --pwt-color-neutral-60: rgb(115, 124, 135) !important;
+    --pwt-color-neutral-50: rgb(90, 98, 108) !important;
+    --pwt-color-neutral-40: rgb(68, 72, 78) !important;
+    --pwt-color-neutral-30: rgb(52, 56, 61) !important;
+    --pwt-color-neutral-20: rgb(40, 43, 47) !important;
+    --pwt-color-neutral-15: rgb(28, 30, 34) !important;
+    --pwt-color-neutral-10: rgb(19, 20, 22) !important;
+    --pwt-color-neutral-5: rgb(12, 12, 14) !important;
+    --pwt-color-neutral-0: rgb(0, 0, 0) !important;
+
+    /* Neutral Alt — UniFi Alt tones */
+    --pwt-color-neutral-alt-100: rgb(249, 250, 250) !important;
+    --pwt-color-neutral-alt-99: rgb(242, 245, 248) !important;
+    --pwt-color-neutral-alt-95: rgb(225, 230, 238) !important;
+    --pwt-color-neutral-alt-90: rgb(208, 215, 225) !important;
+    --pwt-color-neutral-alt-80: rgb(178, 188, 200) !important;
+    --pwt-color-neutral-alt-70: rgb(148, 158, 172) !important;
+    --pwt-color-neutral-alt-60: rgb(118, 128, 142) !important;
+    --pwt-color-neutral-alt-50: rgb(92, 102, 115) !important;
+    --pwt-color-neutral-alt-40: rgb(68, 76, 88) !important;
+    --pwt-color-neutral-alt-30: rgb(48, 54, 64) !important;
+    --pwt-color-neutral-alt-20: rgb(35, 40, 48) !important;
+    --pwt-color-neutral-alt-15: rgb(26, 30, 36) !important;
+    --pwt-color-neutral-alt-10: rgb(18, 20, 26) !important;
+    --pwt-color-neutral-alt-5: rgb(10, 12, 16) !important;
+    --pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
+}
+
+/* ===== Semantic Color Remapping (darker surfaces to match PVE) ===== */
+:root.pwt-dark-mode {
+    /* Flat surfaces — panels slightly elevated above background */
+    --pwt-color-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
+    --pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
+    --pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
+    --pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
+    --pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
+    --pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
+    --pwt-color-background: var(--pwt-color-neutral-10) !important;
+    --pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
+    --pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
+    --pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
+    --pwt-color-shadow: var(--pwt-color-neutral-0) !important;
+
+    /* Vivid primary — match PVE's #006EFF accent */
+    --pwt-color-primary: var(--pwt-color-primary-60) !important;
+    --pwt-color-on-primary: var(--pwt-color-primary-100) !important;
+    --pwt-color-primary-container: var(--pwt-color-primary-30) !important;
+    --pwt-color-on-primary-container: var(--pwt-color-primary-90) !important;
+
+    background: var(--pwt-color-neutral-10) !important;
+    color: var(--pwt-color-neutral-95) !important;
+}
+
+body {
+    background-color: rgb(19, 20, 22) !important;
+}