feat/#393 added dark-light theme toggle button

apps/host/src/components/ThemeWrapper.tsx

@@ -0,0 +1,28 @@
+import styles from '@/styles.module.scss';
+import { ReactElement, createContext, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'light',
+  //This is for not making toggleTheme Optional since it does have a void function
+  toggleTheme: () => {},
+});
+
+export const ThemeWrapper = ({ children }: { children: ReactElement }) => {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  const toggleTheme = (): void => setTheme(theme === 'light' ? 'dark' : 'light');
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      <div className={styles.containerWrapper} data-theme={theme}>
+        {children}
+      </div>
+    </ThemeContext.Provider>
+  );
+};

apps/host/src/components/common/navbar/navbar.module.scss

@@ -5,7 +5,9 @@
   padding: 1rem;
   margin-bottom: 1rem;
   background-color: var(--bg-navbar);
-  box-shadow: 0 1px 3px 0 var(--shadow-navbar), 0 1px 2px -1px var(--shadow-navbar);
+  box-shadow:
+    0 1px 3px 0 var(--shadow-navbar),
+    0 1px 2px -1px var(--shadow-navbar);
   transition: all 150ms ease-in-out;
 
   --icon-container-size: 26px;
@@ -46,7 +48,6 @@
     height: var(--icon-container-size);
     color: var(--text-body);
 
-
     & > svg {
       width: var(--github-svg-size);
       height: var(--github-svg-size);
@@ -70,3 +71,9 @@
     }
   }
 }
+
+.themeButton {
+  border: none;
+  color: var(--text-link);
+  background-color: inherit;
+}

apps/host/src/components/common/navbar/navbar.tsx

@@ -1,7 +1,11 @@
+import { useContext } from 'react';
 import styles from './navbar.module.scss';
 import { logo } from '@fmc/assets/images';
+import { ThemeContext } from '../../ThemeWrapper';
+import { Sun, Moon } from 'lucide-react';
 
 function Navbar({ children, title }: { children?: React.ReactNode; title?: string }) {
+  const { theme, toggleTheme } = useContext(ThemeContext);
   return (
     <nav className={styles.navbar}>
       <a className={styles.logo} href="/frontend-mini-challenges/">
@@ -24,6 +28,9 @@ function Navbar({ children, title }: { children?: React.ReactNode; title?: strin
             />
           </svg>
         </a>
+        <button className={styles.themeButton} onClick={toggleTheme}>
+          {theme === 'light' ? <Sun /> : <Moon />}
+        </button>
       </div>
     </nav>
   );

apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.module.scss

@@ -25,7 +25,8 @@
     opacity: 0.7;
     transition: all 0.2s ease;
   }
-  .searchInput:focus, .searchInput:hover {
+  .searchInput:focus,
+  .searchInput:hover {
     border-color: var(--text-link);
     & + .searchIcon {
       opacity: 1;
@@ -84,9 +85,11 @@
   padding: 10px;
   overflow: hidden;
   background-color: white;
-  border: 1px solid rgb(0 0 0 / 15%);
-  box-shadow: 0 6px 8px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--card-shadow);
+  box-shadow: 0 6px 8px 0 var(--card-shadow);
   transition: all 0.2s ease-in-out;
+  background-color: var(--bg-body);
+  color: var(--text-body);
 
   &:hover {
     box-shadow: 0 6px 8px 0 rgb(0 0 0 / 30%);
@@ -137,7 +140,7 @@
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
-    color: black;
+    color: var(--text-body);
 
     & > img {
       width: 25px;
@@ -148,7 +151,7 @@
   }
 
   .name {
-    color: black;
+    color: var(--text-body);
   }
 
   &.medium h3 {

apps/host/src/main.tsx

@@ -5,6 +5,7 @@ import HomePage from './pages/home';
 import LeaderboardPage from './pages/leaderboard';
 import './index.css';
 import Challenges from './pages/challenges';
+import { ThemeWrapper } from './components/ThemeWrapper';
 
 const router = createHashRouter([
   {
@@ -23,6 +24,8 @@ const router = createHashRouter([
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <ThemeWrapper>
+      <RouterProvider router={router} />
+    </ThemeWrapper>
   </React.StrictMode>
 );

apps/host/src/styles.module.scss

@@ -1,3 +1,10 @@
+.containerWrapper {
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-body);
+  color: var(--text-body);
+}
+
 .container {
   max-width: min(90%, 1200px);
   margin: 0 auto;

package.json

@@ -28,5 +28,9 @@
   "workspaces": [
     "apps/*",
     "shared/*"
-  ]
+  ],
+  "dependencies": {
+    "lucide": "^0.344.0",
+    "lucide-react": "^0.344.0"
+  }
 }

shared/styles/theme.css

@@ -13,21 +13,30 @@
 
   /* Links */
   --text-link: blue;
+
+  /* Challenge Card */
+  --card-shadow: rgb(0 0 0 / 15%);
 }
 
 /* Dark override for above variables */
 
-:root.dark {
+[data-theme='dark'] {
   /* Default body colors */
   --bg-body: #030712;
   --text-body: #e5e7eb;
 
+  --bg-navbar: #030712;
+  --shadow-navbar: rgba(150 150 150 / 0.2);
+
   /* Footer-specific colors (same as navbar) */
   --bg-footer: var(--bg-body);
   --shadow-footer: #1f2937;
 
   /* Links */
   --text-link: #6366f1;
 
+  /* Challenge Card */
+  --card-shadow: rgb(150 150 150/ 20%);
+
   color-scheme: dark;
 }