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');}); - - - -
+ + + + + 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 ` - name: Restart pveproxy so new CSS is served service: name: pveproxy - state: restarted \ No newline at end of file + state: restarted