htmlcssfirefox

Make stylesheet selection permanent


I wrote a CGI script that offers two CSS style sheets: A "normal" one and a "dark mode" one.

In Firefox I can select the "Dark Mode" style sheet from the "View" menu (and it works), but when I submit a form, the next page is still displayed in normal style.

So can I tell Firefox to remember the style selection I had made, or can the CGI do the trick (without adding an input field to select (and remember) the desired style)?

More Details

As the question seems to leave some details open (which I thought were obvious), here are some more details:

I had mentioned that the HTML is created by a CGI script to point out that the script might react to some headers if required.

Currently the HTML header is like this:

<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">
<head>
<title>...</title>
<link href="/favicon.ico" rel="icon" />
<link href="/normal.css" rel="stylesheet" title="Normaler Mode" type="text/css" />
<link alternate="1" href="/darkmode.css" rel="alternate stylesheet" title="Dark Mode" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

So I assumed that offering multiple styles and selecting one of those in Firefox would keep that style for other pages loaded. In fact the CGI also creates a form like <form method="get" action="/search/submit" enctype="multipart/form-data"> where the same CGI script is called that creates the form (but under a different name to make form submission work).


Solution

  • I found prefers-color-scheme explaining how to use media selection to configure dark mode using Media Queries Level 5. Also Styling based on color schemes.

    When using something like

    @media screen {
        :root {
            color-scheme: light dark;
        }
    }
    @media screen and (prefers-color-scheme: dark) {
        * { background-color: black; color: white }
    }
    

    I could use the tools for web developers to switch between bright and dark theme, and it would work even when changing pages. However I could not find how a normal user could switch between bright and dark mode easily (not using the themes in the settings menu).