Skip to content

Commit be1cc43

Browse files
lenis2000claude
lenis2000
and
claude
committed
Move dark mode toggle to main navbar
- Move toggle from top brand bar to main navbar, left of Support us - Keep toggle visible on mobile screens in the right side of navbar - Position toggle to the left of vertical dots on special pages - Update styling to work with light navbar background - Ensure toggle maintains proper contrast in both light and dark modes Co-authored-by: Claude <noreply@anthropic.com> 🤖 Generated with Claude Code
1 parent 16f8ddd commit be1cc43

File tree

4 files changed

+123
-100
lines changed

4 files changed

+123
-100
lines changed

‎_includes/footer.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,88 @@
6161
</div>
6262
</div>
6363
</footer>
64+
65+
<!-- Dark mode functionality -->
66+
<script>
67+
(function() {
68+
// Get the current theme from localStorage or OS preference
69+
function getThemePreference() {
70+
const savedTheme = localStorage.getItem('theme');
71+
if (savedTheme) {
72+
return savedTheme;
73+
}
74+
// Check OS preference
75+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
76+
}
77+
78+
// Apply theme to document
79+
function applyTheme(theme) {
80+
document.documentElement.setAttribute('data-theme', theme);
81+
updateThemeIcon(theme);
82+
}
83+
84+
// Update the theme toggle icon
85+
function updateThemeIcon(theme) {
86+
const icons = document.querySelectorAll('#theme-icon, #theme-icon-mobile');
87+
88+
icons.forEach(icon => {
89+
if (icon) {
90+
if (theme === 'dark') {
91+
icon.classList.remove('fa-sun');
92+
icon.classList.add('fa-moon');
93+
} else {
94+
icon.classList.remove('fa-moon');
95+
icon.classList.add('fa-sun');
96+
}
97+
}
98+
});
99+
}
100+
101+
// Toggle theme
102+
function toggleTheme() {
103+
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
104+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
105+
applyTheme(newTheme);
106+
localStorage.setItem('theme', newTheme);
107+
}
108+
109+
// Initialize theme on page load (immediately)
110+
const currentTheme = getThemePreference();
111+
applyTheme(currentTheme);
112+
113+
// Also initialize when DOM is ready (for safety)
114+
if (document.readyState === 'loading') {
115+
document.addEventListener('DOMContentLoaded', function() {
116+
applyTheme(currentTheme);
117+
});
118+
}
119+
120+
// Theme toggle button handlers
121+
document.addEventListener('DOMContentLoaded', function() {
122+
const toggleBtns = document.querySelectorAll('#theme-toggle, #theme-toggle-mobile');
123+
124+
toggleBtns.forEach(btn => {
125+
if (btn) {
126+
btn.addEventListener('click', function(e) {
127+
e.preventDefault();
128+
toggleTheme();
129+
});
130+
131+
// Add touch event for mobile
132+
btn.addEventListener('touchstart', function(e) {
133+
e.preventDefault();
134+
toggleTheme();
135+
});
136+
}
137+
});
138+
});
139+
140+
// Listen for OS theme changes
141+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
142+
// Only apply OS preference if user hasn't manually set a preference
143+
if (!localStorage.getItem('theme')) {
144+
applyTheme(e.matches ? 'dark' : 'light');
145+
}
146+
});
147+
})();
148+
</script>

‎_includes/navbar.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
{% endif %}
1919
</div>
2020

