PVEDiscordDark icon indicating copy to clipboard operation
PVEDiscordDark copied to clipboard

Switch to making the color scheme selectable in proxmox 7.4

Open Happyrobot33 opened this issue 1 year ago • 9 comments

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

Happyrobot33 avatar Mar 23 '23 17:03 Happyrobot33

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?

DutchEllie avatar Mar 24 '23 06:03 DutchEllie

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

SophiaAtkinson avatar Mar 26 '23 10:03 SophiaAtkinson

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

Weilbyte avatar Mar 26 '23 10:03 Weilbyte

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 avatar May 16 '23 18:05 Happyrobot33

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

Happyrobot33 avatar May 16 '23 18:05 Happyrobot33

image

Happyrobot33 avatar May 16 '23 18:05 Happyrobot33

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 avatar May 16 '23 19:05 Happyrobot33

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

Happyrobot33 avatar May 17 '23 15:05 Happyrobot33

definable themes with fixed charts image

Happyrobot33 avatar May 17 '23 16:05 Happyrobot33