From e27a48ed0a018f015ac7a09277c2eb47e0e2e78e Mon Sep 17 00:00:00 2001 From: vhsdream Date: Sat, 9 Aug 2025 09:28:37 -0400 Subject: [PATCH 1/3] Add support for automatic theme switching based on user preference --- Example/index.html.tpl | 37 +++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/Example/index.html.tpl b/Example/index.html.tpl index 05011c7..4e4e705 100644 --- a/Example/index.html.tpl +++ b/Example/index.html.tpl @@ -55,25 +55,34 @@ Ext.onReady(function() { Ext.create('PVE.StdWorkspace');}); - - - -
+ + + + + From 2919fb52b8b55d49780df010d1084198f3c6603a Mon Sep 17 00:00:00 2001 From: vhsdream Date: Sat, 9 Aug 2025 09:45:34 -0400 Subject: [PATCH 2/3] Update Ansible playbook --- ansible/playbooks/solarized-theme.yml | 36 ++++++++++++++++----------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/ansible/playbooks/solarized-theme.yml b/ansible/playbooks/solarized-theme.yml index e9332d7..b900e4c 100644 --- a/ansible/playbooks/solarized-theme.yml +++ b/ansible/playbooks/solarized-theme.yml @@ -1,14 +1,14 @@ --- - name: Install Solarized Proxmox theme # Playbook: solarized-theme.yml -# Author: Dieter Beckers +# Author: Dieter Beckers & vhsdream # Github: https://github.com/dabeastnet/SolarPVE -# Description: Install Solarized Proxmox theme (light + dark-mode detection) +# Description: Install Solarized Proxmox theme (automatic light + dark-mode detection) # License: CC BY-NC 4.0. # -#Change this to match your inventory grouping +# Change this to match your inventory grouping hosts: pve - become: yes + become: true vars: css_src: files/solarized.css css_dest: /usr/share/pve-manager/images/solarized.css @@ -31,27 +31,35 @@ group: root mode: '0644' - - name: Inject dark-mode detector + Solarized link into index.html.tpl + - name: Inject auto-theme-mode detector + Solarized link into index.html.tpl blockinfile: path: "{{ tpl_path }}" backup: yes marker: "" - insertbefore: "" + insertbefore: "" block: | - name: Restart pveproxy so new CSS is served service: name: pveproxy - state: restarted \ No newline at end of file + state: restarted From bdf07597b397683f91f5f984d68965c310a8c265 Mon Sep 17 00:00:00 2001 From: vhsdream Date: Sat, 9 Aug 2025 10:02:58 -0400 Subject: [PATCH 3/3] Update README --- README.md | 74 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 764cb77..ed98357 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,27 @@ ![Header](./images/header.png) (Generated with [PixelPoSH](https://github.com/dabeastnet/PixelPoSH)) + # SolarPVE A **[Solarized](https://ethanschoonover.com/solarized/)**-inspired light & dark CSS theme for Proxmox VE’s web UI. -Automatically switches to dark mode whenever Proxmox’s `theme-proxmox-dark.css` is loaded. +Automatically switches between light + dark themes based on system preference. --- ## Screenshots + Lightmode: ![Lightmode](./images/light.png) Darkmode: ![Darkmode](./images/dark.png) - ## Features -- **Light** (Solarized Light) by default -- **Dark** (Solarized Dark) when Proxmox’s dark stylesheet is present -- No JS-framework dependencies—just vanilla CSS & a tiny inline script +- **Light** (Solarized Light) when selected +- **Dark** (Solarized Dark) when selected +- **Auto** - when selected, automatically chooses theme based on user/system preferences, via the `prefers-color-scheme: dark` attribute +- No JS-framework dependencies—just vanilla CSS & a tiny inline script - Easy to install and override via Proxmox’s `index.html.tpl` --- @@ -30,7 +32,8 @@ Darkmode: 1. **Copy the CSS** Place `solarized.css` into your Proxmox server’s static‐assets folder. - By default this is: + By default this is: + ``` /usr/share/pve-manager/images/solarized.css @@ -38,29 +41,32 @@ Darkmode: ``` 2. **Patch the Proxmox template** -Edit (or better: override) Proxmox’s `index.html.tpl`—usually at: + Edit (or better: override) Proxmox’s `index.html.tpl`—usually at: + ``` /usr/share/pve-manager/index.html.tpl -```` -and add *before* the existing `` the following snippet: +``` + +and add _before_ the existing `` (near the bottom of the document) the following snippet: ```html - -```` + +``` + (An example index.html.tpl ships in this repo, see the `Example` folder) 3. **Clear browser cache** @@ -73,14 +79,14 @@ and add *before* the existing `` the following snippet: ``` ### Ansible playbook (auto installer) + > See the ansible subfolder #### 🛠️ Prerequisites -* **Ansible 2.9+** installed on your control machine -* SSH access (with `become`/sudo rights) to one or more Proxmox hosts -* A copy of your `solarized.css` in `files/solarized.css` - +- **Ansible 2.9+** installed on your control machine +- SSH access (with `become`/sudo rights) to one or more Proxmox hosts +- A copy of your `solarized.css` in `files/solarized.css` #### ⚙️ Usage @@ -99,16 +105,16 @@ and add *before* the existing `` the following snippet: > This will: > - > * Copy `solarized.css` to `/usr/share/pve-manager/images/solarized.css` - > * Patch Proxmox’s `index.html.tpl` to include light & dark-mode logic - > * Restart `pveproxy` to serve your new theme + > - Copy `solarized.css` to `/usr/share/pve-manager/images/solarized.css` + > - Patch Proxmox’s `index.html.tpl` to include light & dark-mode logic + > - Restart `pveproxy` to serve your new theme --- #### 🔧 Configuration -* **Playbook file**: `solarized-theme.yml` -* **Key variables** (override via `-e` or `group_vars` if desired): +- **Playbook file**: `solarized-theme.yml` +- **Key variables** (override via `-e` or `group_vars` if desired): | Variable | Default path | | ---------- | ------------------------------------------------- | @@ -116,23 +122,27 @@ and add *before* the existing `` the following snippet: | `css_dest` | `/usr/share/pve-manager/images/solarized.css` | | `tpl_path` | `/usr/share/pve-manager/templates/index.html.tpl` | - --- ## How It Works -* **Light mode** +- Determines selected theme via the `PVEThemeCookie` value that is set when choosing light, dark or default. + +- **Light mode** All rules scoped under `body:not(.proxmox-theme-dark)` apply Solarized Light defaults. -* **Dark mode** - When Proxmox itself loads its `theme-proxmox-dark.css`, our small `