Skip to content

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

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

aaronpk merged 1 commit into
aaronpk:mainfrom
O2sa:style/dark-theme

Conversation

@O2sa

@O2sa O2sa commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Overview

This PR implements full Dark & Light Mode support across oauth.net, enabling users to switch between themes manually while respecting their system OS color scheme by default.

What's Changed

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

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

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

  • Added a lightweight inline script in <head> that reads localStorage.getItem('theme') or window.matchMedia('(prefers-color-scheme: dark)') to set data-theme immediately before DOM paint (eliminates Flash of Unstyled Content / 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 choice in localStorage.
  • Added listener for OS prefers-color-scheme changes when no manual override is active.

4. Documentation (REDESIGN.md)

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

@aaronpk

aaronpk commented Sep 1, 2026

Copy link
Copy Markdown
Owner

Can you please send this PR again but also increment the version number for the css link:

https://github.com/aaronpk/oauth.net/blob/main/includes/_header.php#L16

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