Add auto color mode to theme settings (#2701)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

.changeset/theme-settings-auto-mode.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added `auto` color mode to theme settings with system `prefers-color-scheme` support and an inverted primary color scheme option.

.gitignore

@@ -48,3 +48,4 @@ preview-astro
 # Test coverage
 coverage/
 __screenshots__/
+.claude/launch.json

core/js/tabler-theme.ts

@@ -23,6 +23,8 @@ const params = new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams: URLSearchParams, prop: string): string | null => searchParams.get(prop),
 })
 
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
+
 for (const key in themeConfig) {
   const param = params[key]
   let selectedValue: string
@@ -35,9 +37,23 @@ for (const key in themeConfig) {
     selectedValue = storedTheme ? storedTheme : themeConfig[key as keyof ThemeConfig]
   }
 
+  if (key === 'theme' && selectedValue === 'auto') {
+    selectedValue = prefersDark.matches ? 'dark' : 'light'
+  }
+
   if (selectedValue !== themeConfig[key as keyof ThemeConfig]) {
     document.documentElement.setAttribute('data-bs-' + key, selectedValue)
   } else {
     document.documentElement.removeAttribute('data-bs-' + key)
   }
 }
+
+prefersDark.addEventListener('change', (event) => {
+  if (localStorage.getItem('tabler-theme') === 'auto') {
+    if (event.matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.removeAttribute('data-bs-theme')
+    }
+  }
+})

core/scss/tabler-themes.scss

@@ -75,6 +75,7 @@
   --#{$prefix}gray-950: #0c0a09;
 }
 
+// Easter egg: not listed in the theme settings panel, enable with `data-bs-theme-base="pink"` or `?theme-base=pink`
 [data-bs-theme-base='pink'],
 [data-theme-base='pink'] {
   --#{$prefix}gray-50: #fdf2f8;

shared/includes/settings.html

@@ -13,7 +13,7 @@
 				<div class="mb-4">
 					<label class="form-label">Color mode</label>
 					<p class="form-hint">Choose the color mode for your app.</p>
-					{% assign modes = 'light,dark' | split: ',' %} {% for mode in modes %}
+					{% assign modes = 'light,dark,auto' | split: ',' %} {% for mode in modes %}
 					<label class="form-check">
 						<div class="form-selectgroup-item">
 							<input type="radio" name="theme" value="{{ mode }}" class="form-check-input"{% if mode == 'light' %} checked{% endif %} />
@@ -36,6 +36,12 @@
 							</label>
 						</div>
 						{% endfor %}
+						<div class="col-auto">
+							<label class="form-colorinput">
+								<input name="theme-primary" type="radio" value="inverted" class="form-colorinput-input" />
+								<span class="form-colorinput-color bg-inverted"></span>
+							</label>
+						</div>
 					</div>
 				</div>
 
@@ -150,10 +156,17 @@
 
 			for (var key in themeConfig) {
 				if (name === key) {
-					document.documentElement.setAttribute("data-bs-" + key, value)
+					var applied = value
+					if (key === "theme" && value === "auto") {
+						applied = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+					}
+					if (applied !== themeConfig[key]) {
+						document.documentElement.setAttribute("data-bs-" + key, applied)
+					} else {
+						document.documentElement.removeAttribute("data-bs-" + key)
+					}
 					window.localStorage.setItem("tabler-" + key, value)
 					url.searchParams.set(key, value)
-				}
 			}
 
 			window.history.pushState({}, "", url)