diff --git a/site/_data/svg.yml b/site/_data/svg.yml
index bf9841c2..77bdfb6f 100644
--- a/site/_data/svg.yml
+++ b/site/_data/svg.yml
@@ -12,4 +12,7 @@ msg_sq_heart:
pin:
review:
-up:
\ No newline at end of file
+up:
+sun:
+moon:
+sun_moon:
\ No newline at end of file
diff --git a/site/_includes/layouts/base.vto b/site/_includes/layouts/base.vto
index 54462d8e..6c3814a1 100644
--- a/site/_includes/layouts/base.vto
+++ b/site/_includes/layouts/base.vto
@@ -20,6 +20,7 @@
+
{{- for x of page.data.scripts }}
@@ -51,6 +52,9 @@
{{- /for }}
+
+ {{ page.data.svg.sun }}{{ page.data.svg.moon }}{{ page.data.svg.sun_moon }}
+
diff --git a/site/_includes/scss/_colors.scss b/site/_includes/scss/_colors.scss
index 02fd99c4..c5cfcd5d 100644
--- a/site/_includes/scss/_colors.scss
+++ b/site/_includes/scss/_colors.scss
@@ -80,4 +80,19 @@ body {
--button-border-color: transparent;
background-color: var(--bg-primary);
+}
+
+
+.dark body {
+
+--bg-primary: #1e1e1e;
+--text-normal: #B3B3B3;
+--border-color: #434343;
+--bg-navigation-top: #011212;
+--bg-navigation-bottom: #0f0f0f;
+--fg-navigation: #c8c7c7;
+
+a {color: #c8c7c7;}
+a.button {color: var(--dark-green);}
+
}
\ No newline at end of file
diff --git a/site/_includes/scss/navigation.scss b/site/_includes/scss/navigation.scss
index 5efc2f30..d015c0f5 100644
--- a/site/_includes/scss/navigation.scss
+++ b/site/_includes/scss/navigation.scss
@@ -200,6 +200,11 @@ header.site {
}
}
}
+
+ .theme-toggle {
+ padding: .25em .5em;
+ color: var(--fg-nav-submenu);
+ }
}
#menu-toggle:checked {
@@ -275,7 +280,7 @@ header.site {
border-width: 0 1px 0 0;
&:hover {
- border-image: linear-gradient(var(--bg-navigation-top), var(--bg-navigation-top) 40%, var(--bg-nav-submenu)) 1;
+ // border-image: linear-gradient(var(--bg-navigation-top), var(--bg-navigation-top) 40%, var(--bg-nav-submenu)) 1; //
}
.entry {
@@ -325,4 +330,43 @@ header.site {
}
}
}
+}
+
+
+/* Hide/show the color mode switcher icons */
+
+html #theme-toggle {
+ i.icon-sun {
+ display: none;
+ }
+ i.icon-moon {
+ display: none;
+ }
+ i.icon-cog {
+ display: inline-block;
+ }
+}
+
+html[data-stored-theme="light"] #theme-toggle {
+ i.icon-sun {
+ display: inline-block;
+ }
+ i.icon-moon {
+ display: none;
+ }
+ i.icon-cog {
+ display: none;
+ }
+}
+
+html[data-stored-theme="dark"] #theme-toggle {
+ i.icon-sun {
+ display: none;
+ }
+ i.icon-moon {
+ display: inline-block;
+ }
+ i.icon-cog {
+ display: none;
+ }
}
\ No newline at end of file
diff --git a/site/_includes/scss/text.scss b/site/_includes/scss/text.scss
index 2ac75309..8aec7f52 100644
--- a/site/_includes/scss/text.scss
+++ b/site/_includes/scss/text.scss
@@ -3,6 +3,7 @@
body {
--button-border-radius: 30px;
+ color: var(--text-normal);
}
// General links
@@ -31,9 +32,10 @@ a.github,
.h-site-more,
.act-status-icon,
.aside-nav-icon {
- min-height: var(--font-smaller);
+ min-width: var(--font-smaller);
svg {
height: var(--font-smaller);
+ width: var(--font-smaller);
}
}
diff --git a/site/_includes/scss/theme.scss b/site/_includes/scss/theme.scss
new file mode 100644
index 00000000..2d635015
--- /dev/null
+++ b/site/_includes/scss/theme.scss
@@ -0,0 +1,25 @@
+.theme-toggle {
+ --size: 1.2rem;
+
+ background: none;
+ border: none;
+ padding: 0;
+
+ height: var(--size);
+ width: var(--size);
+ inline-size: var(--size);
+ block-size: var(--size);
+ aspect-ratio: 1;
+ border-radius: 50%;
+
+ cursor: pointer;
+ touch-action: manipulation;
+ -webkit-tap-highlight-color: transparent;
+ outline-offset: 5px;
+
+ & > svg {
+ inline-size: 100%;
+ block-size: 100%;
+ stroke-linecap: round;
+ }
+}
\ No newline at end of file
diff --git a/site/assets/theme.js b/site/assets/theme.js
new file mode 100644
index 00000000..427ad469
--- /dev/null
+++ b/site/assets/theme.js
@@ -0,0 +1,40 @@
+function setTheme() {
+ const storedTheme = localStorage.getItem('color-theme') || 'system';
+ document.documentElement.dataset.storedTheme = storedTheme;
+ let theme_color = "#fafafa";
+ if (storedTheme === 'dark' || (storedTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+ document.documentElement.classList.add('dark');
+ theme_color = "#1e1e1e";
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ return theme_color;
+}
+function toggleTheme() {
+ const themeOrder = ['light', 'dark', 'system'];
+ const storedTheme = localStorage.getItem('color-theme') || 'system';
+ const newTheme = themeOrder[(themeOrder.indexOf(storedTheme) + 1) % themeOrder.length];
+ localStorage.setItem('color-theme', newTheme);
+ document.querySelector('meta[name="theme-color"]').content = setTheme();
+ updateButton();
+}
+function updateButton() {
+ const button = document.getElementById('theme-toggle');
+ const storedTheme = localStorage.getItem('color-theme') || 'system';
+ const themeTitles = {
+ 'dark': 'Color scheme: dark; next: light',
+ 'light': 'Color scheme: light; next: system preferences',
+ 'system': 'Color scheme: system preferences; next: dark'
+ };
+ button.setAttribute('aria-label', storedTheme);
+ button.setAttribute('title', themeTitles[storedTheme]);
+ return button;
+}
+const meta = document.createElement('meta');
+meta.name = "theme-color";
+meta.content = setTheme();
+document.head.appendChild(meta);
+window.onload = function() {
+ const button = updateButton();
+ button.addEventListener('click', toggleTheme);
+};
diff --git a/site/static/images/home_access.svg b/site/static/images/home_access.svg
index 3cc12f2f..1f94defb 100644
--- a/site/static/images/home_access.svg
+++ b/site/static/images/home_access.svg
@@ -1,19 +1,15 @@
\ No newline at end of file
diff --git a/site/static/images/home_homeburst.svg b/site/static/images/home_homeburst.svg
index bd4509dd..374c7570 100644
--- a/site/static/images/home_homeburst.svg
+++ b/site/static/images/home_homeburst.svg
@@ -1,9 +1,7 @@
\ No newline at end of file
diff --git a/site/static/images/home_minimal.svg b/site/static/images/home_minimal.svg
index 018cbaec..a6f92ce5 100644
--- a/site/static/images/home_minimal.svg
+++ b/site/static/images/home_minimal.svg
@@ -1,24 +1,24 @@
\ No newline at end of file