From 31af87b0dddb6009bc87058c5c9bcdbe9d18db90 Mon Sep 17 00:00:00 2001
From: SirEdvin <me@siredvin.site>
Date: Thu, 16 Jul 2026 09:28:51 +0000
Subject: [PATCH] docs: add material theme selection

---
 .../documentation/theme/digitalitems.css      | 74 ++++++++++++-------
 .../documentation/theme/digitalitems.js       |  6 ++
 .../typedoc.json                              |  2 +
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.css b/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.css
index 98ecce8..bba38b1 100644
--- a/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.css
+++ b/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.css
@@ -1,6 +1,34 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
 
 :root {
+  --di-accent: #4f46e5;
+  --di-accent-hover: #4338ca;
+  --di-accent-dark: #3730a3;
+  --di-accent-subtle: rgba(79, 70, 229, 0.06);
+  --di-bg: #ffffff;
+  --di-bg-secondary: #f8fafc;
+  --di-bg-elevated: #eef2ff;
+  --di-bg-code: #f1f5f9;
+  --di-border: rgba(79, 70, 229, 0.1);
+  --di-border-subtle: rgba(148, 163, 184, 0.12);
+  --di-text-primary: #0f172a;
+  --di-text-secondary: #475569;
+  --di-text-muted: #94a3b8;
+  --di-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --di-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --color-background: var(--di-bg);
+  --color-background-secondary: var(--di-bg-secondary);
+  --color-background-active: var(--di-bg-elevated);
+  --color-accent: var(--di-accent);
+  --color-text: var(--di-text-primary);
+  --color-text-aside: var(--di-text-secondary);
+  --color-link: #4f46e5;
+  --color-ts-keyword: #c084fc;
+  --color-ts-string: #34d399;
+  --color-ts-number: #fb923c;
+}
+
+html[data-theme="dark"] {
   --di-accent: #6366f1;
   --di-accent-hover: #818cf8;
   --di-accent-dark: #4f46e5;
@@ -16,36 +44,30 @@
   --di-text-muted: #5a6380;
   --di-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
   --di-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.18);
-  --color-background: var(--di-bg);
-  --color-background-secondary: var(--di-bg-secondary);
-  --color-background-active: var(--di-bg-elevated);
-  --color-accent: var(--di-accent);
   --color-text: var(--di-text-primary);
-  --color-text-aside: var(--di-text-secondary);
   --color-link: #818cf8;
-  --color-ts-keyword: #c084fc;
-  --color-ts-string: #34d399;
-  --color-ts-number: #fb923c;
 }
 
-html[data-theme="light"] {
-  --di-accent: #4f46e5;
-  --di-accent-hover: #4338ca;
-  --di-accent-dark: #3730a3;
-  --di-accent-subtle: rgba(79, 70, 229, 0.06);
-  --di-bg: #ffffff;
-  --di-bg-secondary: #f8fafc;
-  --di-bg-elevated: #eef2ff;
-  --di-bg-code: #f1f5f9;
-  --di-border: rgba(79, 70, 229, 0.1);
-  --di-border-subtle: rgba(148, 163, 184, 0.12);
-  --di-text-primary: #0f172a;
-  --di-text-secondary: #475569;
-  --di-text-muted: #94a3b8;
-  --di-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --di-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
-  --color-text: var(--di-text-primary);
-  --color-link: #4f46e5;
+@media (prefers-color-scheme: dark) {
+  html[data-theme="os"] {
+    --di-accent: #6366f1;
+    --di-accent-hover: #818cf8;
+    --di-accent-dark: #4f46e5;
+    --di-accent-subtle: rgba(99, 102, 241, 0.08);
+    --di-bg: #0c0e16;
+    --di-bg-secondary: #141622;
+    --di-bg-elevated: #1a1d2e;
+    --di-bg-code: #111322;
+    --di-border: rgba(99, 102, 241, 0.12);
+    --di-border-subtle: rgba(148, 163, 184, 0.08);
+    --di-text-primary: #e2e8f0;
+    --di-text-secondary: #8892b0;
+    --di-text-muted: #5a6380;
+    --di-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
+    --di-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.18);
+    --color-text: var(--di-text-primary);
+    --color-link: #818cf8;
+  }
 }
 
 body {
diff --git a/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.js b/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.js
index 3f07312..5e11b2e 100644
--- a/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.js
+++ b/projects/typed-peripheral-digitalitems/documentation/theme/digitalitems.js
@@ -1,4 +1,10 @@
 (() => {
+  const themeSelector = document.querySelector("#tsd-theme");
+  if (themeSelector instanceof HTMLSelectElement) {
+    const systemOption = themeSelector.querySelector('option[value="os"]');
+    if (systemOption) systemOption.textContent = "System";
+  }
+
   const selector = document.querySelector("#di-version-select");
   if (!(selector instanceof HTMLSelectElement)) return;
 
diff --git a/projects/typed-peripheral-digitalitems/typedoc.json b/projects/typed-peripheral-digitalitems/typedoc.json
index afc0d6a..9a3b9c5 100644
--- a/projects/typed-peripheral-digitalitems/typedoc.json
+++ b/projects/typed-peripheral-digitalitems/typedoc.json
@@ -14,6 +14,8 @@
   "customCss": "./documentation/theme/digitalitems.css",
   "customJs": "./documentation/theme/digitalitems.js",
   "favicon": "./documentation/theme/favicon.svg",
+  "lightHighlightTheme": "material-theme-lighter",
+  "darkHighlightTheme": "material-theme-darker",
   "highlightLanguages": ["typescript", "lua", "json", "bash"],
   "excludeExternals": true,
   "basePath": "../..",