Skip to content

Commit ba3cf9a

Browse files
alexeygrigorevalexeygrigorev
committed
dark mode
1 parent 8dbefe0 commit ba3cf9a

8 files changed

Lines changed: 188 additions & 8 deletions

File tree

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
RUSTKYLL_VERSION ?= v0.4.6
1+
RUSTKYLL_VERSION ?= v0.4.7
22
RUSTKYLL_ASSET ?= rustkyll-linux-amd64
33
RUSTKYLL_INSTALL_DIR ?= .bin
44
RUSTKYLL ?= $(RUSTKYLL_INSTALL_DIR)/rustkyll

‎_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ exclude:
6464
- scripts/
6565

6666
# Set a path/url to a logo that will be displayed instead of the title
67-
logo: "assets/images/dtc-logo.png"
67+
logo: "assets/images/brand-assets/svg/logo_black.svg"
6868

6969
# Enable or disable the site search
7070
# Supports true (default) or false
@@ -147,7 +147,7 @@ liquid:
147147
# appears at the bottom of every page's main content
148148

149149
# Back to top link
150-
back_to_top: true
150+
back_to_top: false
151151
back_to_top_text: "Back to top"
152152

153153
footer_content: ''

‎_includes/components/sidebar.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,22 @@
1212
<div class="side-bar">
1313
<div class="site-header" role="banner">
1414
<a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
15+
<button class="theme-toggle theme-toggle-sidebar site-button btn-reset" type="button" aria-label="Switch to dark mode" title="Switch to dark mode">
16+
<svg class="theme-toggle-icon theme-toggle-icon-light" viewBox="0 0 24 24" aria-hidden="true">
17+
<circle cx="12" cy="12" r="4"></circle>
18+
<path d="M12 2v2"></path>
19+
<path d="M12 20v2"></path>
20+
<path d="m4.93 4.93 1.41 1.41"></path>
21+
<path d="m17.66 17.66 1.41 1.41"></path>
22+
<path d="M2 12h2"></path>
23+
<path d="M20 12h2"></path>
24+
<path d="m6.34 17.66-1.41 1.41"></path>
25+
<path d="m19.07 4.93-1.41 1.41"></path>
26+
</svg>
27+
<svg class="theme-toggle-icon theme-toggle-icon-dark" viewBox="0 0 24 24" aria-hidden="true">
28+
<path d="M20.99 12.74A8.5 8.5 0 1 1 11.26 3a6.5 6.5 0 0 0 9.73 9.73z"></path>
29+
</svg>
30+
</button>
1531
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
1632
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
1733
</button>

‎_includes/css/custom.scss.liquid‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
@import "./custom/custom";
2+
3+
.dark .site-logo {
4+
background-image: url("{{ '/assets/images/brand-assets/svg/logo_white.svg' | relative_url }}");
5+
}

‎_includes/head.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,27 @@
1414
<meta charset="UTF-8">
1515
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
1616

17-
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
17+
<script>
18+
(function() {
19+
var theme = 'default';
20+
try {
21+
var storedTheme = localStorage.getItem('jtd-theme');
22+
if (storedTheme == 'dark') {
23+
theme = 'dark';
24+
} else if (storedTheme != 'light' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
25+
theme = 'dark';
26+
}
27+
} catch(e) {
28+
}
29+
30+
document.documentElement.classList.toggle('dark', theme == 'dark');
31+
document.documentElement.classList.toggle('light', theme != 'dark');
32+
document.write('<link rel="stylesheet" href="{{ "/assets/css/just-the-docs-" | relative_url }}' + theme + '.css">');
33+
})();
34+
</script>
35+
<noscript>
36+
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
37+
</noscript>
1838

1939
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-head-nav.css' | relative_url }}" id="jtd-head-nav-stylesheet">
2040

‎_includes/header_custom.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<button class="theme-toggle site-button btn-reset" type="button" aria-label="Switch to dark mode" title="Switch to dark mode">
2+
<svg class="theme-toggle-icon theme-toggle-icon-light" viewBox="0 0 24 24" aria-hidden="true">
3+
<circle cx="12" cy="12" r="4"></circle>
4+
<path d="M12 2v2"></path>
5+
<path d="M12 20v2"></path>
6+
<path d="m4.93 4.93 1.41 1.41"></path>
7+
<path d="m17.66 17.66 1.41 1.41"></path>
8+
<path d="M2 12h2"></path>
9+
<path d="M20 12h2"></path>
10+
<path d="m6.34 17.66-1.41 1.41"></path>
11+
<path d="m19.07 4.93-1.41 1.41"></path>
12+
</svg>
13+
<svg class="theme-toggle-icon theme-toggle-icon-dark" viewBox="0 0 24 24" aria-hidden="true">
14+
<path d="M20.99 12.74A8.5 8.5 0 1 1 11.26 3a6.5 6.5 0 0 0 9.73 9.73z"></path>
15+
</svg>
16+
</button>

