Skip to content

Commit 5c514dd

Browse files
patmendoza6745patmendoza6745
committed
Attempt 2 for dark mode
1 parent 0142a13 commit 5c514dd

File tree

3 files changed

+136
-41
lines changed

3 files changed

+136
-41
lines changed

‎_includes/dark-mode-toggle.html‎

Lines changed: 64 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,75 @@
66
</div>
77

88
<script>
9-
// Dark mode functionality
9+
// Dark mode functionality - apply immediately to avoid flash
1010
(function() {
11-
const toggle = document.getElementById('dark-mode-toggle');
12-
const body = document.body;
13-
const icon = toggle.querySelector('.toggle-icon');
14-
15-
// Check for saved theme preference or default to light mode
11+
// Apply theme immediately from localStorage
1612
const savedTheme = localStorage.getItem('crup-theme') || 'light';
13+
document.documentElement.setAttribute('data-theme', savedTheme);
14+
document.body.setAttribute('data-theme', savedTheme);
1715

18-
function setTheme(theme) {
19-
if (theme === 'dark') {
20-
body.setAttribute('data-theme', 'dark');
21-
icon.textContent = '☀️';
22-
localStorage.setItem('crup-theme', 'dark');
23-
} else {
24-
body.setAttribute('data-theme', 'light');
25-
icon.textContent = '🌙';
26-
localStorage.setItem('crup-theme', 'light');
16+
// Wait for DOM to load for the toggle functionality
17+
document.addEventListener('DOMContentLoaded', function() {
18+
// Prevent multiple initializations
19+
if (window.darkModeInitialized) return;
20+
window.darkModeInitialized = true;
21+
22+
const toggle = document.getElementById('dark-mode-toggle');
23+
if (!toggle) {
24+
console.warn('Dark mode toggle button not found');
25+
return;
2726
}
28-
}
29-
30-
// Apply saved theme on page load
31-
setTheme(savedTheme);
32-
33-
// Toggle theme on button click
34-
toggle.addEventListener('click', function() {
35-
const currentTheme = body.getAttribute('data-theme');
36-
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
37-
setTheme(newTheme);
38-
});
39-
40-
// Listen for system theme changes
41-
if (window.matchMedia) {
42-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
43-
if (!localStorage.getItem('crup-theme')) {
44-
setTheme(e.matches ? 'dark' : 'light');
27+
28+
const body = document.body;
29+
const html = document.documentElement;
30+
const icon = toggle.querySelector('.toggle-icon');
31+
32+
if (!icon) {
33+
console.warn('Dark mode toggle icon not found');
34+
return;
35+
}
36+
37+
function setTheme(theme) {
38+
if (theme === 'dark') {
39+
body.setAttribute('data-theme', 'dark');
40+
html.setAttribute('data-theme', 'dark');
41+
body.classList.add('dark-theme'); // Additional class for fallback
42+
html.classList.add('dark-theme');
43+
icon.textContent = '☀️';
44+
localStorage.setItem('crup-theme', 'dark');
45+
console.log('Dark theme applied successfully');
46+
47+
// Force a style recalculation
48+
body.style.backgroundColor = '#0d1117';
49+
body.style.color = '#f0f6fc';
50+
} else {
51+
body.setAttribute('data-theme', 'light');
52+
html.setAttribute('data-theme', 'light');
53+
body.classList.remove('dark-theme');
54+
html.classList.remove('dark-theme');
55+
icon.textContent = '🌙';
56+
localStorage.setItem('crup-theme', 'light');
57+
console.log('Light theme applied successfully');
58+
59+
// Reset to CSS variables
60+
body.style.backgroundColor = '';
61+
body.style.color = '';
4562
}
63+
}
64+
65+
// Apply saved theme and set icon
66+
setTheme(savedTheme);
67+
68+
// Toggle theme on button click
69+
toggle.addEventListener('click', function(e) {
70+
e.preventDefault();
71+
const currentTheme = body.getAttribute('data-theme');
72+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
73+
setTheme(newTheme);
74+
console.log(`Theme toggled from ${currentTheme} to ${newTheme}`);
4675
});
47-
}
76+
77+
console.log('Dark mode toggle initialized successfully');
78+
});
4879
})();
4980
</script>

‎_sass/color_schemes/wider.scss‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ $content-width: 75rem;
1919
--card-shadow: rgba(0, 0, 0, 0.1);
2020
}
2121

22-
[data-theme="dark"] {
22+
html[data-theme="dark"],
23+
body[data-theme="dark"] {
2324
// Dark theme variables
2425
--bg-color: #0d1117;
2526
--text-color: #f0f6fc;
@@ -36,17 +37,56 @@ $content-width: 75rem;
3637
--card-shadow: rgba(0, 0, 0, 0.3);
3738
}
3839

40+
[data-theme="dark"] {
41+
// Dark theme variables (fallback)
42+
--bg-color: #0d1117;
43+
--text-color: #f0f6fc;
44+
--primary-color: #58a6ff;
45+
--primary-hover: #79c0ff;
46+
--border-color: #30363d;
47+
--table-header-bg: #161b22;
48+
--table-stripe-bg: #0d1117;
49+
--table-border: #21262d;
50+
--table-row-border: #21262d;
51+
--blockquote-bg: #161b22;
52+
--hr-color: #21262d;
53+
--card-bg: #161b22;
54+
--card-shadow: rgba(0, 0, 0, 0.3);
55+
}
56+
3957
// Global styles
4058

4159
body {
4260
margin: 0 auto;
4361
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
4462
font-size: 1.1rem;
45-
background: var(--bg-color);
46-
color: var(--text-color);
63+
background: var(--bg-color) !important;
64+
color: var(--text-color) !important;
4765
transition: background-color 0.3s ease, color 0.3s ease;
4866
}
4967

68+
// Additional dark mode overrides for just-the-docs theme
69+
[data-theme="dark"] {
70+
.main-content-wrap,
71+
.main-content,
72+
.site-nav,
73+
.site-header,
74+
.page-wrap {
75+
background-color: var(--bg-color) !important;
76+
color: var(--text-color) !important;
77+
}
78+
79+
// Override any theme-specific background colors
80+
.main {
81+
background-color: var(--bg-color) !important;
82+
}
83+
84+
// Make sure text content uses our color variables
85+
p, li, div, span {
86+
color: var(--text-color) !important;
87+
}
88+
}
89+
5090
// Links
5191
a,
5292
a:visited {

‎_sass/custom/custom.scss‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@
9999
}
100100

101101
.dark-mode-toggle {
102-
background: var(--card-bg);
103-
border: 2px solid var(--border-color);
102+
background: var(--card-bg) !important;
103+
border: 2px solid var(--border-color) !important;
104104
border-radius: 50%;
105105
width: 50px;
106106
height: 50px;
@@ -109,24 +109,48 @@
109109
justify-content: center;
110110
cursor: pointer;
111111
transition: all 0.3s ease;
112-
box-shadow: 0 2px 8px var(--card-shadow);
113-
color: var(--text-color);
112+
box-shadow: 0 2px 8px var(--card-shadow) !important;
113+
color: var(--text-color) !important;
114114
font-size: 1.2rem;
115+
outline: none;
115116

116117
&:hover {
117118
transform: scale(1.1);
118-
box-shadow: 0 4px 12px var(--card-shadow);
119+
box-shadow: 0 4px 12px var(--card-shadow) !important;
119120
}
120121

121122
&:active {
122123
transform: scale(0.95);
123124
}
124125

126+
&:focus {
127+
outline: 2px solid var(--primary-color);
128+
outline-offset: 2px;
129+
}
130+
125131
.toggle-icon {
126132
transition: transform 0.3s ease;
133+
display: block;
134+
line-height: 1;
127135
}
128136

129137
&:hover .toggle-icon {
130138
transform: rotate(15deg);
131139
}
132140
}
141+
142+
// Force dark mode styles for critical elements
143+
[data-theme="dark"] {
144+
background-color: var(--bg-color) !important;
145+
color: var(--text-color) !important;
146+
147+
* {
148+
border-color: var(--border-color) !important;
149+
}
150+
151+
.dark-mode-toggle {
152+
background: var(--card-bg) !important;
153+
color: var(--text-color) !important;
154+
border-color: var(--border-color) !important;
155+
}
156+
}

0 commit comments

Comments
 (0)