Skip to content

Commit 0f6ffe8

Browse files
gregsdennisgregsdennis
committed
add light mode and switcher; fix toc
1 parent ec978c0 commit 0f6ffe8

File tree

8 files changed

+155
-16
lines changed

8 files changed

+155
-16
lines changed

‎.jekyll-metadata‎

1.42 KB
Binary file not shown.

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ google_analytics:
8080
# light - Use the light color scheme
8181
# dark - Use the dark color scheme
8282
#
83-
theme_mode: dark # [light|dark]
83+
theme_mode: # [light|dark]
8484

8585
# The CDN endpoint for images.
8686
# Notice that once it is assigned, the CDN url

‎_includes/head.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@
9595
<!-- Font Awesome -->
9696
<link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css | relative_url }}">
9797

98+
<!-- Material Icons -->
99+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
100+
98101
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
99102

100103
{% if site.toc and page.toc %}

‎_includes/sidebar.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
<!-- ul.nav.flex-column -->
6666

6767
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
68+
{% comment %}
6869
{% unless site.theme_mode %}
6970
<button class="mode-toggle btn" aria-label="Switch Mode">
7071
<i class="fas fa-adjust"></i>
@@ -74,6 +75,7 @@
7475
<span class="icon-border"></span>
7576
{% endif %}
7677
{% endunless %}
78+
{% endcomment %}
7779
</div>
7880
<!-- .sidebar-bottom -->
7981
</div>

‎_includes/topbar.html‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,29 @@
5050
{% endif %}
5151
</div>
5252

53-
{% if true %}
54-
<i id="search-trigger" class="fas fa-search fa-fw"></i>
55-
<span id="search-wrapper" class="align-items-center">
56-
<i class="fas fa-search fa-fw"></i>
57-
<input
58-
class="form-control"
59-
id="search-input"
60-
type="search"
61-
aria-label="search"
62-
autocomplete="off"
63-
placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
64-
>
65-
</span>
66-
<span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
67-
{% endif %}
53+
<div id="topbar-right" class="d-flex align-items-center">
54+
<button class="mode-toggle btn" aria-label="Switch Mode">
55+
<span class="tooltip-icon">
56+
<i class="material-icons">lightbulb</i>
57+
<span class="tooltip-text header-tooltip">Switch to dark mode</span>
58+
</span>
59+
</button>
60+
61+
{% if true %}
62+
<i id="search-trigger" class="fas fa-search fa-fw"></i>
63+
<span id="search-wrapper" class="align-items-center">
64+
<i class="fas fa-search fa-fw"></i>
65+
<input
66+
class="form-control"
67+
id="search-input"
68+
type="search"
69+
aria-label="search"
70+
autocomplete="off"
71+
placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
72+
>
73+
</span>
74+
<span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
75+
{% endif %}
76+
</div>
6877
</div>
6978
</div>

‎_javascript/modules/components/mode-watcher.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,45 @@
33
*/
44
const $toggleElem = $('.mode-toggle');
55

6+
function updateModeIcon() {
7+
const $icon = $toggleElem.find('i');
8+
const $tooltip = $toggleElem.find('.tooltip-text');
9+
const htmlMode = $('html').attr('data-mode');
10+
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
11+
12+
// Determine if we're in dark mode
13+
// If explicit mode is set, use that; otherwise follow system preference
14+
const isDark = htmlMode === 'dark' || (!htmlMode && systemPrefersDark);
15+
16+
// Update icon: filled for light mode, outline for dark mode
17+
const newIcon = isDark ? 'lightbulb_outline' : 'lightbulb';
18+
$icon.text(newIcon);
19+
20+
// Update tooltip text
21+
const tooltipText = isDark ? 'Turn the lights on' : 'Turn the lights off';
22+
$tooltip.text(tooltipText);
23+
}
24+
625
export function modeWatcher() {
726
if ($toggleElem.length === 0) {
827
return;
928
}
1029

30+
// Update icon on page load
31+
updateModeIcon();
32+
33+
// Listen for mode changes via window messages
34+
window.addEventListener('message', (event) => {
35+
if (event.data && event.data.direction === 'mode-toggle') {
36+
updateModeIcon();
37+
}
38+
});
39+
40+
// Also listen for system preference changes
41+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
42+
updateModeIcon();
43+
});
44+
1145
$toggleElem.off().on('click', (e) => {
1246
const $target = $(e.target);
1347
let $btn =
@@ -17,5 +51,8 @@ export function modeWatcher() {
1751

1852
modeToggle.flipMode(); // modeToggle: `_includes/mode-toggle.html`
1953
$btn.trigger('blur'); // remove the clicking outline
54+
55+
// Update icon after mode change
56+
setTimeout(updateModeIcon, 10);
2057
});
2158
}

‎_sass/addon/commons.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -989,6 +989,58 @@ $sidebar-display: 'sidebar-display';
989989
}
990990
}
991991

992+
/* Topbar right section with mode toggle and search */
993+
#topbar-right {
994+
gap: 0;
995+
}
996+
997+
/* Topbar mode toggle button */
998+
#topbar .mode-toggle {
999+
padding: 0;
1000+
border: 0;
1001+
background-color: transparent;
1002+
color: #999999;
1003+
margin-right: 1rem;
1004+
1005+
i {
1006+
font-size: 24px;
1007+
width: 24px;
1008+
height: 24px;
1009+
}
1010+
1011+
&:hover {
1012+
color: #fff;
1013+
}
1014+
}
1015+
1016+
/* Keep search wrapper with dark theme colors always */
1017+
#search-wrapper {
1018+
border-color: rgba(255, 255, 255, 0.15) !important;
1019+
background: rgba(255, 255, 255, 0.05) !important;
1020+
1021+
i {
1022+
color: #999999 !important;
1023+
}
1024+
1025+
input {
1026+
background: transparent !important;
1027+
color: #fff !important;
1028+
1029+
&::placeholder {
1030+
color: #999999 !important;
1031+
}
1032+
}
1033+
}
1034+
1035+
/* Keep sidebar hover and active colors with dark theme always */
1036+
#sidebar a:hover {
1037+
color: rgba(255, 255, 255, 0.8) !important;
1038+
}
1039+
1040+
#sidebar .nav-item.active .nav-link {
1041+
color: rgba(255, 255, 255, 0.8) !important;
1042+
}
1043+
9921044
/* 'Cancel' link */
9931045
#search-cancel {
9941046
color: var(--link-color);

‎assets/css/style.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,42 @@ $tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
3838
transition: color .35s ease-in-out;
3939
}
4040

41+
/* Custom tooltips for mode toggle */
42+
.tooltip-icon {
43+
position: relative;
44+
}
45+
46+
.tooltip-text {
47+
visibility: hidden;
48+
position: fixed;
49+
z-index: 999;
50+
min-width: 200px;
51+
max-width: 400px;
52+
font-size: 14px;
53+
background-color: #271a3b;
54+
border-radius: 5px;
55+
padding: 10px;
56+
pointer-events: none;
57+
color: rgb(175, 176, 177);
58+
}
59+
60+
.tooltip-icon:hover .tooltip-text {
61+
visibility: visible;
62+
}
63+
64+
.header-tooltip {
65+
position: absolute;
66+
top: 30px;
67+
transform: translateX(-65%);
68+
text-wrap: nowrap;
69+
max-width: none;
70+
}
71+
72+
html[data-mode="light"] .header-tooltip {
73+
background-color: #271a3b;
74+
color: rgb(175, 176, 177);
75+
}
76+
4177
#sidebar .nav-item {
4278
height: 1rem;
4379
line-height: normal;

0 commit comments

Comments
 (0)