feat: add environment-based CSS theming with configurable colors and branding

2026-04-26 16:47:48 +09:30
parent 37e5de7f92
commit d8828d64f2
16 changed files with 262 additions and 39 deletions
@@ -6,6 +6,19 @@ import { componentTagger } from "lovable-tagger";
 export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

+  const themeName = env.VITE_THEME || "default";
+  const themeColors: Record<string, { primary: string; sidebarPrimary: string; ring: string }> = {
+    default: { primary: "173 65% 36%", sidebarPrimary: "173 65% 36%", ring: "173 65% 36%" },
+    dev: { primary: "0 72% 51%", sidebarPrimary: "0 72% 51%", ring: "0 72% 51%" },
+    preprod: { primary: "270 70% 55%", sidebarPrimary: "270 70% 55%", ring: "270 70% 55%" },
+  };
+  const colors = themeColors[themeName] || themeColors.default;
+
+  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})`;
+
  return {
    server: {
      host: "::",
@@ -15,7 +28,38 @@ export default defineConfig(({ mode }) => {
        "gatehouse-ui.hawkvelt.tech",
      ],
    },
-    plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
+    plugins: [
+      react(),
+      mode === "development" && componentTagger(),
+      {
+        name: "vite-plugin-theme-injection",
+        transformIndexHtml: {
+          order: "pre",
+          handler: (html) => {
+            return html
+              .replace(/%VITE_APP_NAME%/g, appName)
+              .replace(/%VITE_FAVICON%/g, favicon)
+              .replace(/%VITE_THEME_COLOR%/g, themeColor);
+          },
+        },
+      },
+    ],
+    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"),