From 9108ed3be92444762642b747376f751ec1eee9ea Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Wed, 4 Feb 2026 14:33:50 +0100
Subject: [PATCH] fix(ui): default data-theme on SSR

---
 app/app.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/app.vue b/app/app.vue
index e8103f513..2d6a04275 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -36,6 +36,14 @@ useHead({
     'lang': () => locale.value,
     'dir': () => localeMap[locale.value] ?? 'ltr',
     'data-kbd-hints': () => showKbdHints.value,
+    /**
+     * npmx default theme is dark. But on initial load we don't know the user's preference yet.
+     * Without this attribute being set here, no theme gets loaded, regardless of user's preference,
+     * and a white page flashes before the correct theme is applied. Setting it to 'light' here
+     * doesn't prevent the flash of white page for dark mode users, but at least the page doesn't
+     * look broken while loading and white mode users get the correct theme immediately.
+     */
+    'data-theme': () => 'light',
   },
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'