published: [nandalism home] (dark light)
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
- The soot/ directory contains symlinks back to the normal html files. The html files remain identical in both dirs.
blog.cssfile 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
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 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>
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.