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/ 😄 .

[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 😄.