fix: theme colors not applying due to incorrect CSS injection method

2026-04-26 17:35:49 +09:30
parent e4735d3823
commit c34551b868
4 changed files with 85 additions and 168 deletions
@@ -17,9 +17,21 @@ export default defineConfig(({ mode }) => {
  const appName = env.VITE_APP_NAME || (themeName === "dev" ? "Secuird Dev" : themeName === "preprod" ? "Secuird Staging" : "Secuird");
  const favicon = env.VITE_FAVICON || (themeName === "dev" ? "/favicon-dev.svg" : themeName === "preprod" ? "/favicon-staging.svg" : "/favicon.svg");

-  const themeColor = `hsl(${colors.primary})`;
+  const themeColorHsl = `hsl(${colors.primary})`;
+
+  // Build a CSS block that injects directly into <head> before any stylesheets load.
+  const themeStyles = `
+<style data-theme="${themeName}">
+  :root {
+    --theme-primary: ${colors.primary};
+    --theme-primary-foreground: 0 0% 100%;
+    --theme-sidebar-primary: ${colors.sidebarPrimary};
+    --theme-sidebar-primary-foreground: 0 0% 100%;
+    --theme-ring: ${colors.ring};
+    --theme-color: ${themeColorHsl};
+  }
+</style>`;

-  
  return {
    server: {
      host: "::",
@@ -37,30 +49,18 @@ export default defineConfig(({ mode }) => {
        transformIndexHtml: {
          order: "pre",
          handler: (html) => {
-            return html
+            const headClose = html.indexOf("</head>");
+            const withStyle = headClose > -1
+              ? html.slice(0, headClose) + themeStyles + "\n" + html.slice(headClose)
+              : html;
+            return withStyle
              .replace(/%VITE_APP_NAME%/g, appName)
              .replace(/%VITE_FAVICON%/g, favicon)
-              .replace(/%VITE_THEME_COLOR%/g, themeColor);
+              .replace(/%VITE_THEME_COLOR%/g, themeColorHsl);
          },
        },
      },
    ],
-    css: {
-      preprocessorOptions: {
-        css: {
-          additionalData: `
-            :root {
-              --theme-primary: ${colors.primary};
-              --theme-primary-foreground: 0 0% 100%;
-              --theme-sidebar-primary: ${colors.sidebarPrimary};
-              --theme-sidebar-primary-foreground: 0 0% 100%;
-              --theme-ring: ${colors.ring};
-              --theme-color: hsl(${colors.primary});
-            }
-          `,
-        },
-      },
-    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),