From 619f3fabec633f26fc0d29d5bd59f3a9e163eada Mon Sep 17 00:00:00 2001 From: oscarjpicazo Date: Sat, 25 Jul 2026 16:38:48 +0200 Subject: [PATCH] fix(desktop): bind Tailwind dark variant to the theme class Tailwind v4's dark: variant defaults to the prefers-color-scheme media query, but the app's ThemeProvider drives theming by setting .dark/.light on . Without a @custom-variant binding, all dark: utilities followed the OS appearance instead of the selected theme: picking an explicit light theme while the OS is in dark mode (or vice versa) rendered mixed styling, e.g. the composer's dark glass treatment over a light theme. Bind dark: to the theme class in both Tailwind entry points (desktop and web). The desktop's synchronous theme bootstrap in index.html already guarantees the class exists before first paint. Signed-off-by: oscarjpicazo --- desktop/src/shared/styles/globals.css | 6 ++++++ web/src/shared/styles/globals.css | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/desktop/src/shared/styles/globals.css b/desktop/src/shared/styles/globals.css index fd60621933..d014277407 100644 --- a/desktop/src/shared/styles/globals.css +++ b/desktop/src/shared/styles/globals.css @@ -17,3 +17,9 @@ @import "./globals/progress.css"; @config "../../../tailwind.config.js"; + +/* Bind the `dark:` variant to the theme class the ThemeProvider sets on + , instead of Tailwind v4's default `prefers-color-scheme` media + query — otherwise `dark:` utilities follow the OS appearance even when + the user picks an explicit light/dark theme in Settings → Appearance. */ +@custom-variant dark (&:where(.dark, .dark *)); diff --git a/web/src/shared/styles/globals.css b/web/src/shared/styles/globals.css index e7255a9cb7..725cb5cf3a 100644 --- a/web/src/shared/styles/globals.css +++ b/web/src/shared/styles/globals.css @@ -3,6 +3,12 @@ @plugin "@tailwindcss/typography"; @config "../../../tailwind.config.js"; +/* Bind the `dark:` variant to the theme class the ThemeProvider sets on + , instead of Tailwind v4's default `prefers-color-scheme` media + query — otherwise `dark:` utilities follow the OS appearance rather + than the resolved theme class. */ +@custom-variant dark (&:where(.dark, .dark *)); + @layer base { :root { /* Catppuccin Latte (mauve accent) */