From 47e5f7b752331c4f6396507e99ea1596223b4889 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Sat, 1 Aug 2026 03:23:18 -0400
Subject: [PATCH] Color scheme theme variables

---
 package.json  |  2 +-
 src/main.scss | 33 +++++++++++----------------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 9f79cb2..ad7d3c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "2.0.4",
+	"version": "2.1.0",
 	"description": "CSS Utility Classes",
 	"readme": "README.md",
 	"scripts": {
diff --git a/src/main.scss b/src/main.scss
index 1e36315..d8bd22a 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -2,7 +2,6 @@
 
 // Theme settings ===========================================================================================
 
-// Colors
 :root {
 	// Theme colors -- what ever you like
 	--theme-background: #fafafa;
@@ -24,29 +23,19 @@
 	--theme-content-width: 1100px;
 	--theme-font: Arial, sans-serif;
 
-	// Light theme
-	&, .theme-light {
-		--theme-surface: #ffffff;
-		--theme-border: #E5E7EB;
-		--theme-muted: #6c757d;
-		--theme-text: #000000;
-
-		--theme-lighter: rgba(255, 255, 255, 0.05);
-		--theme-darker: rgba(0, 0, 0, 0.05);
-	}
-
-	// Dark theme
-	.theme-dark {
-		--theme-surface: #2e2e2e;
-		--theme-border: #374151;
-		--theme-muted: #cccccc;
-		--theme-text: #ffffff;
-
-		--theme-lighter: rgba(255, 255, 255, 0.1);
-		--theme-darker: rgba(0, 0, 0, 0.1);
-	}
+	// Theme dependant (light/dark)
+	color-scheme: light dark;
+	--theme-surface: light-dark(#ffffff, #2e2e2e);
+	--theme-border: light-dark(#E5E7EB, #374151);
+	--theme-muted: light-dark(#6c757d, #cccccc);
+	--theme-text: light-dark(#000000, #ffffff);
+	--theme-lighter: light-dark(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
+	--theme-darker: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
 }
 
+.theme-light { color-scheme: light !important; }
+.theme-dark { color-scheme: dark !important; }
+
 $breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
 $sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);