Skip to content

Commit f73ded2

Browse files
jaseeverettjaseeverett
committed
Try and add toggle
1 parent 1d76cbf commit f73ded2

File tree

14 files changed

+2094
-32
lines changed

14 files changed

+2094
-32
lines changed

‎_quarto.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ format:
6363
link-external-newwindow: true
6464
fontsize: 1.1em
6565
theme:
66-
- flatly #
67-
# - html/styles.scss
66+
light: flatly
67+
dark: superhero
6868
page-layout: full
6969
toc: false
7070
code-link: true

‎docs/404.html‎

Lines changed: 184 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,14 @@
3636
<script src="/site_libs/quarto-html/tippy.umd.min.js"></script>
3737
<script src="/site_libs/quarto-html/anchor.min.js"></script>
3838
<link href="/site_libs/quarto-html/tippy.css" rel="stylesheet">
39-
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-37eea08aefeeee20ff55810ff984fec1.css" rel="stylesheet" id="quarto-text-highlighting-styles">
39+
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-37eea08aefeeee20ff55810ff984fec1.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
40+
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-dark-2fef5ea3f8957b3e4ecc936fc74692ca.css" rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
41+
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-37eea08aefeeee20ff55810ff984fec1.css" rel="stylesheet" class="quarto-color-scheme-extra" id="quarto-text-highlighting-styles">
4042
<script src="/site_libs/bootstrap/bootstrap.min.js"></script>
4143
<link href="/site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
42-
<link href="/site_libs/bootstrap/bootstrap-a331e776612922e8a26c861783a558cd.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
44+
<link href="/site_libs/bootstrap/bootstrap-a331e776612922e8a26c861783a558cd.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
45+
<link href="/site_libs/bootstrap/bootstrap-dark-815ee49807f6a3133bf74f4630faa741.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="dark">
46+
<link href="/site_libs/bootstrap/bootstrap-a331e776612922e8a26c861783a558cd.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme-extra" id="quarto-bootstrap" data-mode="light">
4347
<script id="quarto-search-options" type="application/json">{
4448
"location": "navbar",
4549
"copy-button": false,
@@ -71,7 +75,169 @@
7175
<link rel="stylesheet" href="/styles.css">
7276
</head>
7377

74-
<body class="nav-fixed quarto-light">
78+
<body class="nav-fixed quarto-light"><script id="quarto-html-before-body" type="application/javascript">
79+
const toggleBodyColorMode = (bsSheetEl) => {
80+
const mode = bsSheetEl.getAttribute("data-mode");
81+
const bodyEl = window.document.querySelector("body");
82+
if (mode === "dark") {
83+
bodyEl.classList.add("quarto-dark");
84+
bodyEl.classList.remove("quarto-light");
85+
} else {
86+
bodyEl.classList.add("quarto-light");
87+
bodyEl.classList.remove("quarto-dark");
88+
}
89+
}
90+
const toggleBodyColorPrimary = () => {
91+
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap:not([rel=disabled-stylesheet])");
92+
if (bsSheetEl) {
93+
toggleBodyColorMode(bsSheetEl);
94+
}
95+
}
96+
const setColorSchemeToggle = (alternate) => {
97+
const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
98+
for (let i=0; i < toggles.length; i++) {
99+
const toggle = toggles[i];
100+
if (toggle) {
101+
if (alternate) {
102+
toggle.classList.add("alternate");
103+
} else {
104+
toggle.classList.remove("alternate");
105+
}
106+
}
107+
}
108+
};
109+
const toggleColorMode = (alternate) => {
110+
// Switch the stylesheets
111+
const primaryStylesheets = window.document.querySelectorAll('link.quarto-color-scheme:not(.quarto-color-alternate)');
112+
const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
113+
manageTransitions('#quarto-margin-sidebar .nav-link', false);
114+
if (alternate) {
115+
// note: dark is layered on light, we don't disable primary!
116+
enableStylesheet(alternateStylesheets);
117+
for (const sheetNode of alternateStylesheets) {
118+
if (sheetNode.id === "quarto-bootstrap") {
119+
toggleBodyColorMode(sheetNode);
120+
}
121+
}
122+
} else {
123+
disableStylesheet(alternateStylesheets);
124+
enableStylesheet(primaryStylesheets)
125+
toggleBodyColorPrimary();
126+
}
127+
manageTransitions('#quarto-margin-sidebar .nav-link', true);
128+
// Switch the toggles
129+
setColorSchemeToggle(alternate)
130+
// Hack to workaround the fact that safari doesn't
131+
// properly recolor the scrollbar when toggling (#1455)
132+
if (navigator.userAgent.indexOf('Safari') > 0 && navigator.userAgent.indexOf('Chrome') == -1) {
133+
manageTransitions("body", false);
134+
window.scrollTo(0, 1);
135+
setTimeout(() => {
136+
window.scrollTo(0, 0);
137+
manageTransitions("body", true);
138+
}, 40);
139+
}
140+
}
141+
const disableStylesheet = (stylesheets) => {
142+
for (let i=0; i < stylesheets.length; i++) {
143+
const stylesheet = stylesheets[i];
144+
stylesheet.rel = 'disabled-stylesheet';
145+
}
146+
}
147+
const enableStylesheet = (stylesheets) => {
148+
for (let i=0; i < stylesheets.length; i++) {
149+
const stylesheet = stylesheets[i];
150+
if(stylesheet.rel !== 'stylesheet') { // for Chrome, which will still FOUC without this check
151+
stylesheet.rel = 'stylesheet';
152+
}
153+
}
154+
}
155+
const manageTransitions = (selector, allowTransitions) => {
156+
const els = window.document.querySelectorAll(selector);
157+
for (let i=0; i < els.length; i++) {
158+
const el = els[i];
159+
if (allowTransitions) {
160+
el.classList.remove('notransition');
161+
} else {
162+
el.classList.add('notransition');
163+
}
164+
}
165+
}
166+
const isFileUrl = () => {
167+
return window.location.protocol === 'file:';
168+
}
169+
const hasAlternateSentinel = () => {
170+
let styleSentinel = getColorSchemeSentinel();
171+
if (styleSentinel !== null) {
172+
return styleSentinel === "alternate";
173+
} else {
174+
return false;
175+
}
176+
}
177+
const setStyleSentinel = (alternate) => {
178+
const value = alternate ? "alternate" : "default";
179+
if (!isFileUrl()) {
180+
window.localStorage.setItem("quarto-color-scheme", value);
181+
} else {
182+
localAlternateSentinel = value;
183+
}
184+
}
185+
const getColorSchemeSentinel = () => {
186+
if (!isFileUrl()) {
187+
const storageValue = window.localStorage.getItem("quarto-color-scheme");
188+
return storageValue != null ? storageValue : localAlternateSentinel;
189+
} else {
190+
return localAlternateSentinel;
191+
}
192+
}
193+
const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
194+
const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
195+
const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
196+
let newTheme = '';
197+
if(authorPrefersDark) {
198+
newTheme = isAlternate ? baseTheme : alternateTheme;
199+
} else {
200+
newTheme = isAlternate ? alternateTheme : baseTheme;
201+
}
202+
const changeGiscusTheme = () => {
203+
// From: https://github.com/giscus/giscus/issues/336
204+
const sendMessage = (message) => {
205+
const iframe = document.querySelector('iframe.giscus-frame');
206+
if (!iframe) return;
207+
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
208+
}
209+
sendMessage({
210+
setConfig: {
211+
theme: newTheme
212+
}
213+
});
214+
}
215+
const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
216+
if (isGiscussLoaded) {
217+
changeGiscusTheme();
218+
}
219+
};
220+
const authorPrefersDark = false;
221+
const darkModeDefault = authorPrefersDark;
222+
document.querySelector('link#quarto-text-highlighting-styles.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
223+
document.querySelector('link#quarto-bootstrap.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
224+
let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
225+
// Dark / light mode switch
226+
window.quartoToggleColorScheme = () => {
227+
// Read the current dark / light value
228+
let toAlternate = !hasAlternateSentinel();
229+
toggleColorMode(toAlternate);
230+
setStyleSentinel(toAlternate);
231+
toggleGiscusIfUsed(toAlternate, darkModeDefault);
232+
window.dispatchEvent(new Event('resize'));
233+
};
234+
// Switch to dark mode if need be
235+
if (hasAlternateSentinel()) {
236+
toggleColorMode(true);
237+
} else {
238+
toggleColorMode(false);
239+
}
240+
</script>
75241

76242
<div id="quarto-search-results"></div>
77243
<header id="quarto-header" class="headroom fixed-top">
@@ -130,6 +296,7 @@
130296
</ul>
131297
</div> <!-- /navcollapse -->
132298
<div class="quarto-navbar-tools">
299+
<a href="" class="quarto-color-scheme-toggle quarto-navigation-tool px-1" onclick="window.quartoToggleColorScheme(); return false;" title="Toggle dark mode"><i class="bi"></i></a>
133300
</div>
134301
</div> <!-- /container-fluid -->
135302
</nav>
@@ -142,6 +309,7 @@
142309
<!-- main -->
143310
<main class="content column-page" id="quarto-document-content">
144311

312+
145313
<header id="title-block-header" class="quarto-title-block default">
146314
<div class="quarto-title">
147315
<h1 class="title">404</h1>
@@ -168,6 +336,19 @@ <h1 class="title">404</h1>
168336
</main> <!-- /main -->
169337
<script id="quarto-html-after-body" type="application/javascript">
170338
window.document.addEventListener("DOMContentLoaded", function (event) {
339+
// Ensure there is a toggle, if there isn't float one in the top right
340+
if (window.document.querySelector('.quarto-color-scheme-toggle') === null) {
341+
const a = window.document.createElement('a');
342+
a.classList.add('top-right');
343+
a.classList.add('quarto-color-scheme-toggle');
344+
a.href = "";
345+
a.onclick = function() { try { window.quartoToggleColorScheme(); } catch {} return false; };
346+
const i = window.document.createElement("i");
347+
i.classList.add('bi');
348+
a.appendChild(i);
349+
window.document.body.appendChild(a);
350+
}
351+
setColorSchemeToggle(hasAlternateSentinel())
171352
const icon = "";
172353
const anchorJS = new window.AnchorJS();
173354
anchorJS.options = {

0 commit comments

Comments
 (0)