Weilbyte / PVEDiscordDark

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

new proxmox version update undid dark theme #142

Open wommy opened 2 years ago

wommy commented 2 years ago

i like their new disabled VM transparency, very clear which are running / not running

Weilbyte commented 2 years ago

Hi, I have not upgraded my servers to the new version yet, could you provide a screenshot of what you mean? There will be some time before I can be able to look at what exactly is changed and what I need to add.

supersnellehenk commented 1 year ago

That person probably means this: https://imgur.com/a/SHV81jl

Weilbyte commented 1 year ago

I see, thanks. There are a bunch of things I would also like to fix. Will attempt to catch up to the latest release soon (probably either this weekend or the next).

djraw commented 1 year ago

Today I tried some things and found what needs to be done to get grey icons for stopped VMs, lxc, unavailable storage and changes to template icons. @Weilbyte : as you wrote that you want to fix other things, I didn't add those changes to my fork and didn't add a pull request. Also I did this using Firefox dev mode and the resulting css is not compressed.. anyway, here you go (file PVEDiscordDark.css, resulting in dd_style.css)

EDIT: I changed the grey to be a lttle lighter, this also addresses https://github.com/Weilbyte/PVEDiscordDark/issues/140 now.


ADD

.fa-fw.x-grid-icon-custom.fa.fa-cube.stopped { color:#666 }

.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-desktop.stopped { color:#666 !important }

.fa-fw.x-grid-icon-custom.fa.fa-desktop.stopped { color:#666 }

.fa-fw.x-grid-icon-custom.fa.fa-database.available { color:#526DD1 }

.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-tags { color:#666 !important } .x-tree-icon.x-tree-icon-custom.fa-tags { color:#666 !important }

.fa-fw.x-grid-icon-custom.fa.fa-tags { color:#666 }


CHANGE

.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-cube { color:#666 !important }

.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-desktop { color:#666 !important }

.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-file-o:after { color:#666; background:transparent; text-shadow:none }

.fa-fw.x-grid-icon-custom.fa.fa-file-o:after { color:#666; background:transparent; text-shadow:none }

.fa-fw.x-grid-icon-custom.fa.fa-database { color:#666 }

Result: __change-on-off-2022-09-28 21-33-30_Window

Weilbyte commented 1 year ago

Thanks, will get these changes in soon.

johntdavis84 commented 1 year ago

Thanks to you both for working on this.

Once I realized I was back in light mode, I figured the last update had killed the theme and decided to remove it to avoid any issues.

The uninstall command says there's no theme installed.

#] bash PVEDiscordDark.sh uninstall
Theme not installed

Will I need to do anything to clean out the old theme files before re-running the script when the theme is updated?

Thanks!

Weilbyte commented 1 year ago

@johntdavis84 clearing your browsers cache should remove it.

djraw commented 1 year ago

@johntdavis84 whenever you install an update of the „pve-manager“ package, the theme will be overwritten by the default from proxmox. Then you need to re-install the theme everytime. So you don’t need to uninstall anything first, as it’s already overwritten.

Edit: I forgot, either a reboot or a restart of pve-proxy might be necessary for theme changes to show up (I wrote a script for all that on my pve) $ systemctl restart pve-proxy

@Weilbyte - perhaps this should be mentioned in the readme or as a wiki entry.

Weilbyte commented 1 year ago

@djraw only a browser cache clear should be necessary.

djraw commented 1 year ago

@djraw only a browser cache clear should be necessary.

Yes, I forgot my script also updates certificates which makes the restart of pve-proxy necessary.

But anyway I'm right about the updates to pve-manager, after that a reinstall of the theme is needed. And that might be added to the readme.

Weilbyte commented 1 year ago

@wommy @johntdavis84 @djraw reinstalling the theme should fetch these latest changes. Let me know if it works.

wommy commented 1 year ago

looks great! so glad i complained :rofl: :rofl: :rofl:

didnt know it was all sass, next time i can totally contrib

Weilbyte commented 1 year ago

I think it looks ok as well but my only concern is how it will look on older versions, which I will attempt to test soon.

And yeah, it's all sass; it's still spaghetti but at least more manageable than if it was pure css 😓

wommy commented 1 year ago

since css custom properties, its been much more managable

i could help with a migration i noticed a bunch of little small things after peeking for a minute

djraw commented 1 year ago

@wommy @johntdavis84 @djraw reinstalling the theme should fetch these latest changes. Let me know if it works.

Works perfect for me, thanks @Weilbyte :)

Edit a few hours later: I just realized that the root "Resource Pool" fa-tags is still darker than the tags below it. @Weilbyte You forgot this addition to get it lighter (as asked for in https://github.com/Weilbyte/PVEDiscordDark/issues/140): .x-tree-icon.x-tree-icon-custom.fa-tags { color:#666 !important } 2022-10-06 22-24-52_Window

This time I went ahead and created the PR https://github.com/Weilbyte/PVEDiscordDark/pull/146

Weilbyte commented 1 year ago

@djraw I will look into it soon. Added a comment on your PR.