diff --git a/src/template.html b/src/template.html
index 1277e16..fd0ac8d 100644
--- a/src/template.html
+++ b/src/template.html
@@ -5,15 +5,15 @@
{title} - Rust cheat sheet
-
{content}
+
diff --git a/static/script.js b/static/script.js
index 94ae77c..2c3e965 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,9 +1,12 @@
+const themeKey = 'theme';
+let currentTheme = localStorage.getItem(themeKey);
+
const root = document.documentElement;
const args = location.search.slice(1).split(',').filter(arg => !!arg);
for (const arg of args) {
switch (arg) {
case 'dark':
- document.getElementById('theme').href = 'theme-dark.css';
+ currentTheme = 'dark';
break;
case 'large':
case 'single':
@@ -14,13 +17,43 @@ for (const arg of args) {
}
}
+if (!currentTheme) {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ currentTheme = 'dark';
+ } else {
+ currentTheme = 'light';
+ }
+ localStorage.setItem(themeKey, currentTheme);
+}
+
+const themeClass = 'on';
+
+const themeButton = document.getElementById('theme-btn');
+const themeStylesheet = document.getElementById('theme');
+const applyThemeClass = () => {
+ if (currentTheme === 'dark') {
+ themeButton.parentNode.classList.add(themeClass);
+ themeStylesheet.href = 'theme-dark.css';
+ } else {
+ themeButton.parentNode.classList.remove(themeClass);
+ themeStylesheet.href = 'theme-light.css';
+ }
+}
+
+applyThemeClass();
+themeButton.addEventListener('click', () => {
+ currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+ localStorage.setItem(themeKey, currentTheme);
+ applyThemeClass();
+});
+
window.addEventListener("DOMContentLoaded", () => {
const footer = document.querySelector('footer');
const modeSwitches = footer.querySelectorAll('li > a[href^="?"]');
for (const a of modeSwitches) {
const mode = a.getAttribute('href').slice(1);
if (args.includes(mode)) {
- a.parentNode.classList.add('on');
+ a.parentNode.classList.add(themeClass);
a.href = '?' + args.filter(arg => arg !== mode).join(',');
} else {
a.href = '?' + [...args, mode].join(',');
diff --git a/static/style.css b/static/style.css
index d4f3e3a..24aced2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -9,6 +9,7 @@ main {
width: auto;
display: flex;
white-space: pre;
+ flex-direction: column;
transform-origin: 0 0;
transform: scale(0.5);
}
@@ -142,3 +143,15 @@ footer li:last-child {
footer a:hover {
text-decoration: none;
}
+.single-link {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ main {
+ flex-direction: row;
+ }
+ .single-link {
+ display: block;
+ }
+}
\ No newline at end of file