feat: add light theme#2
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f24d107487
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const colorVariable = (name, fallback) => | ||
| `rgb(var(--color-${name}, ${fallback}) / <alpha-value>)`; |
There was a problem hiding this comment.
Replace the alpha placeholder before plugin CSS uses it
When .prose content is rendered, this helper makes theme('colors.*') return strings containing <alpha-value>; the typography extension below uses those raw theme values directly, so the generated .prose declarations contain invalid colors like rgb(var(...) / <alpha-value>) and browsers drop them. Utility classes still get the placeholder substituted, but plugin CSS needs a concrete alpha value or separate non-placeholder color tokens; this affects issue comments/descriptions and release notes that use prose.
Useful? React with 👍 / 👎.
| alt="" | ||
| aria-hidden |
There was a problem hiding this comment.
Preserve the logo link name in light mode
When the light theme is active, CSS hides .seerr-logo-dark and shows .seerr-logo-light, but the visible image is explicitly empty and aria-hidden. The sidebar/login logo links then have no accessible name in light mode for screen reader users; give the light asset the same alt text, or only hide the inactive asset from assistive tech.
Useful? React with 👍 / 👎.
Description
Adds a basic light theme with a toggle in the user menu.
The selected theme is saved in localStorage instead of user settings. This allows per-device flexibility that accessibility requiring users might desire. The argument for maintaining light mode is that users with visual impairments depend on and expect an experience consistent with other websites because they've tuned their accessibility settings to help with websites that are typically in light mode. See seerr-team#1793
I also added light versions of the Seerr wordmark logos so they stay readable on light backgrounds without changing the icon colors.
How Has This Been Tested?
pnpm lintpnpm i18n:extractpnpm buildpnpm testScreenshots / Logs (if applicable)
N/A
Checklist:
pnpm buildpnpm i18n:extractAI disclosure: I used AI to help implement and test this change, then reviewed the changes myself.