blog-template icon indicating copy to clipboard operation
blog-template copied to clipboard

Published 20 hours ago • verified publisher icon elementary

Feat #6 night mode toggler

Open moshenskyDV opened this issue 5 years ago • 7 comments

Feature #6

Solution: Added JS function and listener to save and handle current state in localStorage. Added new scss file with night mode styles (wrapped into .night-mode).

moshenskyDV avatar Oct 06 '19 20:10 moshenskyDV

I've done point 2 and point 4 (mixins). About prefers-color-scheme - we should discuss, how to figure it out. Right now, if user prefers dark scheme - anyway dark style will be used. There is couple of options:

  1. Remove prefers-color-scheme from styles, detect it by JS and apply night-mode class. Disadvantages: when JS disabled - night mode won't be applied (we can figure it out by <noscript> actually, but it makes code more complicated. And one more disadvantage - we will have short "flashlight" on page load (before JS is load).
  2. Just remove button when night mode enabled (fastest way, but may be not user friendly). If user already configured his browser to dark mode - he want dark site I think (just as option).

About 3 - what element, on your opinion will be semantic correct? Maybe <button type="button></button>?

moshenskyDV avatar Oct 07 '19 18:10 moshenskyDV

We should definitely not be setting the page style in JS when CSS is available. JS just needs to know what state the page is in to override if the option is changed, not set it initially.

Personally I would use a checkbox styled as a toggle switch.

lewisgoddard avatar Oct 07 '19 22:10 lewisgoddard

JS just needs to know what state the page is in to override if the option is changed, not set it initially.

window.matchMedia("(prefers-color-scheme: dark)").matches will tell if the user prefers dark theme, which can be the initial state.

voldyman avatar Oct 07 '19 23:10 voldyman

Ok, I've added mirror mixins to light mode. It works without JS and with JS styles should overlap correctly. Check it please.

moshenskyDV avatar Oct 08 '19 19:10 moshenskyDV

Notify me please, if all is ok (I'm going to do rebase with squash).

moshenskyDV avatar Oct 11 '19 21:10 moshenskyDV

My initial thought is that there is a lot of styling that's been pulled out into the mixins that is going to be hard to keep track of. I think keeping the components' styling in their original file would be more maintainable.

cassidyjames avatar Oct 22 '19 20:10 cassidyjames

@danrabbit Has conflicts and no recent activity. Does this need closing or converting to draft? I do not have the necessary rights.

jeremypw avatar Apr 28 '21 18:04 jeremypw