21+
<!-- Dark mode toggle for mobile -->
22+
<button class="theme-toggle-single d-md-none me-2" id="theme-toggle-mobile" title="Toggle dark mode">
23+
<i class="fas fa-sun" id="theme-icon-mobile"></i>
24+
</button>
25+
2126
<!-- Secondary menu toggle - right side (only for special pages) -->
2227
{% if page.layout == "ug_page" or page.layout == "g_page" or page.layout == "awm_page" or page.layout == "drp_page" %}
2328
<button class="navbar-toggler border-0 shadow-none d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRightMenu" aria-expanded="false" aria-controls="collapseRightMenu" aria-label="Toggle sidebar navigation">
@@ -62,6 +67,11 @@
6267
{% endfor %}
6368
</ul>
6469
<ul class="navbar-nav ms-auto">
70+
<li class="nav-item">
71+
<button class="theme-toggle-single me-2" id="theme-toggle" title="Toggle dark mode">
72+
<i class="fas fa-sun" id="theme-icon"></i>
73+
</button>
74+
</li>
6575
<li class="nav-item">
6676
<a href="{{site.url}}/support/" class="nav-link orange-item">Support us</a>
6777
</li>

‎_includes/top_brand.html

Lines changed: 0 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,6 @@
1212
<a href="http://www.virginia.edu" class="d-md-none" style="vertical-align: baseline;">
1313
<img src="{{site.url}}/img/brand/uva-horiz.png" style="margin-top:12px; margin-bottom:15px;width:200px" alt="UVA Logo"></a>
1414

15-
<!-- Dark mode toggle for mobile -->
16-
<button class="theme-toggle-single d-md-none ms-auto me-2" id="theme-toggle-mobile" title="Toggle dark mode">
17-
<i class="fas fa-sun" id="theme-icon-mobile"></i>
18-
</button>
19-
2015
<a href="http://www.virginia.edu/search/site/" class="d-none d-sm-inline d-md-none navbar-toggler-right">
2116
<img src="{{site.url}}/img/brand/search.png" style="width:20px;margin: 14px 0px 12px 0px" alt="Search">
2217
</a>
@@ -26,11 +21,6 @@
2621
<div class="navbar-nav me-auto">
2722
</div>
2823

29-
<!-- Dark mode toggle for desktop -->
30-
<button class="theme-toggle-single me-3 d-none d-md-inline-block" id="theme-toggle" title="Toggle dark mode">
31-
<i class="fas fa-sun" id="theme-icon"></i>
32-
</button>
33-
3424
<form class="form-inline mt-2 mt-md-0 d-none d-md-block" id="search_form" name="q">
3525
<input class="form-control input-lg me-sm-2" type="text" id="q" placeholder="UVA Search">
3626
<button class="bg-inverse my-2 my-sm-0" style="border:none;" type="submit" value=""><img src="{{site.url}}/img/brand/search.png" style="width:30px" alt="UVA Search" title="UVA Search"></button>
@@ -47,88 +37,3 @@
4737
window.open("http://www.virginia.edu/search/site/" + link_s);
4838
}
4939
</script>
50-
51-
<!-- Dark mode functionality -->
52-
<script>
53-
(function() {
54-
// Get the current theme from localStorage or OS preference
55-
function getThemePreference() {
56-
const savedTheme = localStorage.getItem('theme');
57-
if (savedTheme) {
58-
return savedTheme;
59-
}
60-
// Check OS preference
61-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
62-
}
63-
64-
// Apply theme to document
65-
function applyTheme(theme) {
66-
document.documentElement.setAttribute('data-theme', theme);
67-
updateThemeIcon(theme);
68-
}
69-
70-
// Update the theme toggle icon
71-
function updateThemeIcon(theme) {
72-
const icons = document.querySelectorAll('#theme-icon, #theme-icon-mobile');
73-
74-
icons.forEach(icon => {
75-
if (icon) {
76-
if (theme === 'dark') {
77-
icon.classList.remove('fa-sun');
78-
icon.classList.add('fa-moon');
79-
} else {
80-
icon.classList.remove('fa-moon');
81-
icon.classList.add('fa-sun');
82-
}
83-
}
84-
});
85-
}
86-
87-
// Toggle theme
88-
function toggleTheme() {
89-
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
90-
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
91-
applyTheme(newTheme);
92-
localStorage.setItem('theme', newTheme);
93-
}
94-
95-
// Initialize theme on page load (immediately)
96-
const currentTheme = getThemePreference();
97-
applyTheme(currentTheme);
98-
99-
// Also initialize when DOM is ready (for safety)
100-
if (document.readyState === 'loading') {
101-
document.addEventListener('DOMContentLoaded', function() {
102-
applyTheme(currentTheme);
103-
});
104-
}
105-
106-
// Theme toggle button handlers
107-
document.addEventListener('DOMContentLoaded', function() {
108-
const toggleBtns = document.querySelectorAll('#theme-toggle, #theme-toggle-mobile');
109-
110-
toggleBtns.forEach(btn => {
111-
if (btn) {
112-
btn.addEventListener('click', function(e) {
113-
e.preventDefault();
114-
toggleTheme();
115-
});
116-
117-
// Add touch event for mobile
118-
btn.addEventListener('touchstart', function(e) {
119-
e.preventDefault();
120-
toggleTheme();
121-
});
122-
}
123-
});
124-
});
125-
126-
// Listen for OS theme changes
127-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
128-
// Only apply OS preference if user hasn't manually set a preference
129-
if (!localStorage.getItem('theme')) {
130-
applyTheme(e.matches ? 'dark' : 'light');
131-
}
132-
});
133-
})();
134-
</script>

