weilbyte / pvediscorddark

A Discord-like dark theme for the Proxmox Web UI.

A dark theme for the Proxmox Web UI,
inspired by Discord's color scheme.

Everything is dark, including the graphs, context menus and all in between! Eyes need not be fried.

The theme now runs its own JavaScript code which patches the colors for certain components (and charts). This approach is much better, and safer than what was used previously.

Installation

The installation is done via the CLI utility. Run the following commands on the PVE node serving the Web UI: Clearing browser cache is necessary to see the changes.

~# wget https://raw.githubusercontent.com/Weilbyte/PVEDiscordDark/master/PVEDiscordDark.sh
~# bash PVEDiscordDark.sh install

Or this oneliner

bash <(curl -s https://raw.githubusercontent.com/Weilbyte/PVEDiscordDark/master/PVEDiscordDark.sh ) install

Note that you will need to run the install command every time pve-manager is updated (i.e. after every Proxmox update)

Uninstallation

To uninstall the theme, simply run the utility with the uninstall command. Clearing browser cache is necessary to see the changes.

Installer & Security

The new installer relies on the /meta/supported and /meta/imagelist files being present in the repository. It also includes a silent mode. Run bash PVEDiscordDark.sh -h for usage instructions.

Furthermore, you will be able to provide the environment variables REPO and TAG to specify from what repository and from what commit tag to install the theme from.
REPO is in format Username/Repository and defaults to Weilbyte/PVEDiscordDark (this repository).
TAG defaults to master, but it is strongly recommended to use the SHA-1 commit hash for security.

Offline bundle

If desired, the installation utility can be run offline. Upon detecting a folder called offline in the current working directory, the script will enter offline mode and use the resources within that folder instead of retrieving them from GitHub.

The offline folder must have the following files: meta/[imagelist, supported], PVEDiscordDark/images/*, PVEDiscordDark/js/PVEDiscordDark.js, PVEDiscordDark/sass/PVEDiscordDark.css

You can find a zip containing the installer and offline folder under the artifact section of the GitHub Actions under this repository or as an asset attached to releases.

Contributors

Thanks to everybody who contributed to this project, and additional thanks to Crinisus for catching bugs for the rewrite!

Awoo'ing on this repo is encouraged.

pvediscorddark's Issues

Make `install` work better with recently updated PVE

The install incorrectly detects the theme as installed even though the HTML template does not contain the code to include the stylesheet and JS patcher.

Examples of this happening are #71 and #72.

Missing Timer Icon

There should be a small timer icon here as this is a 14 hr backup, and with the standard theme, there is an icon here.

PVE 7.0

Some issues I discovered..

• No color for AD/LDAP/OpenID icons on the Add dropdown button under DC => Permissions => Authentication.
• When clicking on a button, the button will become grey/white.
• Certain windows have wrong text color (as example, see DC => Storage => Add => PBS window encryption tab)
• Wrong text color for /etc/apt/sources.list text under Node => Updates => Repositories
• Right click context menu on server view left-side-panel thing is absolutely borked.
• White borders on graph buttons under CT/VM summary views (and other places using graphs)
• No color for "view" button under CT/VM => Task History (icon is new addition)

Probably more. Need further testing.

Replace common color values with variables

Replace commonly used color values with variables.

Ansible Integration

I made it work for now, but I don't know if there will be issues down the road based on any changes you make.
It would be nice if you could create an Ansbile Role to automatically download the latest, or specified, version and install/upgrade the theme.

A bonus if you could tag releases so we can refer to specific versions when deploying to multiple servers.

This is what I have so far.

  - name: Create a /opt/DiscordDark/ directory if it does not exist
    file:
      path: /opt/DiscordDark/
      state: directory
      mode: '0755'
  
  - name: download PVEDiscordDark
    get_url:
      url: https://raw.githubusercontent.com/Weilbyte/PVEDiscordDark/master/PVEDiscordDark.py
      dest: /opt/DiscordDark/PVEDiscordDark.py
      mode: '0770'
    register: theme_updated

  - name: Check if theme is installed
    stat:
      path: /usr/share/pve-manager/css/dd_style.css
    register: theme_installed

  - name: uninstall old theme
    command: python3 /opt/DiscordDark/PVEDiscordDark.py -a uninstall
    when: theme_updated.changed and theme_installed.stat.exists

  - name: install new theme
    command: python3 /opt/DiscordDark/PVEDiscordDark.py -a install
    when: theme_updated.changed or theme_installed.stat.exists == False

Light background makes text unreadable

First of all, I want to thank you for this theme. It is absolutely amazing and it doesn't hurt my eyes like the default light theme.

However, I noticed that in some places, there are light text on light background and it is practically unreadable. I hope you could fix this:

Bad icon colors.

Hi!

I've see two icons with wrong path. I don't sure where, if in the jss patch or in the css. I don't know why but the icon is installed but the frontend show the black icon. Those are the PBS icon and the ISO icon.

Alternate Rows no differentiated

Normally alternative grid rows (6.1.8) are between white/light grey, but with PVEDiscordDark that is gone.

No icons for templates

Templates do not have their own icon. They use the default icon with the white background. Installed via the installer script.

Templates with the bad looking white icons:

Add hover affect to tree list

Hello. If you check common proxmox theme - there is hover affect on containers and storages in tree view:

In this dark theme no that effect.

It would be nice to see hover affect on that items , because it is a little bit confused without it when you move cursor throught list.
Thanks!

Internet Connection required while connected to the Internet

I ran the script with python3.7 and it tells me to connect to the internet while the node is already connected

After upgrade of PVE the theme can't be installed again with the .sh

Hi,

with the python script everything works fine, but with the new .sh file I have the problem that after upgrading proxmox (which removes the theme) I can't install your theme anymore.

root: bash PVEDiscordDark.sh install
Theme already installed

But the page is still white.

Edit: If I uninstall it first then it works. It would be nice if you could insert it into the .sh file.

x.btn background color

Found another background color issue.

I tried to add the code for this myself, but I don't think I know enough about CSS/HTML to do so. I forked and updated the CSS, then tried to test the fix on my own installation, but I could not get the background color to change.

My attempt inserted the below at line 275:

.x-btn.x-unselectable.x-box-item.x-toolbar-item.x-btn-default-toolbar-small.x-btn-focus {
background-color:#401314;
}

The x-btn-focus class at the end is only visible when the button is focused, which only seems to occur after a dialogue window, produced by clicking the button, disappears.
I used the same background color as the recently fixed proxmox-invalid-row.

Usabillity bug

When selecting a VM on the left in Server View, without dark mode there is a nice background that shows what vm you are working on. With Dark mode installed, there seems to have been replaced with a blue border. The thing is that the border disappears when cliking in another frame.

See screenshot. When I click in red circle, the blue box goes away. The problem is that I was changing stuff on the wrong VM because of this. Without dark mode this would not have happened (just tested it) because the background stays.

Love this dark mode though! Hope this helps.

Datacenter>HA>Add button not working when theme enabled

Datacenter>HA>Add button not working when theme enabled. When disabled it works fine.

An Internet connection is required to install PVEDiscordDark

root@proxmox:~# python3 PVEDiscordDark.py

PVE 6.2-4 detected.

An Internet connection is required to install PVEDiscordDark.
Connect to the Internet and try again.
root@proxmox:~#

My proxmox is connected to the internet, and i still get this prompt

Request old version

Hello I am currently under the old version of proxmox and I would have needed your old version of ddinstall.sh but no way to make it work this one seeing that the repot does not exist any more possible to have a solution please

Changelog has white background for pending Updates.

Firstly, I wanted to say thanks for the work you've done here. It's being a true pleasure to use Proxmox without the blinding white backgrounds.

Below is a screenshot and some relevant information, let me know if you need any additional details:

• Proxmox Version: 6.2-11
• Last download of PVEDiscordDark: 09-20-2020
• Python Version: Python 3.7.3
• Screenshot of white background whenever you double-click on a pending update...

Missing VirtIO RNG

Proxmox recently added VirtIO RNG support seen in the Add menu on the Hardware page. This option does not show up with the theme installed.

Proxmox Backup Server support?

Now that PBS is considered stable with v1, is this theme support or will you consider creating a theme for PBS?

Theme disappears upon restart of Proxmox host

Theme was active before restart, afterwards not active. I ran the install command again and it exited "Theme already installed"

Is there anywhere in the UI I need to go to reactivate it? Otherwise is there a cli option to do so?

Blue color on console makes it impossible to read

Can you change that color ? I did the installation and it seem to be okay, but the blue lines are nearly impossible to read...

Replace icons for `Datacenter => Metric Server`

The Metric Server area has an add dropdown button with default PVE icons.

LXC "Network" tab icon not inheriting blurple color

The icon on the "Network" LXC tab is not inheriting the blurple color on hover/active

White stripe pve in updates

There is a white stripe in pve updates site.

Migrate paper airplane color?

Any chance we can change the migrate "paper airplane" color, it's awfully dark and hard to see?

6.2-4 support?

Missing top inner border when category selected in folder view

When Folder View is selected and you select Nodes for example, there are missing inner border as shown bellow.

Scrollbar is missing

Hello,

The horizontal scroll bar in the datacenter view for the nodes is missing, but is still able to be interacted with.

There might be other missing scrollbars, but this is the most obvious one as it is horizontal and doesn't work with the scroll wheel.

A video of the issue:
https://drive.google.com/file/d/1IhclhQJUomPehbqjumj2ZO1CocLQLTrN/view?usp=sharing

Regards.

dd_logo.png - wrong proportions

Hello,

It appears the dd_logo.png asset is stretched, unlike the original and its blurple counterpart.
I have recolored the original to ensure the real proportions were kept, you can use it of course:

Feel free to replace as-is, I don't want any credit since it took a second to notice the issue and another to recolor.

Have a nice day!

Invisible checkboxs

Hello!
I found at least 2 checkbox are visually hidden with dark theme: when you create VM on memory tab "Balloon" option and confirm tab "start after created"

incorrect Icons CPU and RAM with PVE 6.4.4.

I just updated to PVS 6.4.4. and installed the Theme and notice that the CPU and RAM icons are not correct.

Selected days of week are not visible

I just installed the darktheme and it's great! However, I noticed that with the theme enabled, there is no way to see which days of the week are enabled on the backup dialog, as seen here.

The same goes for which containers/VMs are selected in that same dialog.

Graphs are light themed

All the graphs on summary pages are still light themed.

Light themed graph on a dark themed page:

Tick boxes disappeared

Hi,

In Proxmox VE 6.2-15, installing the theme make all the tick boxes disappear (like firewall in a network interface or purge in the destroy screen).

Uninstalling with the script does not fix the problem.

Multi-select Dropdown can have better color differentiation

Hi I'm not sure if this is the correct way to post issues but was wondering if the coloring for multiselect drop-downs( example the content drop-down in storage menu) can be made to be more distinct. I find it a bit difficult to see the difference between what is selected and not selected.
Thanks and the theming is great BTW.

Main panel selected category highlight

The selection highlight of the categories on the main panel do not span across the entire row.

Replicated in both Chrome and Safari on MacOS.

Screenshot attached:

Support PBS (Proxmox backup server)

It`s wil be cool if script support PBS ^)

add proxmox 7.0 to supported versions

Howdy Weilbyte
proxmox 7.0 is out.

I upgrade my proxmox cluster from 6.4 to 7.0, and installed PVEDiscordDark after it.
the colors are the same but there is a warning when you first installed it

bash PVEDiscordDark.sh install
You might encounter issues because your version (7.0) is not matching currently supported versions (6.4 6.3 6.2 6.1).
If you do run into any issues on >newer< versions, please consider opening an issue at https://github.com/Weilbyte/PVEDiscordDark/issues.
✔ Backing up template file
✔ Downloading stylesheet
✔ Downloading patcher
✔ Applying changes to template file

thanks again for this great dark theme.

Redo installer in bash

Minimize issues that come up with varying Python installs, and some other changes

Smart Values have white background

I've tried to read the S.M.A.R.T values from my NVME / SAS Disks, but you can't read them because of the white background. Sata disks are working fine.

Syntax issue on line 45

Command issued: python3 PVEDiscordDark.py
Error received:

Proxmox version: 5.3-8

User group image problem

[Suggestion] Upstreaming changes

I think it might be worth investigating whether or not the devs at Proxmox are open to implementing native dark theme support on the basis of this repository.

Can you make an unattended version?

I would like one I could run via ansible or a script after applying an upgrade to proxmox. Maybe just like a -I install option?

BTW - love the new theme, looks amazing.

Rework icon coloring

Currently, icon recoloring is handled in a bad way. Many icons are styled white on their own, while a simple color: white to their shared parent class would do the exact same.

In short: remove useless styles, recolor parent and have children inherit color, clean mess.

Calendar are not dark moded

Hello, it seems that the calendar is not dark moded (in API token i found this)
And we can't see the 2020 on it too
I have the latest version of the dark mode

PBS - Proxmox Backup Server

Hello,
Sorry for maybe wrong channel, but I would like to thank you for your Great job on PVEDiscordDark theme 🥇
It works like a charm 👍
Is there any chance to see your python script adapted for PBS one day ? it would be wonderfull !

I really hope that your work will be adopted by proxmox team for further release

line-highlighting in task log color issue

I found an issue with the theme. I checked the CSS code but couldn't figure out where to actually update the error-line background.

Using the DarkReader Chrome extension makes it look like this, which is desirable.

I was hoping it could be added to the actual CSS theme though.

Thanks for the effort put into this! Night-owl sys-admin eyes like mine thank you.

Borders around toolbars

Is it possible to add borders around toolbars like in the picture bellow? Tables, charts, and buttons seem to float about (to me at least).