diff --git a/index.html b/index.html index b683f0b..2e32a52 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,31 @@ ML/DL RoadMap +
diff --git a/src/App.jsx b/src/App.jsx index 233c7fb..4213ac7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,7 +19,7 @@ if (trackingId) { const App = () => { return ( -
+
} /> } /> diff --git a/src/components/Books.jsx b/src/components/Books.jsx index ecbbe9a..6f32a52 100644 --- a/src/components/Books.jsx +++ b/src/components/Books.jsx @@ -36,9 +36,18 @@ const Books = () => { const [selectedCategory, setSelectedCategory] = useState('all'); useEffect(() => { - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); }, []); const toggleDarkMode = () => { diff --git a/src/components/DeepLearningRoadmap.jsx b/src/components/DeepLearningRoadmap.jsx index 70a4853..72253b4 100644 --- a/src/components/DeepLearningRoadmap.jsx +++ b/src/components/DeepLearningRoadmap.jsx @@ -45,9 +45,18 @@ const DeepLearningRoadmap = () => { setTopicProgress(parsedProgress); } - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); const checkMobile = () => { setIsMobile(window.innerWidth < 768); diff --git a/src/components/GenerativeAIRoadmap.jsx b/src/components/GenerativeAIRoadmap.jsx index c063271..902e4a0 100644 --- a/src/components/GenerativeAIRoadmap.jsx +++ b/src/components/GenerativeAIRoadmap.jsx @@ -43,9 +43,18 @@ const GenerativeAIRoadmap = () => { setTopicProgress(parsedProgress); } - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); const checkMobile = () => { setIsMobile(window.innerWidth < 768); diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx index 3989055..83c677d 100644 --- a/src/components/HomePage.jsx +++ b/src/components/HomePage.jsx @@ -115,16 +115,18 @@ const HomePage = () => { useEffect(() => { const savedDarkMode = localStorage.getItem('darkMode'); - // If no preference is saved (first visit), default to dark mode - const shouldUseDarkMode = savedDarkMode === null ? true : savedDarkMode === 'true'; + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + // Use saved preference if available + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } setDarkMode(shouldUseDarkMode); document.documentElement.classList.toggle('dark', shouldUseDarkMode); - - // Save the default preference if it's a first visit - if (savedDarkMode === null) { - localStorage.setItem('darkMode', 'true'); - } // Check if modal has been shown before const hasSeenModal = localStorage.getItem('contributionModalSeen'); diff --git a/src/components/Journey.jsx b/src/components/Journey.jsx index a274fbb..4b55cc8 100644 --- a/src/components/Journey.jsx +++ b/src/components/Journey.jsx @@ -113,9 +113,18 @@ const Journey = () => { const [isTransitioning, setIsTransitioning] = useState(false); useEffect(() => { - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); }, []); const toggleDarkMode = () => { diff --git a/src/components/MachineLearningRoadmap.jsx b/src/components/MachineLearningRoadmap.jsx index 8ab9442..706fb62 100644 --- a/src/components/MachineLearningRoadmap.jsx +++ b/src/components/MachineLearningRoadmap.jsx @@ -43,9 +43,18 @@ const MachineLearningRoadmap = () => { setTopicProgress(parsedProgress); } - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); // Check if mobile const checkMobile = () => { diff --git a/src/components/PrerequisiteRoadmap.jsx b/src/components/PrerequisiteRoadmap.jsx index 4a858d1..49ede07 100644 --- a/src/components/PrerequisiteRoadmap.jsx +++ b/src/components/PrerequisiteRoadmap.jsx @@ -42,9 +42,18 @@ const PrerequisiteRoadmap = () => { setTopicProgress(parsedProgress); } - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); const checkMobile = () => { setIsMobile(window.innerWidth < 768); diff --git a/src/components/QuestionBank.jsx b/src/components/QuestionBank.jsx index 1a00139..5898606 100644 --- a/src/components/QuestionBank.jsx +++ b/src/components/QuestionBank.jsx @@ -15,7 +15,11 @@ const QuestionBank = () => { const [error, setError] = useState(null); const [darkMode, setDarkMode] = useState(() => { const saved = localStorage.getItem('darkMode'); - return saved ? JSON.parse(saved) : false; + if (saved !== null) { + return JSON.parse(saved); + } + // Detect browser's theme preference + return window.matchMedia('(prefers-color-scheme: dark)').matches; }); const toggleDarkMode = () => { diff --git a/src/components/ResearchPaper.jsx b/src/components/ResearchPaper.jsx index b193b25..288f841 100644 --- a/src/components/ResearchPaper.jsx +++ b/src/components/ResearchPaper.jsx @@ -16,9 +16,19 @@ const ResearchPaper = () => { localStorage.setItem('darkMode', newDarkMode); }; useEffect(() => { - const savedDarkMode = localStorage.getItem('darkMode') === 'true'; - setDarkMode(savedDarkMode); - document.documentElement.classList.toggle('dark', savedDarkMode); + const savedDarkMode = localStorage.getItem('darkMode'); + let shouldUseDarkMode; + + if (savedDarkMode !== null) { + // Use saved preference if available + shouldUseDarkMode = savedDarkMode === 'true'; + } else { + // Detect browser's theme preference + shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + setDarkMode(shouldUseDarkMode); + document.documentElement.classList.toggle('dark', shouldUseDarkMode); }, []); const categoryInfo = { diff --git a/tailwind.config.js b/tailwind.config.js index 8145cb6..32a2563 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,7 @@ module.exports = { "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], + darkMode: 'class', theme: { extend: {}, },