From a973fff7d157593cca736355b2265b37e2ecc7bf Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Thu, 11 Jul 2024 10:30:58 +0700
Subject: [PATCH] fix: force dark mode in intro

---
 frontend/src/screens/Intro.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/screens/Intro.tsx b/frontend/src/screens/Intro.tsx
index 12e8f00c..f70d9267 100644
--- a/frontend/src/screens/Intro.tsx
+++ b/frontend/src/screens/Intro.tsx
@@ -27,7 +27,16 @@ export function Intro() {
   const navigate = useNavigate();
   const [api, setApi] = React.useState<CarouselApi>();
   const [progress, setProgress] = React.useState<number>(0);
-  const { theme } = useTheme();
+  const { setDarkMode } = useTheme();
+
+  React.useEffect(() => {
+    // Force dark mode on intro screen
+    setDarkMode("dark");
+    return () => {
+      // Revert to default after exiting intro
+      setDarkMode("system");
+    };
+  }, [setDarkMode]);
 
   React.useEffect(() => {
     if (!info?.setupCompleted) {
@@ -49,7 +58,6 @@ export function Intro() {
         style={{
           backgroundImage: `url(${Cloud})`,
           backgroundPositionX: `${-Math.max(progress, 0) * 40}%`,
-          filter: theme === "light" ? "invert(0.3)" : undefined,
         }}
       />
       <div
@@ -58,7 +66,6 @@ export function Intro() {
           backgroundImage: `url(${Cloud2})`,
           backgroundPositionX: `${150 - Math.max(progress, 0) * 60}%`,
           backgroundPositionY: "100%",
-          filter: theme === "light" ? "invert(0.3)" : undefined,
         }}
       />
       <CarouselContent className="select-none bg-transparent">