‎assets/css/custom/custom.scss‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,59 @@
1-
// Import the datatalks color scheme to access its variables
2-
@import "color_schemes/datatalks";
1+
// DataTalks.Club brand colors for custom components
2+
$datatalks-blue: #2563eb !default;
3+
$datatalks-orange: #f97316 !default;
4+
$datatalks-dark-blue: #1e40af !default;
5+
$datatalks-light-blue: #dbeafe !default;
6+
7+
// Theme toggle
8+
.theme-toggle {
9+
justify-content: center;
10+
min-width: 3.5rem;
11+
color: $link-color;
12+
cursor: pointer;
13+
}
14+
15+
.theme-toggle-icon {
16+
display: block;
17+
width: 1.35rem;
18+
height: 1.35rem;
19+
fill: none;
20+
stroke: currentColor;
21+
stroke-width: 2;
22+
stroke-linecap: round;
23+
stroke-linejoin: round;
24+
}
25+
26+
.theme-toggle-icon-dark {
27+
display: none;
28+
}
29+
30+
.dark .theme-toggle-icon-light {
31+
display: none;
32+
}
33+
34+
.dark .theme-toggle-icon-dark {
35+
display: block;
36+
}
37+
38+
.theme-toggle:hover {
39+
color: $link-color;
40+
background-color: $feedback-color;
41+
}
42+
43+
@include mq(md) {
44+
.site-header .theme-toggle-sidebar {
45+
display: none;
46+
}
47+
}
48+
49+
// Code blocks
50+
div.highlighter-rouge,
51+
div.listingblock > div.content,
52+
figure.highlight {
53+
border: $border $border-color;
54+
border-radius: $border-radius;
55+
overflow: hidden;
56+
}
357

458
// Vocabulary term cards styling
559
.term-card {
@@ -96,4 +150,4 @@
96150
transform: translateY(-1px);
97151
}
98152
}
99-
}
153+
}

‎assets/js/just-the-docs.js‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -490,16 +490,86 @@ function searchLoaded(index, docs) {
490490

491491
// Switch theme
492492

493+
jtd.themeStorageKey = 'jtd-theme';
494+
495+
jtd.syncThemeClass = function(theme) {
496+
var isDark = theme == 'dark';
497+
document.documentElement.classList.toggle('dark', isDark);
498+
document.documentElement.classList.toggle('light', !isDark);
499+
500+
if (document.body) {
501+
document.body.classList.toggle('dark', isDark);
502+
document.body.classList.toggle('light', !isDark);
503+
}
504+
505+
var toggles = document.querySelectorAll('.theme-toggle');
506+
toggles.forEach(function(toggle) {
507+
var label = isDark ? 'Switch to light mode' : 'Switch to dark mode';
508+
toggle.setAttribute('aria-label', label);
509+
toggle.setAttribute('title', label);
510+
toggle.setAttribute('aria-pressed', isDark);
511+
});
512+
}
513+
514+
jtd.storedTheme = function() {
515+
try {
516+
return localStorage.getItem(jtd.themeStorageKey);
517+
} catch(e) {
518+
return null;
519+
}
520+
}
521+
522+
jtd.preferredTheme = function() {
523+
var storedTheme = jtd.storedTheme();
524+
if (storedTheme == 'dark' || storedTheme == 'light') {
525+
return storedTheme == 'light' ? 'default' : storedTheme;
526+
}
527+
528+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
529+
return 'dark';
530+
}
531+
532+
return 'default';
533+
}
534+
493535
jtd.getTheme = function() {
494536
var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
495537
return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
496538
}
497539

498540
jtd.setTheme = function(theme) {
499541
var cssFile = document.querySelector('[rel="stylesheet"]');
500-
cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
542+
theme = theme == 'datatalks' ? 'default' : theme;
543+
cssFile.setAttribute('href', '{{ "/assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
544+
jtd.syncThemeClass(theme);
545+
}
546+
547+
jtd.saveTheme = function(theme) {
548+
try {
549+
localStorage.setItem(jtd.themeStorageKey, theme);
550+
} catch(e) {
551+
}
552+
}
553+
554+
jtd.toggleTheme = function() {
555+
var theme = jtd.getTheme() == 'dark' ? 'default' : 'dark';
556+
jtd.setTheme(theme);
557+
jtd.saveTheme(theme == 'default' ? 'light' : theme);
501558
}
502559

560+
jtd.setTheme(jtd.preferredTheme());
561+
562+
jtd.onReady(function(){
563+
jtd.syncThemeClass(jtd.getTheme());
564+
565+
var toggles = document.querySelectorAll('.theme-toggle');
566+
toggles.forEach(function(toggle) {
567+
jtd.addEvent(toggle, 'click', function(){
568+
jtd.toggleTheme();
569+
});
570+
});
571+
});
572+
503573
// Note: pathname can have a trailing slash on a local jekyll server
504574
// and not have the slash on GitHub Pages
505575

0 commit comments

Comments
 (0)