From da3ad75d012ab49e0ec86f6618322e9b6519fd8d Mon Sep 17 00:00:00 2001
From: intergrav <intergrav@proton.me>
Date: Fri, 12 Jul 2024 03:48:33 -0400
Subject: [PATCH] feat: boilerplate-auto

---
 README.md                  |  4 ++-
 demo.html                  |  1 +
 theme/boilerplate-auto.css | 51 ++++++++++++++++++++++++++++++++++++++
 theme/boilerplate.css      | 30 +++++++++++-----------
 theme/terminal.css         |  3 ++-
 5 files changed, 73 insertions(+), 16 deletions(-)
 create mode 100644 theme/boilerplate-auto.css

diff --git a/README.md b/README.md
index 078c7e6..3def585 100644
--- a/README.md
+++ b/README.md
@@ -113,8 +113,10 @@ This turns the header into a sidebar on displays that are wide enough to support
 
 ## Themes
 
-You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
+You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, place this after your main stylesheet:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
 ```
+
+If you're making a theme, I highly recommend using the `boilerplate-auto.css` template rather than the `boilerplate.css` template for accessibility reasons.
diff --git a/demo.html b/demo.html
index c5e5731..1290482 100644
--- a/demo.html
+++ b/demo.html
@@ -5,6 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Demo - dev.css</title>
 		<link rel="stylesheet" href="dev.css" />
+		<link rel="stylesheet" href="theme/boilerplate-auto.css" />
 		<link
 			rel="stylesheet"
 			href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
diff --git a/theme/boilerplate-auto.css b/theme/boilerplate-auto.css
new file mode 100644
index 0000000..1d4b03e
--- /dev/null
+++ b/theme/boilerplate-auto.css
@@ -0,0 +1,51 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: a template that you can modify, but with an automatic light/dark mode */
+/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
+
+:root {
+	/* font families */
+	--dc-font-sans: sans-serif; /* sans serif */
+	--dc-font-mono: monospace; /* monospace */
+
+	/* light colors */
+	--dc-tx-1: #000000; /* primary text */
+	--dc-tx-2: #1a1a1a; /* secondary text */
+	--dc-bg-1: #fafafa; /* main background */
+	--dc-bg-2: #fff; /* secondary background */
+	--dc-bg-3: #ebebeb; /* outlines */
+	--dc-lk-1: #0068d6; /* link text */
+	--dc-lkb-1: #0072f5; /* link button background */
+	--dc-lkb-2: #0062d1; /* link button background (hover) */
+	--dc-lkb-tx: #ededed; /* link button text */
+	--dc-ac-1: #8e4ec6; /* accent color */
+	--dc-ac-tx: #ededed; /* accent color text */
+
+	/* dark colors */
+	--dc-d-tx-1: #ededed;
+	--dc-d-tx-2: #a1a1a1;
+	--dc-d-bg-1: #000;
+	--dc-d-bg-2: #0a0a0a;
+	--dc-d-bg-3: #2e2e2e;
+	--dc-d-lk-1: #52a8ff;
+	--dc-d-lkb-1: #0072f5;
+	--dc-d-lkb-2: #0062d1;
+	--dc-d-lkb-tx: #ededed;
+	--dc-d-ac-1: #8e4ec6;
+	--dc-d-ac-tx: #ededed;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--dc-tx-1: var(--dc-d-tx-1);
+		--dc-tx-2: var(--dc-d-tx-2);
+		--dc-bg-1: var(--dc-d-bg-1);
+		--dc-bg-2: var(--dc-d-bg-2);
+		--dc-bg-3: var(--dc-d-bg-3);
+		--dc-lk-1: var(--dc-d-lk-1);
+		--dc-lkb-1: var(--dc-d-lkb-1);
+		--dc-lkb-2: var(--dc-d-lkb-2);
+		--dc-lkb-tx: var(--dc-d-lkb-tx);
+		--dc-ac-1: var(--dc-d-ac-1);
+		--dc-ac-tx: var(--dc-d-ac-tx);
+	}
+}
diff --git a/theme/boilerplate.css b/theme/boilerplate.css
index 6c922d9..3fbf2aa 100644
--- a/theme/boilerplate.css
+++ b/theme/boilerplate.css
@@ -1,20 +1,22 @@
 /* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
 /* about: a template that you can modify */
+/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
 
 :root {
-	/* fonts */
-	--dc-font-sans: sans-serif; /* Sans Serif */
-	--dc-font-mono: monospace; /* Monospace */
+	/* font families */
+	--dc-font-sans: sans-serif; /* sans serif */
+	--dc-font-mono: monospace; /* monospace */
+
 	/* colors */
-	--dc-tx-1: #000000; /* Primary text */
-	--dc-tx-2: #1a1a1a; /* Secondary text */
-	--dc-bg-1: #fafafa; /* Main background */
-	--dc-bg-2: #fff; /* Secondary background */
-	--dc-bg-3: #ebebeb; /* Outlines */
-	--dc-lk-1: #0068d6; /* Link text */
-	--dc-lkb-1: #0072f5; /* Link button background */
-	--dc-lkb-2: #0062d1; /* Link button background (hover) */
-	--dc-lkb-tx: #ededed; /* Link button text */
-	--dc-ac-1: #8e4ec6; /* Accent color */
-	--dc-ac-tx: #ededed; /* Accent color text */
+	--dc-tx-1: #000000; /* primary text */
+	--dc-tx-2: #1a1a1a; /* secondary text */
+	--dc-bg-1: #fafafa; /* main background */
+	--dc-bg-2: #fff; /* secondary background */
+	--dc-bg-3: #ebebeb; /* outlines */
+	--dc-lk-1: #0068d6; /* link text */
+	--dc-lkb-1: #0072f5; /* link button background */
+	--dc-lkb-2: #0062d1; /* link button background (hover) */
+	--dc-lkb-tx: #ededed; /* link button text */
+	--dc-ac-1: #8e4ec6; /* accent color */
+	--dc-ac-tx: #ededed; /* accent color text */
 }
diff --git a/theme/terminal.css b/theme/terminal.css
index e82d8c5..3a31026 100644
--- a/theme/terminal.css
+++ b/theme/terminal.css
@@ -4,9 +4,10 @@
 @import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
 
 :root {
-	/* fonts */
+	/* font families */
 	--dc-font-sans: "Geist Mono", monospace;
 	--dc-font-mono: "Geist Mono", monospace;
+
 	/* colors */
 	--dc-tx-1: #ffffff;
 	--dc-tx-2: #eeeeee;
-- 
2.54.0