More CSS features: light-dark()

Tags:

Providing a dark mode is good form nowadays. I like doing/having that too.

Light mode

Usually, a dark mode is done by switching to a second CSS sheet or having a CSS selector switching between a bright and a dark colour set using JS or the browser preferences. This can lead to some rule repetition:

.light-theme textarea {
    color: black;
    background-color: #8dfece;
}

.dark-theme textarea {
    color: #62b190;
    background-color: black;
}

Dark mode

CSS also has a function to do this color switching on an element without needing to repeat the declaration in a second rule: light-dark(color1, color2) will return color1 if the light environment is preferred by the user and color2 if the dark environment is preferred.

textarea {
    color: light-dark( black, black );
    background-color: light-dark( #8dfece, #62b190 );
}

You still might want to give the user an option to set their preference only for your website, storing that in a cookie. Bootstrap 5 itself has a fairly thorough, live-switching setup for that, but it's also somewhat long. There also is a short JS snippet on Github which is mildly simpler to integrate, but which only does the switching on page load or toggling of the user selection, and not when the user switches their browsers preference.

My Firefox redirects

Tags:

I run Firefox with Javascript selectively enabled thanks to the uMatrix AddOn. Some sites need some adjustments or really want Javascript, but instead of enabling Javascript for these sites, I often rewrite the URLs automatically, using the Redirector AddOn. These are my redirects:

Use old.reddit.com instead of www.reddit.com

Even though I don't really frequent Reddit.com, for some communities or problems, it is a good source of information. This entry rewrites all URLs that point to www.reddit.com to old.reddit.com, which doesn't need Javascript and loads all content at once:

 Redirect:

    https://www.reddit.com/(comments|r)/(.*)

  to:

    https://old.reddit.com/$1/$2

Redirector snippet export

    {
        "description": "Use old reddit comments",
        "exampleUrl": "https://www.reddit.com/comments/o9xp15",
        "exampleResult": "https://old.reddit.com/comments/o9xp15",
        "error": null,
        "includePattern": "https://www.reddit.com/(comments|r)/(.*)",
        "excludePattern": "",
        "patternDesc": "",
        "redirectUrl": "https://old.reddit.com/$1/$2",
        "patternType": "R",
        "processMatches": "noProcessing",
        "disabled": false,
        "grouped": false,
        "appliesTo": [
            "main_frame"
        ]
    },

Youtube fullscreen, without comments

Instead of seeing the horror that is YouTube consent popups and YouTube viewer comments, I run the YouTube videos completely filling the browser window by going to the /embed/ link that allows one to embed a YouTube video in another webpage.

Redirect:

  https://www.youtube.com/watch\?(?:feature=youtu\.be&)?v=([-\w]+)&(list=[-\w]+)
to:

  https://www.youtube.com/embed/?listType=playlist&$2

Redirector snippet export

    {
        "description": "Youtube Embed Playlist / Fullscreen only",
        "exampleUrl": "https://www.youtube.com/watch?v=PgWCLuQuajo&list=OLAK5uy_nKPBfR_eEc8qYWnkE3j7ijH23L_ULyiZY",
        "exampleResult": "https://www.youtube.com/embed/?listType=playlist&list=OLAK5uy_nKPBfR_eEc8qYWnkE3j7ijH23L_ULyiZY",
        "error": null,
        "includePattern": "https://www.youtube.com/watch\\?(?:feature=youtu\\.be&)?v=([-\\w]+)&(list=[-\\w]+)",
        "excludePattern": "",
        "patternDesc": "",
        "redirectUrl": "https://www.youtube.com/embed/?listType=playlist&$2",
        "patternType": "R",
        "processMatches": "noProcessing",
        "disabled": false,
        "grouped": false,
        "appliesTo": [
            "main_frame"
        ]
    },
    {
        "description": "Youtube-NoCookie Embed / Fullscreen only",
        "exampleUrl": "https://www.youtube-nocookie.com/watch?v=Wisthc226SU",
        "exampleResult": "https://www.youtube.com/embed/Wisthc226SU",
        "error": null,
        "includePattern": "https://(?:www|m).youtube(?:-nocookie)?.com/watch\\?(?:feature=youtu\\.be&)?v=([-\\w]+)",
        "excludePattern": "",
        "patternDesc": "",
        "redirectUrl": "https://www.youtube.com/embed/$1",
        "patternType": "R",
        "processMatches": "noProcessing",
        "disabled": false,
        "grouped": false,
        "appliesTo": [
            "main_frame"
        ]
    },

Use Nitter instance instead of Twitter

From time to time some supposedly interesting information only exists as a 140 character entry on Twitter. Twitter really wants Javascript but there are mirror sites running the Nitter software. This rewrites Twitter URLs to use one (of many) Nitter instances:

Redirect:

 https://(mobile.)?twitter.com/(.+)

to:

 https://nitter.namazso.eu/$2

Redirector snippet export

    {
        "description": "Twitter to Nitter (nitter.pussthecat.org)",
        "exampleUrl": "https://mobile.twitter.com/richardf/status/1314481244344852480?s=20",
        "exampleResult": "https://nitter.namazso.eu/richardf/status/1314481244344852480?s=20",
        "error": null,
        "includePattern": "https://(mobile.)?twitter.com/(.+)",
        "excludePattern": "",
        "patternDesc": "",
        "redirectUrl": "https://nitter.namazso.eu/$2",
        "patternType": "R",
        "processMatches": "noProcessing",
        "disabled": false,
        "grouped": false,
        "appliesTo": [
            "main_frame"
        ]
    }

Feeds