Dark Mode Toggle Implementation

[funketyme]

PR Summary

Adds a full light/dark theme toggle to CFDocs with persistence, OS preference support, and scoped dark-mode styling. Most notable change is switching CSS colors to custom properties.

What Changed

• theme-switcher.js

  • Adds a light/dark toggle
  • Persists selection in localStorage
  • Detects OS prefers-color-scheme
  • Applies theme via html[data-theme="..."]
  • Supports keyboard activation and accessibility attributes

• style.css

  • Converts key colors to CSS custom properties
  • Uses :root defaults for light mode
  • Uses @media (prefers-color-scheme: dark) for OS dark-mode defaults
  • Uses [data-theme="dark"] / [data-theme="light"] overrides for manual toggle
  • Overrides Bootstrap and prettify styles where necessary

• layout.cfm

  • Adds the theme toggle icon to the navbar
  • Loads the theme switcher script

Implementation notes

• Light mode remains the default appearance
• Dark mode is applied only when explicitly requested or when OS prefers dark
• Theme variables are used consistently across UI surfaces
• Manual theme selection takes precedence over OS preference
• Dark-mode styles are scoped to avoid changing light-mode behavior
• If user explicitly toggles dark/light mode and wants to revert to OS preference, clear localStorage through Dev Tools > Application > Clear Site Data

[funketyme]

Here's a screenshot of the dark mode implementation.