Hacker News Reader

Comment by kevincox | Hacker News Reader

You shouldn't be using a checkbox for dark mode (at least not as the main toggle). You should be using the css prefers-color-scheme media query so that you use the users default with no required interaction and no bright flash of white.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

View on HN

Agreed, but as a user sometimes I turn it off because an article doesn’t work well with it. So the default should be user’s global preference but I want local control

So you would like a website to implement a checkbox to toggle dark mode, in case it doesn't implement dark mode correctly?

That doesn't make any sense.

I think he would rather have a checkbox to disable dark mode in case a specific website. So he don't have to switch his system-wide preference in order to browse a single badly designed website.

Exactly

Sounds like something that would be better solved by a browser extension than having every website with a dark mode also implement a toggle.

I think the point of checkbox is fine as long as they default to prefers-color-scheme, because there are times when it is nice to be able to switch on a site without having to change your OS color scheme.

I agree, that is what I meant with the "main" source. It would also be cool if browsers could just add a color-scheme toggle in their UI. That way it can be available for all websites without needing to look around for the in-site toggle. (Firefox has this in the dev tools but that isn't exactly user-friendly).

I agree that it'd be cool for browsers to add a per-site color-scheme toggle in the UI.

While it does lack in many other areas, Safari on MacOS has a wonderful interface for per-site default behavior for: automatically using reader-mode, allowing permissions (microphone, etc), setting page zoom, etc. This would be the perfect place for per-site overrides of the system light/dark mode.

I use both. I have a toggleable button for using the "other" color scheme, but it uses by default the preferred color scheme exposed by the browser.

> You should be using the css prefers-color-scheme media query

Problem is, this doesn't always work;

https://forum.manjaro.org/t/google-chrome-not-in-dark-mode/8... https://forum.manjaro.org/t/why-media-query-always-choosing-...

Editing config or .desktop files to work around such issues may be an option for experienced user, but even speaking from such a users perspective, I would much prefer a webpage to offer me a simple button or checkbox.

If you want to argue with "this doesn't always work", I'd assume that the caniuse statistics[0] are more relevant than an implementation bug that affects less than 1% of browser users.

[0]: https://caniuse.com/prefers-color-scheme

Did you read these links?

The first is a complaint about a browser context menu not the web page and the second is about a GNOME theme which obviously has no affect on CSS in browsers.

I uses a tristate flag: system, light, and dark modes.

Too bad that FF with enhanced tracking protection on reports that the user wants a light color scheme instead of reporting no preference.

HTML needs to really catch up already. Who tf uses checkboxes in 2021? Why isn't there an <input type="slide_toggle"> already that uses the native UI?

Instead of a shitty div hell to construct a slide toggle, which becomes super laggy if you have to have a scrollable list of 1000 of them.

But like, it's 2022. Anyway, I've never seen any suggestion that checkboxes are obsolete. They seem easier to use than slide toggles to me. It's easier to tell if they're "on". It's harder for me to remember which direction or color indicates on in a slide. But with a checkbox, it's dead-simple. Simple solution to shitty slide_toggle divs is just use input type=checkbox, since they work perfectly.

How about getting tri-state checkboxes?

What does that even mean? Just use radio buttons and be explicit.

checkboxes do have a third 'indeterminate' state[0], but you can't activate it manually. it's basically 'null' rather than an affirmative 'true'/'false'.

[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/:indetermin...

I won't argue against the value of a native slide toggle, but they have different semantics compared to a checkbox, in my opinion, and you shouldn't use a slide everywhere you had used a checkbox.

Slide toggles would be completely bizarre on a survey, for example. "ah yes I'll just turn on 'member of the armed forces'"

So provide it as an option damnit! I wasn't suggesting getting rid of checkboxes not sure why everyone makes that assumption

    <input type="checkbox" ...>

    <input type="slide_toggle" ...>

    <input type="range" min="0" max="1000" step="5">

    <input type="color">

    ....

You can have whatever you want, just saying, make modern UI native components accessible via HTML without some CPU-intensive div-react-polyfill-javascript fluff. It's ridiculous that if you need to implement a slide toggle, which is available as a native component, that you try to emulate the shit out of it with some images and CSS and javascript and more div hell for the sliding animation and then even more div hell for the little radiating animation instead of just dropping in the native widget which will do all of that and at way better fps than your emulated version.

Instead of all that hell; just use a checkbox.

Pecking accurately at checkboxes while trying to keep your balance on a commuter train is not fun. Slide toggles are much easier to hit accurately. They also are visually easier to understand as an on-off switch. Often people tend to go for design anti-patterns with checkboxes like

[X] Mute notifications

[X] Large fonts

Whereas with slide toggles the on-off semantics are much more obvious and design patterns tend to get forced to a better, simplified pattern: