Skip to content

feat: Implement Dark and Light mode support with topbar toggle and auto-detection - #400

Merged
aaronpk merged 2 commits into
aaronpk:mainfrom
O2sa:style/dark-theme
Sep 1, 2026
Merged

aaronpk merged 2 commits into
aaronpk:mainfrom
O2sa:style/dark-theme

Conversation

@O2sa

@O2sa O2sa commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Overview

This PR adds full Dark & Light Mode support across oauth.net, allowing users to seamlessly switch themes via a topbar button while respecting system OS preferences by default.

What's Changed

1. Theme Variables & Styling (public/stylesheets/style.css)

  • Extended the CSS custom properties system with [data-theme="dark"] and @media (prefers-color-scheme: dark):
    • Deep slate background (#0b1120) and surface container (#151f32) palettes.
    • High-contrast text colors (#e2e8f0 / #94a3b8) and accessible link/heading accents (#93c5fd / #38bdf8).
    • Dark mode support for inline code, RFC badges (.rfc-badge), spec status pills, decision tree cards, topic links, and table borders.
    • Added styling and transitions for the .theme-toggle button.

2. Zero-Flicker Script, Version Bump & Header Switcher (includes/_header.php)

  • Incremented style.css cache-busting version to ?9.
  • Added a render-blocking inline script in <head> that reads localStorage.getItem('theme') or window.matchMedia('(prefers-color-scheme: dark)') to set data-theme immediately before DOM paint (preventing FOUC).
  • Added an accessible Sun ☀️ / Moon 🌙 SVG toggle button inside .site-topbar.

3. Event Handling & OS Synchronization (includes/_footer.php)

  • Added JavaScript event listener for #theme-toggle to cycle between light and dark modes and persist the user's choice in localStorage.
  • Added listener for OS prefers-color-scheme changes when no manual override is stored.

4. Documentation (REDESIGN.md)

  • Updated REDESIGN.md to move "Dark mode" from "Future Considerations" to "Completed".

@aaronpk
aaronpk merged commit 818ffe3 into aaronpk:main Sep 1, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants