add light/dark theme toggle

[hawkeye116477]

Feature Request

Can you make dark version of page and add switch for dark/light version of page? Value should be saved somewhere (local storage/cookies) when user switch to dark/light mode of course.

[collinbarrett]

lol. Probably super low priority, but could be cool. I love dark modes of apps. Not sure I would personally spend any time implementing in the near future, but if any css guru wants to submit a PR, it would definitely be welcomed.

[hawkeye116477]

@collinbarrett I don't know where it should go, but maybe something like this.

FilterListsDark.css

setDarkLightMode.js

and example css for switcher button:

#switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#switcher li {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 15px 15px 0;
    border-radius: 30px;
    border: 3px solid black;
    background: black;
}

and example html:

<ul id="switcher">
    <li id="darkLightButton" title="Dark / light mode"></li>
</ul>

Almost the same thing I done on https://polishannoyancefilters.netlify.com/ :smile: .

[collinbarrett]

Ah, ok, very cool. I'll play around with that.

[elypter]

i wished browsers had a way to tell websites that they want to operate in darkmode

[collinbarrett]

Here's a generic tool to enable this on any site if anyone wants it: https://darkreader.org/

Still may add to FilterLists natively at some point, but super low priority. If somebody wants to submit a PR, I'd happily accept it, though.

[hawkeye116477]

I recently also uploaded my style to https://userstyles.org/styles/164059/filterlist-s-dark-mode, so it can be used with Stylus :smile:.

[collinbarrett]

https://hub.filterlists.com/t/dark-mode-for-filterlists/51

Definitely would be great to get this built right into the site... I'll look into that when I can.

[collinbarrett]

AntD just released v4 which has native dark theme. Once I resolve breaking API changes, we should be able to enable.

[collinbarrett]

WIP. needs some cleanup before going to production. but, dark theme by default?

[collinbarrett]

Got one piece of feedback that "Your completely black theme pushes towards depression, it does not breathe happiness, nor joy."

I agree that not everybody will probably like the dark theme. I am personally a big fan of dark themes as they are easier on my eyes when I spend too many hours looking at screens.

But, if most prefer light theme, I'm open to reverting.

Ideally, we'd have a toggle that allows users to pick. But, I'm not sure how to implement that...

[hawkeye116477]

Ideally, we'd have a toggle that allows users to pick. But, I'm not sure how to implement that.

It's easy. You can use script like https://github.com/coliff/dark-mode-switch for that or little modified version to additionally match OS theme(checks if prefers-color-scheme is set as dark) or my old solution.

[Voltairine-de-Cleyre]

If you want to implement this in a way that will change to light / dark depending on OS/browser settings, use a media query @media (prefers-color-scheme: dark) that uses your dark theme. You'll need a light theme as well, but most of the code from the light theme can be used for the dark theme. You can also just change a few properties for the dark theme (font color & background color, e.g.).