Skip to content

feat: create a functional dark mode#1338

Open
a2937 wants to merge 4 commits intomainfrom
feat/create-dark-mode
Open

feat: create a functional dark mode#1338
a2937 wants to merge 4 commits intomainfrom
feat/create-dark-mode

Conversation

@a2937
Copy link
Member

@a2937 a2937 commented Dec 19, 2025

Checklist:

Closes #828

Okay it seems to be adapting properly to the freeCodeCamp theme.

@a2937 a2937 requested a review from a team as a code owner December 19, 2025 19:12
@a2937
Copy link
Member Author

a2937 commented Jan 12, 2026

Oh the lock file. Oops

@raisedadead
Copy link
Member

Looks great. I think we need to figure out a few kinks which can probably be handled while after PR lands?

Hey @scissorsneedfoodtoo 👋 !

How to handle this

Default image is has sam bd the publication bg image image

@raisedadead raisedadead force-pushed the feat/create-dark-mode branch from 6c6e452 to 17f21aa Compare March 7, 2026 08:22
@raisedadead raisedadead force-pushed the feat/create-dark-mode branch from 17f21aa to c299974 Compare March 7, 2026 08:32
@raisedadead
Copy link
Member

I updated this PR with several fixes and updates to polish it up. Mainly addressed:

  • Adds dark/light theme toggle with system preference detection and localStorage persistence
  • No flash of unstyled content (FOUC) — theme applied before first paint
  • Proper Prism.js syntax highlighting with separate light/dark themes from CDN
  • Toggle is an accessible with aria-pressed
  • Background hierarchy: page gets --secondary-background, elevated elements (cards, code blocks) get --primary-background
  • Bunch of new tests.
Some screenshots: image image image image image

@a2937
Copy link
Member Author

a2937 commented Mar 7, 2026

Thank you very much for your assistance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

freecodecamp.org/news/ dark mode theme

2 participants