have color controlled by environment and give dev a different color

rlindner81 · Mar 24, 2023 · a2feda0 · a2feda0
1 parent 1856fa9
commit a2feda0
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/frontend/.env b/frontend/.env
@@ -1,4 +1,7 @@
 VITE_PUBLIC_DIR = public
+VITE_COLOR_PRIMARY = "#1b4965"
+VITE_COLOR_SECONDARY = "#1c7293"
+VITE_COLOR_BACKGROUND = "#f8f9fa"
 VITE_DEFAULT_LOCALE = en
 VITE_FALLBACK_LOCALE = en
 VITE_APP_NAME = TrackIt

diff --git a/frontend/.env.development b/frontend/.env.development
@@ -1,3 +1,5 @@
 VITE_PUBLIC_DIR = public.development
+VITE_COLOR_PRIMARY = "#56693a"
+VITE_COLOR_SECONDARY = "#779150"
 VITE_APP_NAME = TrackIt-Dev
 VITE_FIREBASE_CONFIG = {"apiKey":"AIzaSyBnndX-VxyIcXNEUD4njlhKAHEbYEadx7c","authDomain":"trackit-dev-fde62.firebaseapp.com","projectId":"trackit-dev-fde62","storageBucket":"trackit-dev-fde62.appspot.com","messagingSenderId":"587772691249","appId":"1:587772691249:web:0b43c740d50202d3db2610"}
diff --git a/frontend/env.d.ts b/frontend/env.d.ts
@@ -6,6 +6,9 @@ interface ImportMetaEnv {
   readonly VITE_FALLBACK_LOCALE: string;
   readonly VITE_APP_NAME: string;
   readonly VITE_FIREBASE_CONFIG: string;
+  readonly VITE_COLOR_PRIMARY: string;
+  readonly VITE_COLOR_SECONDARY: string;
+  readonly VITE_COLOR_BACKGROUND: string;
 }
 
 interface ImportMeta {

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -18,12 +18,12 @@ import "@mdi/font/css/materialdesignicons.css";
 const myCustomLightTheme = {
   dark: false,
   colors: {
-    background: "#f8f9fa",
-    surface: "#FFFFFF",
-    primary: "#1b4965",
-    "primary-darken-1": "#3700B3",
-    secondary: "#1c7293",
+    primary: import.meta.env.VITE_COLOR_PRIMARY,
+    "primary-darken-1": "#3700b3",
+    secondary: import.meta.env.VITE_COLOR_SECONDARY,
     "secondary-darken-1": "#018786",
+    background: import.meta.env.VITE_COLOR_BACKGROUND,
+    surface: "#ffffff",
     error: "#a4133c",
     info: "#82a3a1",
     success: "#137547",

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -26,6 +26,8 @@ export default defineConfig(({ mode }) => {
         manifest: {
           name: env.VITE_APP_NAME,
           short_name: env.VITE_APP_NAME,
+          theme_color: env.VITE_COLOR_PRIMARY,
+          background_color: env.VITE_COLOR_BACKGROUND,
           description: "TrackIt allows you to track interesting or curious events in your life in a structured way.",
           icons: [
             {
@@ -41,8 +43,6 @@ export default defineConfig(({ mode }) => {
           ],
           start_url: "./",
           display: "standalone",
-          background_color: "#f8f9fa",
-          theme_color: "#1b4965",
         },
       }),
     ],