Merge pull request #49 from wlee261/feat/light-and-dark-theme-setup

feat: theme setup

Author: tjtanjin

src/components/NavigationBar/AppThemeToggle.tsx

@@ -0,0 +1,18 @@
+import { useAppTheme } from "../../context/AppThemeContext";
+
+const AppThemeToggle = () => {
+	// context for handling app theme
+	const { appTheme, toggleAppTheme } = useAppTheme()
+
+	const handleClick = () => {
+		toggleAppTheme()
+	}
+
+	console.log(appTheme)
+
+	return <div>
+		<button onClick={handleClick}>{appTheme}</button>
+	</div>
+}
+
+export default AppThemeToggle;

src/components/NavigationBar/NavigationBar.tsx

@@ -5,6 +5,7 @@ import { handleLogin } from '../../services/authService';
 import { useAuth } from '../../context/AuthContext';
 import { SiteConfig } from '../../constants/SiteConfig';
 import logo from '../../assets/images/logo.png';
+import AppThemeToggle from './AppThemeToggle';
 
 /**
  * Navigation bar for users to navigate between pages.
@@ -217,6 +218,7 @@ const NavigationBar = () => {
 									setUserData(null)
 									navigate('/')
 								}}
+								className="mr-8"
 							>
 								Logout
 							</button>
@@ -227,12 +229,15 @@ const NavigationBar = () => {
 						<button
 							type="button"
 							onClick={() => handleLogin()}
-							className="hover:text-blue-500"
+							className="hover:text-blue-500 mr-8"
 						>
 							Login
 						</button>
 					</li>
 				)}
+				<li>
+					<AppThemeToggle />
+				</li>
 			</ul>
 		</nav>
 	)

src/context/AppThemeContext.tsx

@@ -0,0 +1,63 @@
+import React, {
+	createContext,
+	useContext,
+	useState,
+	ReactNode,
+	useEffect
+} from 'react'
+
+type AppThemeType = 'light' | 'dark'
+
+type AppThemeContextType = {
+	appTheme: 'light' | 'dark'
+	toggleAppTheme: () => void
+}
+
+const AppThemeContext = createContext<AppThemeContextType>({
+	appTheme: 'dark',
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	toggleAppTheme: () => {}
+})
+
+type AppThemeProviderProps = {
+	children: ReactNode
+}
+
+const AppThemeProvider: React.FC<AppThemeProviderProps> = ({ children }) => {
+	const [appTheme, setAppTheme] = useState<AppThemeType>(
+		() => window.matchMedia("(prefers-color-theme: dark)").matches ? 'dark' : 'light'
+	)
+
+	useEffect(() => {
+		document.documentElement.setAttribute('app-theme', appTheme)
+	},[])
+
+	const toggleAppTheme = () => {
+		setAppTheme((prevAppTheme) => {
+			const isDarkTheme = prevAppTheme === 'dark'
+			document.documentElement.setAttribute('app-theme', isDarkTheme ? 'light' : 'dark')
+			return isDarkTheme ? 'light' : 'dark'
+		})
+	}
+
+	return (
+		<AppThemeContext.Provider
+			value={{ appTheme, toggleAppTheme }}
+		>
+			{children}
+		</AppThemeContext.Provider>
+	)
+}
+
+const useAppTheme = (): AppThemeContextType => {
+	const context = useContext(AppThemeContext)
+	if (!context) {
+		throw new Error('useTheme must be used within an AppThemeProvider')
+	}
+	return context
+}
+
+export {
+	AppThemeProvider,
+	useAppTheme
+}

src/index.tsx

@@ -11,6 +11,7 @@ import ThemeBuilderPage from './pages/ThemeBuilder';
 import UserProfilePage from './pages/UserProfile'
 import NavigationBar from './components/NavigationBar/NavigationBar'
 import { AuthProvider } from './context/AuthContext'
+import { AppThemeProvider } from './context/AppThemeContext';
 import ProtectedRoute from './routes/ProtectedRoute'
 import LoginProcessPage from './pages/LoginProcess'
 
@@ -67,7 +68,9 @@ const router = createBrowserRouter(routes)
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 	<React.StrictMode>
 		<AuthProvider>
-			<RouterProvider router={router} />
+			<AppThemeProvider>
+				<RouterProvider router={router} />
+			</AppThemeProvider>
 		</AuthProvider>
 	</React.StrictMode>
 )

src/styles/index.css

@@ -2,17 +2,50 @@
 @tailwind components;
 @tailwind utilities;
 
+
 :root {
-	--main-color: #201E50;
-	--smooth-shadow: 
-	0px 1.1px 2.2px rgba(0, 0, 0, 0.02),
-	0px 2.5px 5.3px rgba(0, 0, 0, 0.028),
-	0px 4.8px 10px rgba(0, 0, 0, 0.035),
-	0px 8.5px 17.9px rgba(0, 0, 0, 0.042),
-	0px 15.9px 33.4px rgba(0, 0, 0, 0.05),
-	0px 38px 80px rgba(0, 0, 0, 0.07);
+  --main-color: #201E50;
+  --smooth-shadow: 
+  0px 1.1px 2.2px rgba(0, 0, 0, 0.02),
+  0px 2.5px 5.3px rgba(0, 0, 0, 0.028),
+  0px 4.8px 10px rgba(0, 0, 0, 0.035),
+  0px 8.5px 17.9px rgba(0, 0, 0, 0.042),
+  0px 15.9px 33.4px rgba(0, 0, 0, 0.05),
+  0px 38px 80px rgba(0, 0, 0, 0.07);
+}
+
+:root[app-theme="light"] {
+  /* Light Theme Accent Palette */
+  --accent-50: #020617;
+  --accent-100: #0F172A;
+  --accent-200: #1E293B;
+  --accent-300: #334155;
+  --accent-400: #475569;
+  --accent-500: #64748B;
+  --accent-600: #94A3B8;
+  --accent-700: #CBD5E1;
+  --accent-800: #E2E8F0;
+  --accent-900: #F1F5F9;
+  --accent-950: #F8FAFC;
 }
 
