Dark Mode Switch Without Javascript

published: [nandalism home] (dark light)

Yes It Is Possible To Have a Dark/Light Mode Switch Without Javascript

See the dark/light links at the top of this page for proof. The trick is to have a sub-directory and switch to that for dark mode.

So is this trivially a case of having 2 copies of all pages in the sub-directory with different style settings? No! There is almost no duplication. The only duplicated file is blog.css. The other pages in the dark sub-directory are symbolic links to those in the main directory. Perforce, this means their contents are identical. html files use a relative path to get the blog.css so they pick up the local one (dark or light).

The dark/light mode links just link to the same file in the sub-directory (for dark mode) and in the main directory (for light mode). Since there is no way (I can find) for a page to statically reference itself in another path, this means some duplication work is required for pages other than index.html. Alternatively you can have dark/light mode always refer back to the index.html page, so that this code stays the same in every file.

The Code

The switch links

<a href="/soot">dark</a> <a href="/">light</a>

# annoyingly: this must be customized for every page
<a href="/soot/other.html">dark</a> <a href="/other.html">light</a>

The css is linked relatively in all html files.

<link rel="stylesheet" media="all" href="./blog.css"/>

Repetitive tasks such as creating the symlinks and the 2 versions of blog.css are handled using the awesome, automation framework sed, shell and make.

site built using mf technology