feat: make theme color configurable

Author: openscript

.gitignore

@@ -140,7 +140,6 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
 .env.development.local
 .env.test.local
 .env.production.local

apps/frontend/.docker/entrypoint.sh

@@ -3,6 +3,6 @@ set -xe
 
 : "${API_URL?Define the api endpoint}"
 
-sed -i "s|//REPLACE_WITH_API_URL|$API_URL|g" /usr/share/nginx/html/index.html
+envsubst < /usr/share/nginx/html/index.template.html > /usr/share/nginx/html/index.html
 
 exec "$@"

apps/frontend/.env

@@ -0,0 +1,2 @@
+VITE_API_URL=http://localhost:3000
+VITE_THEME_COLOR=quassel

apps/frontend/Dockerfile

@@ -1,6 +1,7 @@
 FROM docker.io/nginx:stable-alpine
 
 COPY dist/ /usr/share/nginx/html/
+RUN cp /usr/share/nginx/html/index.html /usr/share/nginx/html/index.template.html
 COPY ./.docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY ./.docker/entrypoint.sh /
 

apps/frontend/index.html

@@ -22,7 +22,8 @@
   </style>
   <script type="text/javascript">
     window.env = {
-      apiUrl: '//REPLACE_WITH_API_URL'
+      apiUrl: '$API_URL',
+      themeColor: '$THEME_COLOR'
     };
   </script>
 </head>

apps/frontend/src/configuration.ts

@@ -1,13 +1,14 @@
 function getEnv(key: keyof Exclude<typeof window.env, undefined>) {
   if (window.env === undefined) return;
-  if (window.env[key]?.startsWith("//")) return;
+  if (window.env[key]?.startsWith("$")) return;
 
   return window.env[key];
 }
 
 export const C = {
   env: {
-    apiUrl: getEnv("apiUrl") || "http://localhost:3000",
+    apiUrl: getEnv("apiUrl") || import.meta.env.VITE_API_URL,
+    themeColor: getEnv("themeColor") || import.meta.env.VITE_THEME_COLOR,
   },
   ui: {
     maxDropdownHeight: 800,

apps/frontend/src/main.tsx

@@ -1,10 +1,11 @@
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@quassel/ui/style.css";
-import { ThemeProvider } from "@quassel/ui";
+import { ThemeProvider, defaultTheme, mergeThemeOverrides } from "@quassel/ui";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { C } from "./configuration.ts";
 
 const queryClient = new QueryClient();
 const router = createRouter({ routeTree, context: { queryClient }, defaultPreload: "intent", defaultPreloadStaleTime: 0 });
@@ -23,10 +24,12 @@ declare module "@tanstack/react-router" {
   }
 }
 
+const currentTheme = mergeThemeOverrides(defaultTheme, { primaryColor: C.env.themeColor });
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
+      <ThemeProvider theme={currentTheme}>
         <RouterProvider router={router} notFoundMode="root" />
         <TanStackRouterDevtools router={router} position="bottom-right" />
       </ThemeProvider>

apps/frontend/src/types.d.ts

@@ -25,6 +25,7 @@ declare global {
   interface Window {
     env?: {
       apiUrl?: string;
+      themeColor?: string;
     };
   }
 }

apps/frontend/src/vite-env.d.ts

@@ -1,2 +1,11 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/pwa-assets" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_THEME_COLOR: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

examples/public/docker-compose.yaml

@@ -75,6 +75,7 @@ services:
     restart: unless-stopped
     environment:
       API_URL: https://api.test.example.com
+      THEME_COLOR: uzhGold
     labels:
       - "com.centurylinklabs.watchtower.enable=true"
       - "traefik.enable=true"