Dark/light mode toggle on the header bar #2
Loading…
Reference in New Issue
Block a user
No description provided.
Delete Branch "deadvey/javalsais-website:master"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
You'll want to test this, idk how to with that funky #include thingy.
naw, not JS, also dont wanna bloat it to much, might make the toggle text or an SVG. And it should just change CSS root variables,like the colorscheme and that....
You can do that without Javascript?
Not sure, I'm not willing to make it a post request as it is nginx, so idk if there's another way... in any case is very minimal, but I don't wanna have to bother about complex ui things, so I'll try to integrate this as minimalistically as possible
Nice.
naw, theres no need to close, I can merge it, I just wanna polish it a lil bit when I get some time
Oh alr, cool.
Seems like you can do it without css, it wouldn't have a button but can use the system choice
@media (prefers-color-scheme: dark) {
/* Dark theme styles go here /
}
@media (prefers-color-scheme: light) {
/ Light theme styles go here */
}
source: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
Gonna add this to my website actually
no manual override tho, gonna need either JS or cookies. Still, if I don't do cookies cuz too overkill for a nginx static website, worst case is having the same website style as now with JS disabled. It's pretty much 5 lines of JS anyways.
btw, gotta fix quotes with the custom gitea theme
Your website obviously, but I think @media would be fine for most people, you can also set it so it the person has 'no-preference' then that is the same as dark mode, so dark mode is default, only if the person activley choose light mode on their browser it makes it light (I think).
idk
Having said that, my website is loading the light version when my browser is set to dark, could be a mistake in my code though...
Set the dark mode without any media and put a light one after, some browser might not support the media thing and that will ensure dark as base and light as an "override".
Also, tor for example sends light mode to all websites to avoid fingerprinting, so there can be a browser setting or simply a typo in CSS, idk, check that.
:O
Checkout
From your project repository, check out a new branch and test the changes.