diff --git a/src/App.jsx b/src/App.jsx index d077eff..0a4c7c3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,25 +9,29 @@ import Error404 from './components/Error404'; import HomePage from './components/HomePage'; import Books from './components/Books'; import ReactGA from 'react-ga4'; +import { ThemeProvider } from './context/ThemeContext'; + const trackingId = import.meta.env.VITE_APP_GA_TRACKING_ID; ReactGA.initialize(trackingId); const App = () => { return ( - -
- - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
- + + +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ + ); }; diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx index a3e0a70..b51a87a 100644 --- a/src/components/HomePage.jsx +++ b/src/components/HomePage.jsx @@ -1,16 +1,18 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Link } from 'react-router-dom'; import ReactGA from 'react-ga4'; import { Sun, Moon, ChevronDown, ChevronUp, X } from 'lucide-react'; import Navbar from './Navbar'; +import { ThemeContext } from '../context/ThemeContext'; + const ContributionModal = ({ isOpen, onClose, darkMode }) => { if (!isOpen) return null; return (
-

Help Us Grow! 🌱

- mldl.study is an open-source community project. We rely on contributions + mldl.study is an open-source community project. We rely on contributions from learners like you to make this resource better and more comprehensive.

@@ -84,9 +86,8 @@ const FAQItem = ({ question, answer, isOpen, onClick, darkMode }) => ( )}

{answer} @@ -96,18 +97,23 @@ const FAQItem = ({ question, answer, isOpen, onClick, darkMode }) => ( ); const HomePage = () => { + + const { theme, toggleTheme } = useContext(ThemeContext); + const darkMode = theme === 'dark'; + ReactGA.send({ hitType: 'pageview', page: window.location.pathname }); - const [darkMode, setDarkMode] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [openFAQs, setOpenFAQs] = useState({}); - + // New state for contribution modal const [isContributionModalOpen, setIsContributionModalOpen] = useState(false); useEffect(() => { - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + + // getting the theme from localstorage is done in the ThemeContext file + // const savedDarkMode = localStorage.getItem('darkMode') === 'true'; + // setDarkMode(savedDarkMode); + // document.documentElement.classList.toggle('dark', savedDarkMode); // Check if modal has been shown before const hasSeenModal = localStorage.getItem('contributionModalSeen'); @@ -120,10 +126,10 @@ const HomePage = () => { const toggleDarkMode = () => { setIsTransitioning(true); - const newDarkMode = !darkMode; - setDarkMode(newDarkMode); - document.documentElement.classList.toggle('dark', newDarkMode); - localStorage.setItem('darkMode', newDarkMode); + // toggle the context theme & set the new one in localStorage + const newTheme = darkMode ? 'light' : 'dark'; + toggleTheme(); + localStorage.setItem('theme', newTheme); setTimeout(() => setIsTransitioning(false), 300); }; @@ -136,114 +142,114 @@ const HomePage = () => { return ( <> - setIsContributionModalOpen(false)} darkMode={darkMode} />

- - -
-
+ +
+

Your Roadmap to AI Mastery

-

- Transform from beginner to machine learning professional with our comprehensive, - practical learning path designed for the Indian tech landscape. +

+ Transform from beginner to machine learning professional with our comprehensive, + practical learning path designed for the Indian tech landscape.

- • 100% Free • Community-Driven • Real-World Skills + • 100% Free • Community-Driven • Real-World Skills
- - Start Prerequisites Roadmap - - - Start ML Roadmap - - - Start DL Roadmap - - - Start GenAI Roadmap - -
-
-

What's in These Roadmaps?

-

- These roadmaps contain a comprehensive set of resources to help you on your journey, including: -

-
    -
  • Video lectures
    • -
  • Animations and visualizations
    • -
  • Simulations to practice concepts
    • -
  • Articles and research papers
    • -
  • Interactive exercises and quizzes
    • -
-

- These resources are designed to give you both theoretical knowledge and hands-on experience, ensuring a well-rounded learning process. -

-
- -
-

Watch This Before You Start!

- -
- Watch this video -
- - - -
+ + Start Prerequisites Roadmap + + + Start ML Roadmap + + + Start DL Roadmap + + + Start GenAI Roadmap + +
+
+

What's in These Roadmaps?

+

+ These roadmaps contain a comprehensive set of resources to help you on your journey, including: +

+
    +
  • Video lectures
    • +
  • Animations and visualizations
    • +
  • Simulations to practice concepts
    • +
  • Articles and research papers
    • +
  • Interactive exercises and quizzes
    • +
+

+ These resources are designed to give you both theoretical knowledge and hands-on experience, ensuring a well-rounded learning process. +

+
+ +
+

Watch This Before You Start!

+ +
+ Watch this video +
+ + +
- -

- This was the sole video that sparked my interest in this field, so it is highly recommended to watch it first. It's not at all technical, but it will spark your interest in the field. -

+
+ +

+ This was the sole video that sparked my interest in this field, so it is highly recommended to watch it first. It's not at all technical, but it will spark your interest in the field. +

+
+
+

Frequently Asked Questions

+
+ {FAQ_DATA.map((faq, index) => ( + toggleFAQ(index)} + darkMode={darkMode} + /> + ))}
-
-

Frequently Asked Questions

-
- {FAQ_DATA.map((faq, index) => ( - toggleFAQ(index)} - darkMode={darkMode} - /> - ))}
-
-
+
); diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx new file mode 100644 index 0000000..dce043f --- /dev/null +++ b/src/context/ThemeContext.jsx @@ -0,0 +1,31 @@ +// context/ThemeContext.js +import React, { createContext, useState, useEffect } from 'react'; + +export const ThemeContext = createContext(); + +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState('dark'); + + // Check system's theme on initial load + useEffect(() => { + const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + localStorage.setItem('theme', isDarkMode ? 'dark' : 'light'); + setTheme(isDarkMode ? 'dark' : 'light'); + }, []); + + // Toggle between light and dark themes + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + // Add theme class to the root element for CSS styling + useEffect(() => { + document.documentElement.className = theme; + }, [theme]); + + return ( + + {children} + + ); +};