[Bug] `dark:` utilities follow the OS color scheme, not the selected theme (missing Tailwind v4 `@custom-variant` binding)
- Dominant language
- Rust
- Stars
- 32.7k
- Forks
- 4.3k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 253
Description
## Describe the bug
The desktop app's theming is class-driven: `ThemeProvider` resolves the active
theme and sets `.dark` / `.light` on ``
(`desktop/src/shared/theme/ThemeProvider.tsx`), and the synchronous bootstrap in
`desktop/index.html` seeds that class before first paint.
However, the app is on Tailwind **v4**, where the `dark:` variant defaults to
the `prefers-color-scheme` **media query** unless it is explicitly rebound to a
class. Neither `desktop/src/shared/styles/globals.css` nor the legacy config
loaded via `@config` declares such a binding (`tailwind.config.js` has no
`darkMode` key, and there is no `@custom-variant` anywhere in the repo).
The result: all 127 `dark:` utilities across 48 desktop files respond to the
**OS appearance**, while every CSS-variable-driven style responds to the
**selected theme**. Any user who picks an explicit theme that disagrees with
their OS appearance gets mixed styling.
## To reproduce
1. macOS in **dark** appearance.
2. In Buzz: Settings → Appearance → mode **Light**, any light theme
(e.g. Catppuccin Latte).
3. Look at surfaces styled with `dark:` utilities, e.g. the message composer
(`desktop/src/features/messages/ui/MessageComposer.tsx` uses
`dark:bg-background/70 dark:backdrop-blur-xl ...`): they apply their
dark-mode treatment on top of the light theme.
4. The inverse also holds (OS light + explicit dark theme): `dark:` styling
silently never applies.
## Evidence (compiled CSS)
Compiling `desktop/src/shared/styles/globals.css` with the repo's own config
(Tailwind CLI 4.3.x) emits every `dark:` utility inside a media query — there
is no `.dark`-class selector at all:
```css
@media (prefers-color-scheme: dark) {
.dark\:border-blue-500\/30 { ... }
.dark\:bg-background\/70 { ... }
/* ...every dark: utility in the app... */
}
```
## Expected behavior
`dark:` utilities should follow the theme class the app already maintains, i.e.
compile to `.dark\:bg-background\/70:where(.dark, .dark *) { ... }`.
## Why it goes mostly unnoticed
The default is "Buzz + Follow system", so theme and OS agree for most users.
Only users who pin a theme that disagrees with their OS appearance see the
mismatch — which may also be a contributing factor in other light-mode
visibility reports.
## Fix
One line in each Tailwind entry point (desktop and web, which has the same
latent pattern — its `ThemeProvider` also sets the class):
```css
@custom-variant dark (&:where(.dark, .dark *));
```
Verified by recompiling: zero `prefers-color-scheme` occurrences remain and all
`dark:` utilities bind to the theme class. PR incoming.
## Environment
- Found by static analysis + compiling the stylesheet with the repo's config
(Tailwind CLI 4.3.3); reproducible on any platform.
Contributor guide
Research direction
Start with desktop/src/shared/styles/globals.css and inspect the Tailwind entry point, then compare the class set by desktop/src/shared/theme/ThemeProvider.tsx with the legacy tailwind.config.js. Compile the desktop and web stylesheets using the repository’s Tailwind CLI configuration and confirm that dark: utilities follow the theme class rather than prefers-color-scheme.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100