Add light and dark theme using context and custom hooks

package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "postcss": "^8.5.1",
     "prop-types": "^15.8.1",
     "tailwindcss": "^3.4.17",

src/App.jsx

@@ -1,10 +1,19 @@
-import { Projects } from './components';
+import clsx from 'clsx';
+import { Header, Projects } from './components';
 
 import { projects } from './data';
+import { useTheme } from './hooks';
 
 export default function App() {
+  const { isDarkMode } = useTheme();
   return (
-    <div className="container mx-auto w-full flex justify-center py-6">
+    <div
+      className={clsx(
+        'container mx-auto w-full flex flex-col gap-8 justify-center py-6',
+        isDarkMode && 'bg-gray-800'
+      )}
+    >
+      <Header />
       <Projects projects={projects} />
     </div>
   );

src/components/Header.jsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+import { useTheme } from '../hooks';
+
+export const Header = () => {
+  const { isDarkMode, toggleTheme } = useTheme();
+
+  return (
+    <header
+      className={clsx(
+        'flex justify-between items-center p-4',
+        isDarkMode ? 'app-dark' : 'app-light'
+      )}
+    >
+      <h1 className="text-xl font-bold">React JS Fall 2024</h1>
+      <button
+        onClick={toggleTheme}
+        className="px-4 py-2 border rounded-md text-sm font-medium"
+      >
+        {isDarkMode ? 'Light Mode' : 'Dark Mode'}
+      </button>
+    </header>
+  );
+};

src/components/index.jsx

@@ -1 +1,2 @@
 export * from './project/Projects';
+export * from './Header';

src/components/project/Project.jsx

@@ -1,8 +1,11 @@
+import clsx from 'clsx';
 import { useState } from 'react';
 
+import { useTheme } from '../../hooks';
 import { ProjectPropType } from '../propTypesDefs';
 
 export const Project = ({ project }) => {
+  const { isDarkMode } = useTheme();
   const [selectedContributor, setSelectedContributor] = useState();
 
   return (
@@ -12,7 +15,12 @@ export const Project = ({ project }) => {
         {project.contributors.map((contributor) => (
           <button
             key={contributor}
-            className="text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-200 rounded-md px-4 py-2"
+            className={clsx(
+              'text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-200 rounded-md px-4 py-2',
+              isDarkMode
+                ? 'text-gray-300 hover:text-gray-400 border-gray-600'
+                : 'text-gray-500 hover:text-gray-700 border-gray-200'
+            )}
             onClick={() => setSelectedContributor(contributor)}
           >
             {contributor}

src/components/project/Projects.jsx

@@ -1,12 +1,22 @@
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 import { ProjectPropType } from '../propTypesDefs';
 
+import { useTheme } from '../../hooks';
+
 import { Project } from './Project';
 
 export const Projects = ({ projects }) => {
+  const { isDarkMode } = useTheme();
+
   return (
-    <div className="container space-y-6">
+    <div
+      className={clsx(
+        'container space-y-6',
+        isDarkMode ? 'app-dark' : 'app-light'
+      )}
+    >
       {projects.map((project) => (
         <Project key={project.name} project={project} />
       ))}

src/contexts/ThemeContext.jsx

@@ -0,0 +1,26 @@
+import { createContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+export const ThemeContext = createContext({
+  isDarkMode: false,
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    // document.documentElement.classList.toggle('dark', !isDarkMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+ThemeProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/contexts/index.jsx

@@ -0,0 +1 @@
+export * from './ThemeContext';

src/hooks/index.jsx

@@ -0,0 +1 @@
+export * from './useTheme';

src/hooks/useTheme.jsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts';
+
+export const useTheme = () => {
+  return useContext(ThemeContext);
+};

src/index.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.app-dark {
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1)) !important;
+}
+
+.app-light {
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
+}

src/main.jsx

@@ -1,13 +1,16 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { ThemeProvider } from './contexts';
 import App from './App';
 
 import './index.css';
 
 const root = createRoot(document.getElementById('react-app-root'));
 root.render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>
 );

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class', // Enable dark mode
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},