+:root[app-theme="dark"] {
+  /* Dark Theme Accent Palette */
+  --accent-50: #F8FAFC;
+  --accent-100: #F1F5F9;
+  --accent-200: #E2E8F0;
+  --accent-300: #C8D5E1;
+  --accent-400: #94A3B8;
+  --accent-500: #64748B;
+  --accent-600: #475569;
+  --accent-700: #334155;
+  --accent-800: #1E293B;
+  --accent-900: #0F172A;
+  --accent-950: #020617;
+}
+
+
+
 body {
 	margin: 0;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

tailwind.config.js

@@ -7,6 +7,45 @@ export default {
       center: true,
     },
     extend: {
+      colors: {
+        primary: {
+          50: '#E6F8FA',
+          100: '#C2EDF2',
+          200: '#9CE1EA',
+          300: '#75D5E1',
+          400: '#58C9D8',
+          500: '#42B0C5',
+          600: '#3593A1',
+          700: '#29757C',
+          800: '#1E5757',
+          900: '#143838',
+        },
+        secondary: {
+          50: '#F5F3FF',
+          100: '#EDE9FE',
+          200: '#DDD6FE',
+          300: '#C4B5FD',
+          400: '#A78BFA',
+          500: '#8B5CF6',
+          600: '#7C3AED',
+          700: '#6D28D9',
+          800: '#5B21B6',
+          900: '#4C1D95',
+          950: '#2E1065',
+        },
+        accent: {
+          50: 'var(--accent-50)',
+          100: 'var(--accent-100)',
+          200: 'var(--accent-200)',
+          300: 'var(--accent-300)',
+          400: 'var(--accent-400)',
+          500: 'var(--accent-500)',
+          600: 'var(--accent-600)',
+          700: 'var(--accent-700)',
+          800: 'var(--accent-800)',
+          900: 'var(--accent-900)',
+        },
+      },
       keyframes: {
         wiggle: {
           '0%, 100%': { transform: 'rotate(-3deg)' },
@@ -22,7 +61,6 @@ export default {
         wiggle: 'wiggle 1s ease-in-out infinite',
         pulse: 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       }
-      // colors: {},
     },
   },
   plugins: [],