Dark Mode Switch Without Javascript

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 secret is the soot/ directory.
• The only duplicate file is blog.css and soot/blog.css (generated from _blog.css with sed)
• The soot/ directory contains symlinks back to the normal html files. The html files remain identical in both dirs.
• The blog.css file is linked relatively with href="./blog.css" so the file will pick up the css from the current directory (dark or light).
• (no templating)

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

index.html
<a href="/soot">dark</a> <a href="/">light</a>

# annoyingly: this must be customized for every page
other.html
<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.