Swap in light mode assets

app/src/routes/projects/ProjectsTab/Create/index.tsx

@@ -1,4 +1,5 @@
-import backgroundImage from '@/assets/dunes-create.png';
+import backgroundImageDark from '@/assets/dunes-create-dark.png';
+import backgroundImageLight from '@/assets/dunes-create-light.png';
 import { useProjectsManager } from '@/components/Context';
 import { MotionCard, MotionCardFooter } from '@/components/ui/motion-card';
 import { sendAnalytics } from '@/lib/utils';
@@ -8,6 +9,7 @@ import { useEffect, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { loadProjectSteps, newProjectSteps, StepContent } from './stepContents';
 import { Project } from '/common/models/project';
+import { useTheme } from '@/components/ThemeProvider';
 
 export interface StepProps {
     projectData: Partial<Project & { hasCopied?: boolean }>;
@@ -46,6 +48,26 @@ const CreateProject = ({
     const [direction, setDirection] = useState(0);
 
     const { ref, height } = useResizeObserver();
+    const { theme } = useTheme();
+
+    const [backgroundImage, setBackgroundImage] = useState(backgroundImageLight);
+
+    useEffect(() => {
+        const determineBackgroundImage = () => {
+            if (theme === 'dark') {
+                return backgroundImageDark;
+            } else if (theme === 'light') {
+                return backgroundImageLight;
+            } else if (theme === 'system') {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? backgroundImageDark
+                    : backgroundImageLight;
+            }
+            return backgroundImageLight;
+        };
+
+        setBackgroundImage(determineBackgroundImage());
+    }, [theme]);
 
     useEffect(() => {
         setCurrentStep(0);

app/src/routes/signin/index.tsx

@@ -1,4 +1,5 @@
-import dunes from '@/assets/dunes-login.png';
+import dunesDark from '@/assets/dunes-login-dark.png';
+import dunesLight from '@/assets/dunes-login-light.png';
 import { useAuthManager } from '@/components/Context';
 import { Button } from '@/components/ui/button';
 import { observer } from 'mobx-react-lite';
@@ -58,7 +59,7 @@ const SignIn = observer(() => {
                         <div className="flex flex-col items-center w-full">
                             <Button
                                 variant="outline"
-                                className={`w-full text-active text-small ${lastSignInMethod === SignInMethod.GITHUB ? 'text-small bg-teal-400 border-teal-300 text-teal-950 hover:bg-teal-500 hover:border-teal-950 dark:bg-teal-950 dark:border-teal-700 dark:text-teal-100 dark:hover:bg-teal-800' : 'bg-background-onlook'}`}
+                                className={`w-full text-active text-small ${lastSignInMethod === SignInMethod.GITHUB ? 'bg-teal-100 dark:bg-teal-950 border-teal-300 dark:border-teal-700 text-teal-900 dark:text-teal-100 text-small hover:bg-teal-200/50 dark:hover:bg-teal-800 hover:border-teal-500/70 dark:hover:border-teal-500' : 'bg-background-onlook'}`}
                                 onClick={() => handleLogin(SignInMethod.GITHUB)}
                             >
                                 <Icons.GitHubLogo className="w-4 h-4 mr-2" /> {'Login with GitHub'}
@@ -72,7 +73,7 @@ const SignIn = observer(() => {
                         <div className="flex flex-col items-center w-full">
                             <Button
                                 variant="outline"
-                                className={`w-full text-active text-small ${lastSignInMethod === SignInMethod.GOOGLE ? 'bg-teal-950 border-teal-700 text-teal-100 text-small hover:bg-teal-800 hover:border-teal-500' : 'bg-background-onlook'}`}
+                                className={`w-full text-active text-small ${lastSignInMethod === SignInMethod.GOOGLE ? 'bg-teal-100 dark:bg-teal-950 border-teal-300 dark:border-teal-700 text-teal-900 dark:text-teal-100 text-small hover:bg-teal-200/50 dark:hover:bg-teal-800 hover:border-teal-500/70 dark:hover:border-teal-500' : 'bg-background-onlook'}`}
                                 onClick={() => handleLogin(SignInMethod.GOOGLE)}
                             >
                                 <Icons.GoogleLogo viewBox="0 0 24 24" className="w-4 h-4 mr-2" />
@@ -108,9 +109,14 @@ const SignIn = observer(() => {
             </div>
             <div className="hidden w-full lg:block md:block m-6">
                 <img
-                    className="w-full h-full object-cover rounded-xl"
-                    src={dunes}
-                    alt="Onlook dunes"
+                    className="w-full h-full object-cover rounded-xl hidden dark:flex"
+                    src={dunesDark}
+                    alt="Onlook dunes dark"
+                />
+                <img
+                    className="w-full h-full object-cover rounded-xl flex dark:hidden"
+                    src={dunesLight}
+                    alt="Onlook dunes light"
                 />
             </div>
         </div>