diff --git a/sass/sidebar.scss b/sass/sidebar.scss
index 40b2182..47f6856 100644
--- a/sass/sidebar.scss
+++ b/sass/sidebar.scss
@@ -1,4 +1,12 @@
// Sidebar
+[data-theme="light"] {
+ --sb-color: #101419;
+}
+
+[data-theme="dark"] {
+ --sb-color: #09090c;
+}
+
#sidebar {
width: 8em;
height: 100%;
@@ -14,7 +22,7 @@
padding: 0;
font-size: 1.6em;
- background-color: #101419;
+ background-color: var(--sb-color);
}
.sb_header {
@@ -52,6 +60,22 @@
max-width: calc(100% - 2em);
}
+.theme-toggle-button {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ border: none;
+ margin-bottom: 10px;
+ width: 100%;
+
+ cursor: crosshair;
+
+ font-size: 18px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+}
+
+
.personal { color:#fc3f5b; }
.nixfox { color:#2abafc; }
diff --git a/sass/style.scss b/sass/style.scss
index 81fbf18..28d4431 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -4,17 +4,31 @@
top: 0;
}
+[data-theme="light"] {
+ --bg-color: #DDE1E9;
+ --elm-bg-color: #EFF1F5;
+ --text-color: #141414;
+ --link-color: #b7162e;
+}
+
+[data-theme="dark"] {
+ --bg-color: #181A1B;
+ --elm-bg-color: #1F2223;
+ --text-color: #DBD8D4;
+ --link-color: #DB4E63;
+}
+
html {
- background-color: #DDE1E9;
+ background-color: var(--bg-color);
}
body {
- color: #141414;
+ color: var(--text-color);
padding-bottom: 5em;
}
a {
- color:#b7162e;
+ color: var(--link-color);
cursor: crosshair;
outline: 1px solid transparent;
margin: 0;
@@ -32,27 +46,35 @@ h1 {
}
#main {
+ background-color: var(--elm-bg-color);
+
position: relative;
- width:60%;
- max-width:50em;
+ width: 60%;
+ max-width: 50em;
margin: auto;
top: 3em;
left: 6.5em;
- padding-top: 1em;
- padding-bottom: 1em;
- padding-left: 3em;
- padding-right: 3em;
+ padding: 3em;
- background-color: #EFF1F5;
+ font-size: 16px;
+}
+
+@media (max-width: 980px) {
+ html, body {
+ margin: 0;
+ height: 100%;
+ }
+
+ #main {
+ width: 70%;
+ height: 100%;
+ top: 0;
+ }
}
li {
list-style-type: square;
padding-bottom: 2em;
}
-
-.container {
- padding: 20px;
-}
diff --git a/static/darkmode.js b/static/darkmode.js
new file mode 100644
index 0000000..716e5c5
--- /dev/null
+++ b/static/darkmode.js
@@ -0,0 +1,42 @@
+// Stolen code from https://dev.to/mdhassanpatwary/creating-a-css-darklight-mode-switcher-26cd
+function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
+ if (localStorageTheme !== null) {
+ return localStorageTheme;
+ }
+
+ if (systemSettingDark.matches) {
+ return "dark";
+ }
+
+ return "light";
+}
+
+function updateButton({ buttonEl, isDark }) {
+ const newCta = isDark ? "toggle light" : "toggle dark";
+ buttonEl.setAttribute("aria-label", newCta);
+ buttonEl.innerText = newCta;
+}
+
+function updateThemeOnHtmlEl({ theme }) {
+ document.querySelector("html").setAttribute("data-theme", theme);
+}
+
+
+const button = document.querySelector("[data-theme-toggle]");
+const localStorageTheme = localStorage.getItem("theme");
+const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
+
+updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
+updateThemeOnHtmlEl({ theme: currentThemeSetting });
+
+button.addEventListener("click", (event) => {
+ const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
+
+ localStorage.setItem("theme", newTheme);
+ updateButton({ buttonEl: button, isDark: newTheme === "dark" });
+ updateThemeOnHtmlEl({ theme: newTheme });
+
+ currentThemeSetting = newTheme;
+});
diff --git a/templates/base.html b/templates/base.html
index bebd087..3ad5a2c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,5 @@
-
+
@@ -15,6 +15,9 @@
+
+
+