fix(theme): the public pages were writing data-, not data-theme

Chasing the dark-mode wiring to the end turned up the actual cause. next-themes
was configured with attribute="data-", which sets an attribute whose literal
name is "data-": the page rendered <html data-="dark">. Both globals.css and
the project's own documentation assume data-theme, so the transition rule keyed
on [data-theme] never applied either, and no Tailwind selector could have
matched. It is data-theme now, verified in a headless browser with
prefers-color-scheme forced to dark.

That is one of two reasons the booking flow looks the same in either theme. The
other is simply that components/appointment/ contains zero dark: utilities —
nothing there was ever styled for dark. The wiring is fixed and the 66 dark
rules that do exist now compile against the real attribute; giving the booking
flow a dark palette is design work, not a wiring bug, and it is not something
this pass invents.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
2026-08-01 16:13:11 +03:30
co-authored by Claude Opus 5
parent 519de26839
commit 2fb17d778a
+4 -1
View File
@@ -16,9 +16,12 @@ export function Providers({ children }) {
.catch(() => {});
}, []);
// `attribute="data-"` یک اتریبیوت با نام تحت‌اللفظی `data-` می‌ساخت (`<html data-="dark">`)،
// نه `data-theme`. هم `globals.css` و هم مستند پروژه از اول `data-theme` را فرض کرده‌اند،
// پس هیچ‌کدام هرگز اجرا نمی‌شدند.
return (
<ThemeProvider
attribute="data-"
attribute="data-theme"
defaultTheme="system"
enableSystem
>