Add an option to disable the dark mode (or the light mode)

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, 

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;

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"

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": true,
+        "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);
+
+        }
     }
 ]);
 

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";

web/src/ui/App/App.tsx

@@ -131,7 +131,16 @@ const useStyles = tss
                 "height": "100%",
                 "display": "flex",
                 "flexDirection": "column",
-                "backgroundColor": theme.colors.useCases.surfaces.background,
+                //"backgroundColor": theme.colors.useCases.surfaces.background,
+                "backgroundImage": `
+                linear-gradient(
+                    275deg,
+                    rgba(81, 0, 184, 1) 0%,
+                    rgba(255, 0, 128, 1) 0%,
+                    rgba(239, 87, 0, 1) 60%,
+                    rgba(255, 255, 0, 1) 100%
+                  )
+                  `,
                 "margin": `0 ${rootRightLeftMargin}px`,
                 "position": "relative"
             },

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>
     );
 });

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>

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