fix(spa): enable primevue dark mode via .wp-dark class on documentelement

src/manager/main.ts

@@ -10,6 +10,12 @@ import "./styles/tailwind.css";
 import App from "./App.vue";
 import router from "./router";
 
+// Force PrimeVue dark mode by adding the matching class on the html root.
+// PrimeVue 4 treats `darkModeSelector` as a CSS selector that toggles dark
+// scope tokens; `":root"` is not a recognized variant, so we use a class
+// and apply it eagerly. Light mode is not supported in v1.
+document.documentElement.classList.add("wp-dark");
+
 const app = createApp(App);
 app.use(createPinia());
 app.use(router);
@@ -17,7 +23,7 @@ app.use(PrimeVue, {
   theme: {
     preset: WildcardPreset,
     options: {
-      darkModeSelector: ":root",
+      darkModeSelector: ".wp-dark",
       cssLayer: { name: "primevue", order: "tailwind-base, primevue, tailwind-utilities" },
     },
   },

web/index.html

@@ -7,8 +7,8 @@
     <link rel="icon" type="image/svg+xml" href="/wp/images/favicon.svg" />
     <link rel="apple-touch-icon" href="/wp/images/apple-touch-icon.png" />
     <link rel="manifest" href="/wp/images/site.webmanifest" />
-    <script type="module" crossorigin src="/wp/assets/manager-Bo0Ofrce.js"></script>
-    <link rel="stylesheet" crossorigin href="/wp/assets/manager-BYxj3PXg.css">
+    <script type="module" crossorigin src="/wp/assets/manager-GO_zoksX.js"></script>
+    <link rel="stylesheet" crossorigin href="/wp/assets/manager-_-ZL74NZ.css">
   </head>
   <body>
     <div id="app"></div>