styling light & dark modes

src/App.css

@@ -1,3 +1,6 @@
 .App {
   min-height: 100%;
+}
+.App.dark {
+  background: #333;
 }

src/App.js

@@ -1,5 +1,6 @@
 import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useTheme } from './hooks/useTheme'
 
 // components
 import Navbar from "./components/Navbar";
@@ -12,8 +13,10 @@ import Recipe from "./pages/recipe/Recipe";
 import Search from "./pages/search/Search";
 
 function App() {
+  const { mode } = useTheme()
+
   return (
-    <div className="App">
+    <div className={`App ${mode}`}>
       <BrowserRouter>
         <Navbar />
         <ThemeSelector />

src/components/RecipeList.css

@@ -44,3 +44,11 @@
   border-radius: 4px;
   margin: 20px auto 0;
 }
+.recipe-list .card.dark {
+  background: #555;
+}
+.recipe-list .card.dark p,
+.recipe-list .card.dark h3,
+.recipe-list .card.dark div {
+  color: #e4e4e4;
+}

src/components/RecipeList.js

@@ -1,17 +1,20 @@
 import { Link } from "react-router-dom";
+import { useTheme } from "../hooks/useTheme";
 
 // styles
 import "./RecipeList.css";
 
 export default function RecipeList({ recipes }) {
+  const { mode } = useTheme();
+
   if (recipes.length === 0) {
     return <div className="error">No recipes to load...</div>;
   }
 
   return (
     <div className="recipe-list">
       {recipes.map((recipe) => (
-        <div key={recipe.id} className="card">
+        <div key={recipe.id} className={`card ${mode}`}>
           <h3>{recipe.title}</h3>
           <p>{recipe.cookingTime} to make.</p>
           <div>{recipe.method.substring(0, 100)}...</div>

src/components/ThemeSelector.js

@@ -3,15 +3,15 @@ import modeIcon from "../assets/mode-icon.svg"
 // Styles
 import "./ThemeSelector.css";
 
-const themeColors = ["#58249c", "#249c6b", "#d9534f","#f0ad4e"];
+const themeColors = ["#58249c", "#249c6b", "#d9534f"];
 
 export default function ThemeSelector() {
   const { changeColor,mode,changeMode } = useTheme();
 
     const changeModeHandler = () => {
         changeMode(mode === 'dark' ? 'light' : 'dark')
     }
-    console.log(mode)
+    // console.log(mode)
 
   return (
     <div className="theme-selector">

src/context/ThemeContext.js

@@ -20,7 +20,7 @@ const themeReducer = (state, action) => {
 
 export function ThemeProvider({ children }) {
   const [state, dispatch] = useReducer(themeReducer, {
-    defaultColor: "#58249c",
+    defaultColor: "#555",
     mode: "dark",
   });
 

src/pages/recipe/Recipe.css

@@ -6,6 +6,9 @@
   padding: 40px;
   box-sizing: border-box;
 }
+.recipe>h2{
+  text-decoration: underline;
+}
 .recipe ul {
   display: flex;
   padding: 0;
@@ -26,3 +29,16 @@
 .method {
   text-align: left;
 }
+/* dark mode */
+.recipe.dark {
+  background: #555;
+  color: #e4e4e4;
+}
+.recipe.dark>h2{
+  color: #e4e4e4;
+  text-decoration: underline;
+}
+.recipe.dark li{
+  color: #e4e4e4;
+}
+

src/pages/recipe/Recipe.js

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router";
 
 // Hooks
 import { useFetch } from "../../hooks/useFetch";
+import { useTheme } from "../../hooks/useTheme";
 
 // Styles
 import "./Recipe.css";
@@ -12,6 +13,7 @@ export default function Recipe() {
   const url = "http://localhost:3000/recipes/" + id;
   const { data: recipe, isPending, error } = useFetch(url);
   const navigate = useNavigate();
+  const {mode} = useTheme()
 
   useEffect(() => {
     if (error) {
@@ -23,7 +25,7 @@ export default function Recipe() {
   }, [error, navigate]);
 
   return (
-    <div className="recipe">
+    <div className={`recipe ${ mode }`}>
       {error && <div>{error}</div>}
       {isPending && <div>Loading...</div>}
       {recipe && (