diff --git a/content/_includes/base.njk b/content/_includes/base.njk
index 965cffa..25642c9 100644
--- a/content/_includes/base.njk
+++ b/content/_includes/base.njk
@@ -14,6 +14,7 @@
+
Skip to main content
@@ -36,6 +37,7 @@
characters
cookbook
stickers
+ toggle theme
diff --git a/content/_includes/home.njk b/content/_includes/home.njk
index 3b7b41f..02c73f9 100644
--- a/content/_includes/home.njk
+++ b/content/_includes/home.njk
@@ -6,7 +6,7 @@ layout: base.njk
h2 ~ h2 {
border: none;
padding-top: 20px;
- border-top: 12px double var(--xkcd-magenta);
+ border-top: 12px double var(--accent-color);
}
{% endcss %}
diff --git a/content/index.css b/content/index.css
index 597cf68..7f6c9a7 100644
--- a/content/index.css
+++ b/content/index.css
@@ -1,20 +1,41 @@
-/* Defaults */
-html {
- --font-family: -apple-system, system-ui, sans-serif;
- --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
+@font-face {
+ font-family: comic-mono;
+ src: url(ComicMono.woff);
}
-/* Theme colors */
+/* Defaults */
html {
- --xkcd-light-grey: #d8dcd6;
- --xkcd-steel-blue: #5a7d9a;
- --xkcd-magenta: #c20078;
+ --font-family-monospace: comic-mono Consolas monospace;
+ --font-family: comic-mono Consolas sans-serif;
+ --syntax-tab-size: 2;
- --background-color: black;
+ --background-color: var(--xkcd-very-dark-brown);
--text-color: var(--xkcd-light-grey);
--text-color-link: var(--xkcd-steel-blue);
+ --accent-color: var(--xkcd-bronze);
+}
- --syntax-tab-size: 2;
+@media(prefers-color-scheme: light) {
+ html {
+ --background-color: var(--xkcd-eggshell);
+ --text-color: var(--xkcd-dark-grey);
+ --text-color-link: var(--xkcd-teal);
+ --accent-color: var(--xkcd-red-orange);
+ }
+}
+
+[theme='dark'] {
+ --background-color: var(--xkcd-very-dark-brown);
+ --text-color: var(--xkcd-light-grey);
+ --text-color-link: var(--xkcd-steel-blue);
+ --accent-color: var(--xkcd-bronze);
+}
+
+[theme='light'] {
+ --background-color: var(--xkcd-eggshell);
+ --text-color: var(--xkcd-dark-grey);
+ --text-color-link: var(--xkcd-teal);
+ --accent-color: var(--xkcd-red-orange);
}
/* Global stylesheet */
@@ -27,7 +48,7 @@ body {
max-width: 100ch;
padding: 0 1rem;
margin: 0 auto 2rem;
- font-family: var(--font-family);
+ font-family: comic-mono;
color: var(--text-color);
background-color: var(--background-color);
}
@@ -197,14 +218,14 @@ a[href].header-anchor:focus,
h1 {
padding-bottom: 20px;
- border-bottom: 12px double var(--xkcd-magenta);
+ border-bottom: 12px double var(--accent-color);
}
article {
overflow: auto;
padding-bottom: 20px;
margin-bottom: 20px;
- border-bottom: 12px double var(--xkcd-magenta);
+ border-bottom: 12px double var(--accent-color);
}
img {
diff --git a/static/ComicMono.woff b/static/ComicMono.woff
new file mode 100644
index 0000000..c3119f9
Binary files /dev/null and b/static/ComicMono.woff differ
diff --git a/static/light-toggle.js b/static/light-toggle.js
new file mode 100644
index 0000000..fb7c492
--- /dev/null
+++ b/static/light-toggle.js
@@ -0,0 +1,46 @@
+function themeToggle() {
+ const oldValue = localStorage.getItem('theme');
+ let newValue;
+ if (oldValue == 'light') {
+ newValue = 'dark';
+ } else if (oldValue == 'dark') {
+ newValue = 'light';
+ }
+ localStorage.setItem('theme', newValue);
+ themeRefresh();
+}
+
+function themeClear() {
+ localStorage.setItem('theme', '');
+ themeRefresh();
+}
+
+function themeRefresh(newValue) {
+ if (newValue !== undefined) {
+ localStorage.setItem('theme', newValue);
+ }
+
+ const theme = localStorage.getItem('theme')
+ const el = document.getElementsByTagName('html')[0];
+ if (theme == 'light') {
+ el.setAttribute('theme', 'light');
+ } else if (theme == 'dark') {
+ el.setAttribute('theme', 'dark');
+ } else {
+ el.setAttribute('theme', '');
+ }
+}
+
+function main() {
+ const buttonToggle = document.getElementsByClassName('theme-toggle');
+ for (const el of buttonToggle) {
+ el.onclick = themeToggle;
+ }
+ const buttonClear = document.getElementsByTagName('theme-clear');
+ for (const el of buttonClear) {
+ el.onclick = themeClear;
+ }
+ themeRefresh();
+}
+
+main();