Skip to content

Add dark mode#7417

Draft
emilghittasv wants to merge 1 commit into
mozilla:mainfrom
emilghittasv:dark-mode
Draft

Add dark mode#7417
emilghittasv wants to merge 1 commit into
mozilla:mainfrom
emilghittasv:dark-mode

Conversation

@emilghittasv

Copy link
Copy Markdown
Collaborator
  • Added CSS custom property tokens for dark mode in _project-theme.scss: page background, card backgrounds, text, borders, shadows, form fields, and interactive states
  • All dark overrides follow a consistent three-rule pattern:
    @media (prefers-color-scheme: dark) { ... }  ← OS preference
    [data-theme="dark"] { ... }                  ← manual toggle
    [data-theme="light"] { ... }                 ← override OS dark → light
    -Added a theme toggle button to the top navbar via Alpine.js, with a cookie-backed preference that is pre-read server-side in base.html to eliminate the flash-of-wrong-theme on page load

@denyshon

Copy link
Copy Markdown
Contributor

We might also want to add dark versions of images in the gallery. What I was thinking of was storing two images under the same entity (light/dark), but there may be different implementations... Anyway, treat this like a note for the future, since this definitely shouldn't be a blocker

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