‎css/main.css

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -610,9 +610,9 @@ footer {
610610

611611
/* Dark mode toggle button */
612612
.theme-toggle-single {
613-
background-color: rgba(255, 255, 255, 0.15);
613+
background-color: rgba(0, 47, 108, 0.1);
614614
border: none;
615-
color: rgba(255, 255, 255, 0.9);
615+
color: #002F6C;
616616
cursor: pointer;
617617
font-size: 1rem;
618618
padding: 0.5rem 0.75rem;
@@ -624,8 +624,14 @@ footer {
624624
z-index: 1000;
625625
}
626626

627+
/* In light navbar */
628+
.navbar-light .theme-toggle-single {
629+
background-color: rgba(0, 47, 108, 0.1);
630+
color: #002F6C;
631+
}
632+
627633
.theme-toggle-single:hover {
628-
background-color: rgba(255, 255, 255, 0.25);
634+
background-color: rgba(0, 47, 108, 0.2);
629635
transform: scale(1.05);
630636
}
631637

@@ -635,19 +641,28 @@ footer {
635641

636642
.theme-toggle-single:focus {
637643
outline: none;
638-
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
644+
box-shadow: 0 0 0 3px rgba(0, 47, 108, 0.3);
639645
}
640646

641647
/* Dark theme adjustments */
642648
[data-theme="dark"] .theme-toggle-single {
643649
background-color: rgba(255, 255, 255, 0.1);
644-
color: rgba(255, 255, 255, 0.9);
650+
color: #e8e8e8;
651+
}
652+
653+
[data-theme="dark"] .navbar-light .theme-toggle-single {
654+
background-color: rgba(255, 255, 255, 0.1);
655+
color: #e8e8e8;
645656
}
646657

647658
[data-theme="dark"] .theme-toggle-single:hover {
648659
background-color: rgba(255, 255, 255, 0.2);
649660
}
650661

662+
[data-theme="dark"] .theme-toggle-single:focus {
663+
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
664+
}
665+
651666
/* Mobile styling */
652667
@media (max-width: 767px) {
653668
.theme-toggle-single {
@@ -656,6 +671,14 @@ footer {
656671
}
657672
}
658673

674+
/* Align with nav items on desktop */
675+
@media (min-width: 768px) {
676+
.navbar-nav .theme-toggle-single {
677+
margin-top: 0.5rem;
678+
margin-bottom: 0.5rem;
679+
}
680+
}
681+
659682
/* Orange items in dark mode */
660683
[data-theme="dark"] .orange-item {
661684
background-color: #d14900; /* Darker orange for dark mode */

0 commit comments

Comments
 (0)