diff --git a/assets/scripts/script.js b/assets/scripts/script.js
index 6b5941b..f492837 100644
--- a/assets/scripts/script.js
+++ b/assets/scripts/script.js
@@ -77,19 +77,32 @@ document.addEventListener("DOMContentLoaded", () => {
(function(){
const root = document.documentElement;
const storageKey = "theme";
+ const themes = ["light", "dark", "dark-academia"];
+ const labels = {
+ "light": "Light",
+ "dark": "Dark",
+ "dark-academia": "Academia"
+ };
const saved = localStorage.getItem(storageKey);
- if (saved === "dark" || saved === "light") {
+ if (themes.includes(saved)) {
root.setAttribute("data-theme", saved);
}
const btn = document.getElementById("theme-toggle");
if (!btn) return;
+ const updateButton = () => {
+ const current = root.getAttribute("data-theme");
+ const label = labels[current] || "Auto";
+ btn.textContent = `Theme: ${label}`;
+ btn.setAttribute("aria-label", `Current theme: ${label}. Switch theme.`);
+ };
+ updateButton();
btn.addEventListener("click", () => {
const current = root.getAttribute("data-theme");
- const next = current === "dark" ? "light" : "dark";
- // If no current (auto), assume we’re toggling to dark first
- const target = current ? next : "dark";
+ const index = themes.indexOf(current);
+ const target = themes[index === -1 ? 1 : (index + 1) % themes.length];
root.setAttribute("data-theme", target);
localStorage.setItem(storageKey, target);
+ updateButton();
});
})();
diff --git a/assets/styles/media.css b/assets/styles/media.css
index fbf652d..00fc918 100644
--- a/assets/styles/media.css
+++ b/assets/styles/media.css
@@ -48,7 +48,7 @@
}
@media (prefers-color-scheme: dark){
- :root:not([data-theme="light"]){
+ :root:not([data-theme]){
--bg: #0f1115;
--fg: #e6e6e6;
--link: #8ab4ff;
@@ -65,6 +65,11 @@
--surface: #151820;
--surface-soft: #1b202a;
--accent: #8ab4ff;
+ --bg-color: var(--surface);
+ --border-color: var(--border);
+ --border-muted: var(--border);
+ --text-muted: var(--muted);
+ --accent-bg: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.countdown-wrap {
color: var(--fg, #ddd);
diff --git a/assets/styles/org-syntax.css b/assets/styles/org-syntax.css
index 4064bdd..b8d7fde 100644
--- a/assets/styles/org-syntax.css
+++ b/assets/styles/org-syntax.css
@@ -10,19 +10,43 @@
.org-doc { color: #8b2252; }
.org-warning { color: #ff8c00; font-weight: 700; }
+:root[data-theme="dark-academia"] {
+ --syntax-comment: #a97861;
+ --syntax-string: #c99572;
+ --syntax-keyword: #d6b566;
+ --syntax-builtin: #b99b63;
+ --syntax-constant: #7fb092;
+ --syntax-function: #e8cf91;
+ --syntax-variable: #d0a35c;
+ --syntax-type: #8fbf9f;
+ --syntax-warning: #d58a55;
+}
+
+:root[data-theme="dark-academia"] .org-comment { color: var(--syntax-comment); }
+:root[data-theme="dark-academia"] .org-string { color: var(--syntax-string); }
+:root[data-theme="dark-academia"] .org-keyword { color: var(--syntax-keyword); }
+:root[data-theme="dark-academia"] .org-builtin { color: var(--syntax-builtin); }
+:root[data-theme="dark-academia"] .org-constant { color: var(--syntax-constant); }
+:root[data-theme="dark-academia"] .org-function-name { color: var(--syntax-function); }
+:root[data-theme="dark-academia"] .org-variable-name { color: var(--syntax-variable); }
+:root[data-theme="dark-academia"] .org-type { color: var(--syntax-type); }
+:root[data-theme="dark-academia"] .org-preprocessor { color: var(--syntax-builtin); }
+:root[data-theme="dark-academia"] .org-doc { color: var(--syntax-string); }
+:root[data-theme="dark-academia"] .org-warning { color: var(--syntax-warning); }
+
:not(pre) > code{
padding: 2px 5px; margin: 0 1px;
- border: 1px solid #ddd; border-radius: 3px;
+ border: 1px solid var(--border); border-radius: 3px;
background-clip: padding-box;
- color: #333; font-size: 80%;
+ color: var(--fg); font-size: 80%;
}
pre {
background-color: var(--bg);
}
.org-src-container{
- border: 1px solid #ccc;
- box-shadow: 3px 3px 3px #eee;
+ border: 1px solid var(--border);
+ box-shadow: 3px 3px 3px color-mix(in oklab, #000 8%, transparent);
font-family: Lucida Console, monospace;
font-size: 80%;
margin: 1em auto;
@@ -33,7 +57,7 @@ pre {
.org-src-container > pre:before{
display: block; position: absolute; top: 0; right: 0;
- background-color: #b3b3b3; color: #fff;
+ background-color: var(--surface-soft); color: var(--fg);
padding: 0 .5em; border-bottom-left-radius: 8px; border: 0;
font-size: 80%;
}
@@ -69,4 +93,3 @@ pre.src{
font-size: .9rem; line-height: 1.4;
overflow-x: auto; white-space: pre-wrap;
}
-
diff --git a/assets/styles/style.css b/assets/styles/style.css
index 37316f2..ca5bd97 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -26,6 +26,11 @@
--chip-bg: #f0f0f0;
--chip-fg: #444;
--muted: #666;
+ --bg-color: var(--surface);
+ --border-color: var(--border);
+ --border-muted: var(--border);
+ --text-muted: var(--muted);
+ --accent-bg: color-mix(in oklab, var(--accent) 10%, var(--surface));
--font-body: 'DM Sans', system-ui, sans-serif;
--kb-bg-completed: #e6f4ea;
@@ -70,12 +75,49 @@
}
+:root[data-theme="dark-academia"]{
+ color-scheme: dark;
+ --bg: #11100d;
+ --fg: #f7ecd5;
+ --link: #d8b86f;
+ --heading: #e8cf91;
+ --surface: #1d1a16;
+ --surface-soft: #242019;
+ --accent: #b89145;
+ --code-bg: #191814;
+ --active-toc: rgba(184, 145, 69, 0.18);
+ --note-color: #d9c9aa;
+ --note-bg: rgba(243, 234, 215, 0.05);
+ --border: rgba(217, 190, 124, 0.32);
+ --chip-bg: rgba(184, 145, 69, 0.14);
+ --chip-fg: #f0d89a;
+ --muted: #b6a681;
+ --bg-color: var(--surface);
+ --border-color: var(--border);
+ --border-muted: rgba(217, 190, 124, 0.24);
+ --text-muted: var(--muted);
+ --accent-bg: rgba(184, 145, 69, 0.16);
+
+ --kb-bg-completed: rgba(68, 106, 87, 0.24);
+ --kb-bg-manager-review: rgba(184, 145, 69, 0.2);
+ --kb-bg-in-progress: rgba(82, 93, 117, 0.22);
+ --kb-bg-not-started: rgba(243, 234, 215, 0.08);
+ --kb-bg-comments: rgba(125, 47, 54, 0.24);
+
+ --kb-column-border: rgba(217, 190, 124, 0.2);
+ --kb-card-bg: #181510;
+ --kb-card-text: #f3ead7;
+}
+
@font-face {
font-family: 'Noto';
src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
}
html, body{
- background-color: var(--bg);
+ background:
+ radial-gradient(circle at 18% 12%, var(--theme-glow-wine, transparent), transparent 28%),
+ radial-gradient(circle at 84% 18%, var(--theme-glow-green, transparent), transparent 24%),
+ linear-gradient(135deg, var(--theme-bg-start, var(--bg)) 0%, var(--theme-bg-mid, var(--bg)) 42%, var(--theme-bg-end, var(--bg)) 100%);
color: var(--fg);
font-size: 16px;
transition: background-color .3s, color .3s;
@@ -90,6 +132,27 @@ body {
-webkit-font-smoothing: antialiased;
}
+:root[data-theme="dark-academia"] body {
+ --theme-glow-wine: rgba(125, 47, 54, 0.24);
+ --theme-glow-green: rgba(68, 106, 87, 0.24);
+ --theme-bg-start: #0f0e0b;
+ --theme-bg-mid: #17140f;
+ --theme-bg-end: #211b14;
+}
+
+:root[data-theme="dark-academia"] body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ opacity: 0.16;
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+ background-size: 34px 34px, 34px 34px;
+ mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
+}
+
::selection {
background: color-mix(in oklab, var(--accent) 24%, transparent);
}
@@ -138,6 +201,19 @@ a:hover {
box-shadow: 0 12px 32px color-mix(in oklab, #000 8%, transparent);
}
+:root[data-theme="dark-academia"] .banner-header,
+:root[data-theme="dark-academia"] .org-src-container,
+:root[data-theme="dark-academia"] #notes-form,
+:root[data-theme="dark-academia"] .note {
+ box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme="dark-academia"] h1,
+:root[data-theme="dark-academia"] h2,
+:root[data-theme="dark-academia"] h3 {
+ font-family: Georgia, "Times New Roman", serif;
+}
+
.site-brand {
display: inline-flex;
align-items: center;
diff --git a/assets/styles/wird-tracker.css b/assets/styles/wird-tracker.css
index 34dc4e0..cdf51b1 100644
--- a/assets/styles/wird-tracker.css
+++ b/assets/styles/wird-tracker.css
@@ -27,6 +27,16 @@
--wird-shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
}
+:root[data-theme="dark-academia"] {
+ --wird-accent: #b89145;
+ --wird-accent-hover: #d6b566;
+ --wird-green: #5e9a78;
+ --wird-red: #9d3d46;
+ --wird-card-bg: rgba(243, 234, 215, 0.07);
+ --wird-bar-bg: rgba(243, 234, 215, 0.16);
+ --wird-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
+}
+
#wird-app {
display: grid;
gap: 2.5rem;
diff --git a/assets/styles/zhd.css b/assets/styles/zhd.css
index 11c43a8..2295249 100644
--- a/assets/styles/zhd.css
+++ b/assets/styles/zhd.css
@@ -462,7 +462,8 @@
font-weight: 750;
}
-:root[data-theme="dark"] .db-root {
+:root[data-theme="dark"] .db-root,
+:root[data-theme="dark-academia"] .db-root {
--db-surface: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
--db-surface-strong: color-mix(in oklab, var(--bg) 72%, var(--fg) 28%);
--db-line: color-mix(in oklab, var(--border) 80%, var(--fg) 20%);
@@ -473,6 +474,14 @@
--db-red: #e28982;
}
+:root[data-theme="dark-academia"] .db-root {
+ --db-blue: #c6b07a;
+ --db-green: #7fb092;
+ --db-amber: #d6b566;
+ --db-orange: #c98b52;
+ --db-red: #c76b71;
+}
+
@media (max-width: 980px) {
.db-quicknav {
grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/build-site.el b/build-site.el
index fab225b..ea7e8ac 100644
--- a/build-site.el
+++ b/build-site.el
@@ -258,7 +258,7 @@ FMT / ARGS are passed to `format'."
-
+
Updated: %C