Today is election day in the United States, and if you’re eligible to vote and have already done so, thank you. While we await the results over the next several days, here’s something to help pass the time, particularly if you use Org mode HTML export in Emacs.

As with many tools that export HTML, Org mode leaves most aesthetic decisions like CSS layout and typography to the user to define. Org mode’s default HTML export output is serviceable, but why settle for that? In particular, my expectations for HTML export in 2026 are this:

• Responsive layout for comfortable viewing on both mobile and desktop displays.
• Support OS appearance changes (light/dark mode).

CSS has long supported both of the above with media queries. More recently, CSS has a light-dark() function for handling OS appearance changes.

Org mode has numerous ways to customize how CSS is used in export (see org#CSS support). For my purposes, setting the customizable variable org-html-head-extra serves my needs as it will be the default behavior for exporting Org to HTML. For any special cases, I can locally override that variable.

The Elisp I use in my Emacs initialization file is as follows:

1
2
3

(setopt org-html-head-extra (with-temp-buffer
                              (insert-file-contents "~/emacs/cclisp/cc-org-html.css")
                              (format "<style>\n%s\n</style>" (buffer-string))))

Using the function insert-file-contents lets me specify the CSS in a separate file. For the above example, I’ve defined my CSS in the file cc-org-html.css. Readers are welcome to use or modify cc-org-html.css to their satisfaction.

Adaptive Dark Mode

Just as I was finalizing this post, I saw this WebKit post (Introducing Adaptive Dark Mode | WebKit) pop up in my feed today: apparently Safari 27.3 beta includes support to automatically adapt a website that does not support OS appearance changes. This is an early and browser-specific feature, so I still think specifying light and dark behavior is worthwhile, especially since the light-dark() function makes this so easy to do and is widespread.

emacs   org mode   web