From 7cd8a09de3e8ef44ca5542d965c2581cd80944ff Mon Sep 17 00:00:00 2001 From: Ronan Berder Date: Thu, 25 Jun 2026 18:15:35 +0800 Subject: [PATCH] Narrow dark mode selectors --- CHANGELOG.md | 4 ++++ src/css/base/base.css | 2 +- src/css/styles/luma.css | 4 ++-- src/css/styles/lyra.css | 4 ++-- src/css/styles/maia.css | 4 ++-- src/css/styles/mira.css | 4 ++-- src/css/styles/nova.css | 4 ++-- src/css/styles/rhea.css | 4 ++-- src/css/styles/sera.css | 4 ++-- src/css/styles/vega.css | 4 ++-- 10 files changed, 21 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c58bdd..c804051 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Changed + +- Narrowed dark-mode generated selectors to `html.dark` to reduce broad style recalculation work. + ## [1.0.0-beta.7] - 2026-06-25 ### Added diff --git a/src/css/base/base.css b/src/css/base/base.css index ff5c66b..c517064 100644 --- a/src/css/base/base.css +++ b/src/css/base/base.css @@ -1,4 +1,4 @@ -@custom-variant dark (&:is(.dark *)); +@custom-variant dark (&:is(html.dark *)); :root { --radius: 0.625rem; diff --git a/src/css/styles/luma.css b/src/css/styles/luma.css index c956ae9..ac038c8 100644 --- a/src/css/styles/luma.css +++ b/src/css/styles/luma.css @@ -803,11 +803,11 @@ @apply bg-background rounded-full shadow-sm not-dark:bg-clip-padding; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/lyra.css b/src/css/styles/lyra.css index 4a4936c..fce6b19 100644 --- a/src/css/styles/lyra.css +++ b/src/css/styles/lyra.css @@ -800,11 +800,11 @@ @apply bg-background rounded-full; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/maia.css b/src/css/styles/maia.css index a2ff3a1..30ffff5 100644 --- a/src/css/styles/maia.css +++ b/src/css/styles/maia.css @@ -791,11 +791,11 @@ @apply bg-background rounded-full; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/mira.css b/src/css/styles/mira.css index d1c486b..f8de5fc 100644 --- a/src/css/styles/mira.css +++ b/src/css/styles/mira.css @@ -795,11 +795,11 @@ @apply bg-background rounded-full; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/nova.css b/src/css/styles/nova.css index 8d772fc..055c02f 100644 --- a/src/css/styles/nova.css +++ b/src/css/styles/nova.css @@ -808,11 +808,11 @@ @apply bg-background rounded-full; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/rhea.css b/src/css/styles/rhea.css index 3728c58..a272b87 100644 --- a/src/css/styles/rhea.css +++ b/src/css/styles/rhea.css @@ -803,11 +803,11 @@ @apply bg-background rounded-2xl shadow-sm not-dark:bg-clip-padding; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/sera.css b/src/css/styles/sera.css index 52de51a..beab51d 100644 --- a/src/css/styles/sera.css +++ b/src/css/styles/sera.css @@ -824,11 +824,11 @@ @apply bg-background; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; } diff --git a/src/css/styles/vega.css b/src/css/styles/vega.css index 096516c..0af586c 100644 --- a/src/css/styles/vega.css +++ b/src/css/styles/vega.css @@ -808,11 +808,11 @@ @apply bg-background rounded-full; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before { @apply bg-foreground; } - .dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { + html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before { @apply bg-primary-foreground; }