Skip to content

Commit 330b732

Browse files
ItsMeArm00nItsMeArm00n
committed
Fixes anshaneja5#5
Fixes anshaneja5#5
1 parent 1b45826 commit 330b732

12 files changed

+126
-30
lines changed

‎index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,31 @@
55
<link rel="icon" type="image/svg+xml" href="/ml-roadmap2.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>ML/DL RoadMap</title>
8+
<script>
9+
(function() {
10+
try {
11+
const saved = localStorage.getItem('darkMode');
12+
const hasSaved = saved !== null;
13+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
14+
const isDark = hasSaved ? saved === 'true' : prefersDark;
15+
if (isDark) document.documentElement.classList.add('dark');
16+
else document.documentElement.classList.remove('dark');
17+
18+
// If no saved preference, follow system changes dynamically
19+
if (!hasSaved && window.matchMedia) {
20+
const mql = window.matchMedia('(prefers-color-scheme: dark)');
21+
const apply = (e) => {
22+
if (localStorage.getItem('darkMode') === null) {
23+
if (e.matches) document.documentElement.classList.add('dark');
24+
else document.documentElement.classList.remove('dark');
25+
}
26+
};
27+
if (mql.addEventListener) mql.addEventListener('change', apply);
28+
else if (mql.addListener) mql.addListener(apply);
29+
}
30+
} catch (e) { /* noop */ }
31+
})();
32+
</script>
833
</head>
934
<body>
1035
<div id="root"></div>

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (trackingId) {
1919
const App = () => {
2020
return (
2121
<Router>
22-
<div className="min-h-screen bg-gray-100">
22+
<div className="min-h-screen bg-gray-100 dark:bg-gray-900">
2323
<Routes>
2424
<Route path="/" element={<HomePage />} />
2525
<Route path="/deeplearning" element={<DeepLearning />} />

‎src/components/Books.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,18 @@ const Books = () => {
3636
const [selectedCategory, setSelectedCategory] = useState('all');
3737

3838
useEffect(() => {
39-
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
40-
setDarkMode(savedDarkMode);
41-
document.documentElement.classList.toggle('dark', savedDarkMode);
39+
const savedDarkMode = localStorage.getItem('darkMode');
40+
let shouldUseDarkMode;
41+
42+
if (savedDarkMode !== null) {
43+
shouldUseDarkMode = savedDarkMode === 'true';
44+
} else {
45+
// Detect browser's theme preference
46+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
47+
}
48+
49+
setDarkMode(shouldUseDarkMode);
50+
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
4251
}, []);
4352

4453
const toggleDarkMode = () => {

‎src/components/DeepLearningRoadmap.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,18 @@ const DeepLearningRoadmap = () => {
4545
setTopicProgress(parsedProgress);
4646
}
4747

48-
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
49-
setDarkMode(savedDarkMode);
50-
document.documentElement.classList.toggle('dark', savedDarkMode);
48+
const savedDarkMode = localStorage.getItem('darkMode');
49+
let shouldUseDarkMode;
50+
51+
if (savedDarkMode !== null) {
52+
shouldUseDarkMode = savedDarkMode === 'true';
53+
} else {
54+
// Detect browser's theme preference
55+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
56+
}
57+
58+
setDarkMode(shouldUseDarkMode);
59+
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
5160

5261
const checkMobile = () => {
5362
setIsMobile(window.innerWidth < 768);

‎src/components/GenerativeAIRoadmap.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,18 @@ const GenerativeAIRoadmap = () => {
4343
setTopicProgress(parsedProgress);
4444
}
4545

46-
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
47-
setDarkMode(savedDarkMode);
48-
document.documentElement.classList.toggle('dark', savedDarkMode);
46+
const savedDarkMode = localStorage.getItem('darkMode');
47+
let shouldUseDarkMode;
48+
49+
if (savedDarkMode !== null) {
50+
shouldUseDarkMode = savedDarkMode === 'true';
51+
} else {
52+
// Detect browser's theme preference
53+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
54+
}
55+
56+
setDarkMode(shouldUseDarkMode);
57+
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
4958

5059
const checkMobile = () => {
5160
setIsMobile(window.innerWidth < 768);

‎src/components/HomePage.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,16 +115,18 @@ const HomePage = () => {
115115

116116
useEffect(() => {
117117
const savedDarkMode = localStorage.getItem('darkMode');
118-
// If no preference is saved (first visit), default to dark mode
119-
const shouldUseDarkMode = savedDarkMode === null ? true : savedDarkMode === 'true';
118+
let shouldUseDarkMode;
119+
120+
if (savedDarkMode !== null) {
121+
// Use saved preference if available
122+
shouldUseDarkMode = savedDarkMode === 'true';
123+
} else {
124+
// Detect browser's theme preference
125+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
126+
}
120127

121128
setDarkMode(shouldUseDarkMode);
122129
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
123-
124-
// Save the default preference if it's a first visit
125-
if (savedDarkMode === null) {
126-
localStorage.setItem('darkMode', 'true');
127-
}
128130

129131
// Check if modal has been shown before
130132
const hasSeenModal = localStorage.getItem('contributionModalSeen');

‎src/components/Journey.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,18 @@ const Journey = () => {
113113
const [isTransitioning, setIsTransitioning] = useState(false);
114114

115115
useEffect(() => {
116-
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
117-
setDarkMode(savedDarkMode);
118-
document.documentElement.classList.toggle('dark', savedDarkMode);
116+
const savedDarkMode = localStorage.getItem('darkMode');
117+
let shouldUseDarkMode;
118+
119+
if (savedDarkMode !== null) {
120+
shouldUseDarkMode = savedDarkMode === 'true';
121+
} else {
122+
// Detect browser's theme preference
123+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
124+
}
125+
126+
setDarkMode(shouldUseDarkMode);
127+
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
119128
}, []);
120129

121130
const toggleDarkMode = () => {

‎src/components/MachineLearningRoadmap.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,18 @@ const MachineLearningRoadmap = () => {
4343
setTopicProgress(parsedProgress);
4444
}
4545

46-
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
47-
setDarkMode(savedDarkMode);
48-
document.documentElement.classList.toggle('dark', savedDarkMode);
46+
const savedDarkMode = localStorage.getItem('darkMode');
47+
let shouldUseDarkMode;
48+
49+
if (savedDarkMode !== null) {
50+
shouldUseDarkMode = savedDarkMode === 'true';
51+
} else {
52+
// Detect browser's theme preference
53+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
54+
}
55+
56+
setDarkMode(shouldUseDarkMode);
57+
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
4958

5059
// Check if mobile
5160
const checkMobile = () => {

‎src/components/PrerequisiteRoadmap.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,18 @@ const PrerequisiteRoadmap = () => {
4242
setTopicProgress(parsedProgress);
4343
}
4444

45-
const savedDarkMode = localStorage.getItem('darkMode') === 'true';
46-
setDarkMode(savedDarkMode);
47-
document.documentElement.classList.toggle('dark', savedDarkMode);
45+
const savedDarkMode = localStorage.getItem('darkMode');
46+
let shouldUseDarkMode;
47+
48+
if (savedDarkMode !== null) {
49+
shouldUseDarkMode = savedDarkMode === 'true';
50+
} else {
51+
// Detect browser's theme preference
52+
shouldUseDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
53+
}
54+
55+
setDarkMode(shouldUseDarkMode);
56+
document.documentElement.classList.toggle('dark', shouldUseDarkMode);
4857

4958
const checkMobile = () => {
5059
setIsMobile(window.innerWidth < 768);

‎src/components/QuestionBank.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ const QuestionBank = () => {
1515
const [error, setError] = useState(null);
1616
const [darkMode, setDarkMode] = useState(() => {
1717
const saved = localStorage.getItem('darkMode');
18-
return saved ? JSON.parse(saved) : false;
18+
if (saved !== null) {
19+
return JSON.parse(saved);
20+
}
21+
// Detect browser's theme preference
22+
return window.matchMedia('(prefers-color-scheme: dark)').matches;
1923
});
2024

2125
const toggleDarkMode = () => {

0 commit comments

Comments
 (0)