[Feature] Add dark mode 🌙 #178
Conversation
[WIP] Tailwind CDN is used here for development. Replaced all dark red colors with pastel alternatives. This commit also changes a few things in light mode: * The toggles are now green (Red is not a good option for `On` state). * Removed the double border from the `Clients` header. * Removed the bottom border/divider from the last table child.
* Tree shake `tailwind.min.css` to remove unused classes. * Minify the CSS to reduce size.
This prevents flashing static HTML elements (icons, modals) on reload.
This allows to: * Still default to `prefers-color-scheme`. * Set theme with a button when implemented. Script is inside `head` to avoid FOUC.
* Modals are properly centered. * Add padding on container sides. * Break info/name/buttons into blocks.
* Manipulate `<html>` directly because Vue does not bind it.
|
Love it! Very good job!!! |
This reverts commit 8b4f62f.
* Change `Created/Last seen at` to `Created/Last seen on`.
|
Love it. God bless you. The dev wouldn't do it. But man bless your heart @Teraskull |
|
Looks nice, but I’d prefer it if you keep the WireGuard color scheme instead of this neutral style. |
|
@WeeJeWel I know, but sorry, the wireguard scheme just couldn't play right with dark colors and contrast. |
|
I'm excited for this PR :) 🙏✌️ |
|
Any estimate on when this can be merged into the project for a release? I love it! |
|
Has this been pulled/merged yet? |
|
No, I think the color scheme looks very boring and misses all WireGuard branding :/ |
Can The branding be added? I think the color looks amazing, in my opinion. :) Would it be possible to have a switch in the web browser from original light to dark mode? :) 👍👍👍👍 |
|
@WeeJeWel I definitely understand the desire to the WireGuard branding, I think having personality in design is really valuable. Although I'm sure you'd agree accessibility and comfort are also really valuable and there's no reason you can't have both. What would it take for you to feel like the UI keeps the brand while also ensuring there's a high enough colour contrast in dark mode? For example say the dark red of the wireguard brand was used in the border of the central panel instead and a more neutral color was used for the switch "on"/"off" text inside the switch to indicate state. |
|
The wiregaurd android client gui seems to be made for accessibility and readability in dark mode. There's no branding colours, just the wiregaurd logo. |
|
When will it be merged ? |
|
I've added your dark mode pr to my non docker repo, added you to the credits for dark mode |
|
@WeeJeWel -- has this been merged yet? Looking forward to it |
|
No. I'm only going to reconsider when the color scheme is black-ish (not blue-ish) and WireGuard-red-ish. |
|
@WeeJeWel With respect, why not accept what many users are waiting for here? The point is that this theme does not blind me when I open the website. Seems like you are holding off a good thing for perfection. It's been half a year; I think it's time to stop nitpicking and merge. |
|
I would agree with @rcdailey |
Why? All Black and red is a eye sore. Terrible color choice. |
|
Because it's my project. If you want changes, fork it. It's as simple as that guys, this is how open source works. |
|
You might as well just close the PR if it's never going to happen. |
|
And to be honest, the reason we don't want to fork is because we really like the work YOU did. 👍 |
You might mean: you want me to maintain this change ;-) Any fork already contains the work I did :) |
|
@WeeJeWel - yes ;) Can you merge it and make it an option at least? With a switch or something in the config? |
|
Not until the design looks better by keeping the WireGuard branding in place. |
I've got to agree with @WeeJeWel on this one. Besides, not much effort to change the colors for the PR author I imagine, most of the work is already done here. |
|
I'd agree as well, a dark-gray and WireGuard red style would fit much better |
|
At this point, I'll take anything. I can't stand the white page anymore. |
|
Any news to this pr? |
|
I was just wondering the same thing |
|
The plugin author already mentioned his requirements. |
|
Ok, I guess it's time for me to reply too. Sorry everyone, but I will not change the color scheme. I respect Emile's design view, and his choice to not merge this PR, but I also expect my views to be respected, and him saying some color scheme is "better" because it has Wireguard colors, is very subjective. Anyways, I am not going to change the colors since that is my design view, which I, and many others that upvoted this PR, like. It is absolutely okay to not come to a design agreement. It is also okay to not accept changes if you don't like them. But remember that it goes both ways. I do not like the Wireguard colors contrasting with the dark theme. I understand Emile not wanting to maintain the changes. Unfortunately, I also don't have time or motivation to maintain a fork. So if anyone wants to make a fork with my changes, they're welcome. I hope you understand, and thank you for the support. |
|
I wish @WeeJeWel would accept this, it's super nice |
This PR contains the following changes:
dark:class in Tailwind 3.tailwind.min.cssto only include used classes, which reduces the size from2859KBto just20KB.This PR also changes a few things in light mode:
Onstate).Clientsheader.Screenshots:
Before vs After (light/dark):
All elements should be properly styled in dark mode, including the Update banner. If I missed anything, let me know. (Closes #163)