Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dark mode #678

Open
codexnakamoto opened this issue May 15, 2023 · 8 comments
Open

dark mode #678

codexnakamoto opened this issue May 15, 2023 · 8 comments
Labels
enhancement New feature or request

Comments

@codexnakamoto
Copy link

hi @glozow

would you accept a PR that enables dark mode for users whose operating system indicates prefers-color-scheme:dark ?

i'd be happy to take a look at that

@codexnakamoto
Copy link
Author

oh wow i just saw the little lightbulb, it's really difficult to spot. i will investigate having it default correctly if prefers-color-scheme is dark

@stickies-v
Copy link
Contributor

If supporting prefers-color-scheme is not a huge overhaul, I'd definitely welcome such a PR. I'm not too keen on adding a button to toggle dark mode (I can't seem to see this lightbulb you mention? Would you mind sharing a screenshot? Is it a browser setting?) but integrating with system preferences seems like a great UI improvement.

Thank you for looking into this!

@codexnakamoto
Copy link
Author

it's not a huge overhaul, just a slight improvement to the way it already functions.

I can't seem to see this lightbulb you mention

lol yep, the only way i found it was by first looking in the code. it's slightly easier to find on mobile - but it could really use a slight margin so it's easier to find

very top right - and it gets hidden behind the scrollbar

image

@codexnakamoto
Copy link
Author

codexnakamoto commented May 16, 2023

current functionality:

  • if the lightbulb is clicked, the dark mode hidden checkbox input becomes checked, "dark" is stored in the window.localstorage, and .site-container css variables use the dark values in all.sass
  • when the site is loaded, the window.localstorage is checked for the "dark" value, and if found, applies the dark mode

proposed functionality:

  • use window.matchmedia and an eventlistener to first establish what the user's prefers-color-scheme is, if found, use that preference
  • if prefers-color-scheme is not found, check for the localstorage item and use that
  • leave the lightbulb functionality working as is (maybe giving it more margin so it's easier to spot), but with the caveat that prefers-color-scheme will take preference when returning to the site

sound good?

@stickies-v
Copy link
Contributor

That sounds like a good approach to me, yeah. I wouldn't even be opposed to removing the lightbulb icon altogether, but maybe that's just me, no need to rush that.

I did notice that in dark mode the rss feed and twitter icons become invisible. Is that something you're able to have a look at too, perhaps?

@glozow
Copy link
Contributor

glozow commented May 23, 2023

Seems reasonable to me, though hoping rss feed and twitter icons can stay visible. Feel free to open a PR!

@codexnakamoto
Copy link
Author

cool, working on it!

@glozow glozow added the enhancement New feature or request label Jun 30, 2023
@glozow
Copy link
Contributor

glozow commented Nov 29, 2023

Are you still working on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants