From cfd1158708fff7b55777f56c72dbade0932a8ecd Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Fri, 17 May 2024 19:46:39 +0200
Subject: [PATCH] Add an option to disable the dark mode (or the light mode)

---
 web/.env                           | 12 ++++++++++++
 web/index.html                     |  8 ++++++++
 web/scripts/unyamlify-env-local.ts |  2 +-
 web/src/env.ts                     | 20 ++++++++++++++++++++
 web/src/main.tsx                   |  1 +
 web/src/ui/App/Footer.tsx          | 12 +++++++-----
 web/src/ui/theme/theme.tsx         |  7 ++++---
 web/src/vite-env.d.ts              |  1 +
 8 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/web/.env b/web/.env
index 749ae212e..cdc84a082 100644
--- a/web/.env
+++ b/web/.env
@@ -104,6 +104,18 @@ HEADER_TEXT_BOLD=
 #
 HEADER_TEXT_FOCUS=Datalab
 
+# This parameter enables you to disable the ability to switch between dark and light mode.  
+# This is to use if you with to create a custom theme but can't make it quite mork with the dark mode.
+#
+# Type: "true" or "false" 
+#
+# Examples:
+#   DARK_MODE: false # Your Onyxia instance will always be in light mode.
+#   
+#   DARK_MODE: true # Your Onyxia instance will always be in dark mode.
+#
+DARK_MODE=
+
 # This parameter allows you to override some, or all, of the color palette.
 #
 # Should you desire to personalize the color palette without the assistance of a UI designer, 
diff --git a/web/index.html b/web/index.html
index 5f0b9898a..4322cd87f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -94,6 +94,14 @@
         (function () {
         
             var isDarkModeEnabled = /true/.test((function () {
+
+                {
+                    var envValue = "<%= import.meta.env.DARK_MODE %>";
+
+                    if(envValue !== ""){
+                        return envValue;
+                    }
+                }
             
                 var key = "powerhooks_useGlobalState_isDarkModeEnabled";
                 var value = null;
diff --git a/web/scripts/unyamlify-env-local.ts b/web/scripts/unyamlify-env-local.ts
index 8419aaa2a..4ed156c00 100644
--- a/web/scripts/unyamlify-env-local.ts
+++ b/web/scripts/unyamlify-env-local.ts
@@ -82,7 +82,7 @@ fs.writeFileSync(
             "",
             ...Object.entries(parsedEnvLocalYaml.onyxia.web.env).map(
                 ([key, value]) =>
-                    `${key}="vite-envs:b64Decode(${Buffer.from(value, "utf8").toString("base64")})"`
+                    `${key}="vite-envs:b64Decode(${Buffer.from(`${value}`, "utf8").toString("base64")})"`
             )
         ].join("\n"),
         "utf8"
diff --git a/web/src/env.ts b/web/src/env.ts
index 7c4cfdb87..29a6f6bb9 100644
--- a/web/src/env.ts
+++ b/web/src/env.ts
@@ -1130,6 +1130,26 @@ export const { env, injectTransferableEnvsInQueryParams } = createParsedEnvs([
             assert(envValue !== "", "Should have default in .env");
             return envValue;
         }
+    },
+    {
+        "envName": "DARK_MODE",
+        "isUsedInKeycloakTheme": false,
+        "validateAndParseOrGetDefault": ({ envValue, envName })=> {
+
+            assert(
+                envValue === "" || envValue === "true" || envValue === "false",
+                `${envName} should either be "true" or "false" or "" (not defined)}`
+            );
+
+            switch(envValue){
+                case "true": return true;
+                case "false": return false;
+                case "": return undefined;
+            }
+
+            assert<Equals<typeof envValue, never>>(false);
+            
+        }
     }
 ]);
 
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 5908e803d..0915be88f 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { lazy, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext";
diff --git a/web/src/ui/App/Footer.tsx b/web/src/ui/App/Footer.tsx
index 6551d5bd5..91595d770 100644
--- a/web/src/ui/App/Footer.tsx
+++ b/web/src/ui/App/Footer.tsx
@@ -63,11 +63,13 @@ export const Footer = memo((props: Props) => {
                 </a>
             )}
             {spacing}
-            <DarkModeSwitch
-                size="extra small"
-                className={classes.darkModeSwitch}
-                ariaLabel={t("dark mode switch")}
-            />
+            {env.DARK_MODE === undefined && (
+                <DarkModeSwitch
+                    size="extra small"
+                    className={classes.darkModeSwitch}
+                    ariaLabel={t("dark mode switch")}
+                />
+            )}
         </footer>
     );
 });
diff --git a/web/src/ui/theme/theme.tsx b/web/src/ui/theme/theme.tsx
index 7ad7c45c6..0c3e13b79 100644
--- a/web/src/ui/theme/theme.tsx
+++ b/web/src/ui/theme/theme.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createOnyxiaUi, defaultGetTypographyDesc } from "onyxia-ui";
 import { palette } from "./palette";
 import { targetWindowInnerWidth } from "./targetWindowInnerWidth";
@@ -69,11 +70,11 @@ pluginSystemInitTheme({
     cx
 });
 
-export function OnyxiaUi(props: { darkMode?: boolean; children: React.ReactNode }) {
-    const { darkMode, children } = props;
+export function OnyxiaUi(props: { children: React.ReactNode }) {
+    const { children } = props;
     return (
         <CacheProvider value={emotionCache}>
-            <OnyxiaUiWithoutEmotionCache darkMode={darkMode}>
+            <OnyxiaUiWithoutEmotionCache darkMode={env.DARK_MODE}>
                 {children}
             </OnyxiaUiWithoutEmotionCache>
         </CacheProvider>
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
index c0d747438..67937e797 100644
--- a/web/src/vite-env.d.ts
+++ b/web/src/vite-env.d.ts
@@ -12,6 +12,7 @@ type ImportMetaEnv = {
   HEADER_HIDE_ONYXIA: string
   HEADER_TEXT_BOLD: string
   HEADER_TEXT_FOCUS: string
+  DARK_MODE: string
   PALETTE_OVERRIDE: string
   FONT: string
   SPLASHSCREEN_LOGO: string