Weilbyte / PVEDiscordDark

A Discord-like dark theme for the Proxmox Web UI.
MIT License
2.54k stars 240 forks source link

Switch to making the color scheme selectable in proxmox 7.4 #159

Open Happyrobot33 opened 1 year ago

Happyrobot33 commented 1 year ago

With 7.4 being out, a integrated dark theme has been introduced. I think itd be nice to keep this repo relevant by switching over to making this discord coloration a selectable option like the light and dark mode is now

DutchEllie commented 1 year ago

This also only has a dark theme, but Gruvbox, Nord and other well-known colorschemes are also very cool! Maybe we can get those in here too?

SophiaAtkinson commented 1 year ago

I'm not too fond of the new built-in dark mode, colors are too harsh on the eyes

Weilbyte commented 1 year ago

Going to have to look more into this, but it would have to be a separate project.

Happyrobot33 commented 1 year ago

initial research into those shows that the theme map is hardcoded. In order to change the list, theme_map in /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js needs to be edited, and the theme needs to be placed in /usr/share/javascript/proxmox-widget-toolkit/themes. The proper format for css files there is theme-{THEME NAME}.css

the theme name is all that needs to be added to the theme_map

im going to look into how feasible it is to get a working version of a patcher up and running, shouldnt be that difficult

Happyrobot33 commented 1 year ago

the existing PVEDiscordDark.css file seems to work, it just needs some tweaks to support the new stylable components like graphs

Happyrobot33 commented 1 year ago

image

Happyrobot33 commented 1 year ago

built-in dark mode does this to get the dark version of the proxmox logo


img[id^="proxmoxlogo-"][id$="-img"] {
    filter: invert(1) hue-rotate(180deg)
}
Happyrobot33 commented 1 year ago

for anyone interested I have a extremely basic working version here that I am iterating on https://github.com/Happyrobot33/PVEThemes

Happyrobot33 commented 1 year ago

definable themes with fixed charts image