refactor: replace .dark CSS selectors with @variant dark for strategy-agnostic dark mode
Replace all hardcoded .dark class selectors with Tailwind v4's @variant dark
directive, which compiles to whatever strategy is configured in
@custom-variant dark. This means changing the dark mode strategy
(class, prefers-color-scheme, data-attribute, or combined) only requires
updating one line in globals.css — all dark mode variable overrides
and token styles follow automatically.
Changes:
- globals.css: update @custom-variant to (&:where(.dark, .dark *)) to
include the .dark element itself with zero specificity, replace
.dark {} block with @variant dark {}
- liveline.css: replace .dark .liveline-page {} with
@variant dark { .liveline-page {} }
- liveline-prism.css: replace 20+ .dark .token.* rules with a single
@variant dark {} block
This commit is contained in:
Tommy D. Rossi
@@ -1,5 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.871 0.006 286.286);
|
||||
}
|
||||
.dark {
|
||||
@variant dark {
|
||||
--background: oklch(0.21 0.006 285.885);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
|
||||
@@ -135,92 +135,96 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
/* ======================================================================
|
||||
Dark mode - GitHub Dark inspired palette
|
||||
Dark mode - GitHub Dark inspired palette.
|
||||
Uses @variant dark so it follows whatever strategy is configured
|
||||
in @custom-variant dark (globals.css).
|
||||
====================================================================== */
|
||||
|
||||
.dark code[class*="language-"],
|
||||
.dark pre[class*="language-"] {
|
||||
color: #e6edf3;
|
||||
}
|
||||
@variant dark {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.keyword,
|
||||
.dark .token.module,
|
||||
.dark .token.imports,
|
||||
.dark .token.control-flow {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token.keyword,
|
||||
.token.module,
|
||||
.token.imports,
|
||||
.token.control-flow {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token.string,
|
||||
.dark .token.template-string,
|
||||
.dark .token.attr-value {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.token.string,
|
||||
.token.template-string,
|
||||
.token.attr-value {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.dark .token.function,
|
||||
.dark .token.class-name {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.dark .token.property,
|
||||
.dark .token.parameter {
|
||||
color: #ffa657;
|
||||
}
|
||||
.token.property,
|
||||
.token.parameter {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
.token.tag .token.tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.class-name {
|
||||
color: #7ee787;
|
||||
}
|
||||
.token.tag .token.class-name {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.attr-name,
|
||||
.dark .token.attr-name {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token.tag .token.attr-name,
|
||||
.token.attr-name {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token.number {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token.number {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token.operator {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token.operator {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.boolean,
|
||||
.dark .token.constant,
|
||||
.dark .token.builtin {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.builtin {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token.comment,
|
||||
.dark .token.prolog,
|
||||
.dark .token.doctype,
|
||||
.dark .token.cdata {
|
||||
color: #8b949e;
|
||||
font-style: italic;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8b949e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token.tag .token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.spread {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token.spread {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token.plain-text {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token.plain-text {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.regex {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.token.regex {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.dark .language-bash .token.function {
|
||||
color: #79c0ff;
|
||||
.language-bash .token.function {
|
||||
color: #79c0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,51 +96,54 @@
|
||||
--ll-fade-12: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
.dark .liveline-page {
|
||||
--ll-text-primary: rgba(255, 255, 255, 0.9);
|
||||
--ll-text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--ll-text-tertiary: rgba(255, 255, 255, 0.25);
|
||||
--ll-text-muted: rgba(255, 255, 255, 0.35);
|
||||
--ll-text-hover: rgba(255, 255, 255, 0.7);
|
||||
--ll-bg: rgb(17, 17, 17);
|
||||
--ll-border: rgba(255, 255, 255, 0.1);
|
||||
--ll-divider: rgba(255, 255, 255, 0.06);
|
||||
--ll-code-bg: rgba(255, 255, 255, 0.05);
|
||||
--ll-code-line-nr: rgba(255, 255, 255, 0.15);
|
||||
--ll-selection-bg: rgba(255, 255, 255, 0.1);
|
||||
/* Dark mode overrides — uses @variant dark so it follows whatever
|
||||
strategy is configured in @custom-variant dark (globals.css) */
|
||||
@variant dark {
|
||||
.liveline-page {
|
||||
--ll-text-primary: rgba(255, 255, 255, 0.9);
|
||||
--ll-text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--ll-text-tertiary: rgba(255, 255, 255, 0.25);
|
||||
--ll-text-muted: rgba(255, 255, 255, 0.35);
|
||||
--ll-text-hover: rgba(255, 255, 255, 0.7);
|
||||
--ll-bg: rgb(17, 17, 17);
|
||||
--ll-border: rgba(255, 255, 255, 0.1);
|
||||
--ll-divider: rgba(255, 255, 255, 0.06);
|
||||
--ll-code-bg: rgba(255, 255, 255, 0.05);
|
||||
--ll-code-line-nr: rgba(255, 255, 255, 0.15);
|
||||
--ll-selection-bg: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--ll-btn-bg: rgb(30, 30, 30);
|
||||
--ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
|
||||
rgba(255, 255, 255, 0.02) 0px 4px 16px,
|
||||
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
|
||||
--ll-btn-bg: rgb(30, 30, 30);
|
||||
--ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
|
||||
rgba(255, 255, 255, 0.02) 0px 4px 16px,
|
||||
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
|
||||
|
||||
--ll-primary: #60a5fa;
|
||||
--ll-secondary: #f5a623;
|
||||
--ll-primary: #60a5fa;
|
||||
--ll-secondary: #f5a623;
|
||||
|
||||
--ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
|
||||
--ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
|
||||
0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
|
||||
0 1rem 2rem rgba(0, 0, 0, 0.2),
|
||||
0 0.625rem 1rem rgba(0, 0, 0, 0.15),
|
||||
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
|
||||
0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
|
||||
0 0 0.125rem rgba(0, 0, 0, 0.05);
|
||||
--ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
|
||||
--ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
|
||||
0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
|
||||
0 1rem 2rem rgba(0, 0, 0, 0.2),
|
||||
0 0.625rem 1rem rgba(0, 0, 0, 0.15),
|
||||
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
|
||||
0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
|
||||
0 0 0.125rem rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* Header fade gradient stops (dark) */
|
||||
--ll-fade-0: rgb(17, 17, 17);
|
||||
--ll-fade-1: rgba(17, 17, 17, 0.737);
|
||||
--ll-fade-2: rgba(17, 17, 17, 0.541);
|
||||
--ll-fade-3: rgba(17, 17, 17, 0.382);
|
||||
--ll-fade-4: rgba(17, 17, 17, 0.278);
|
||||
--ll-fade-5: rgba(17, 17, 17, 0.194);
|
||||
--ll-fade-6: rgba(17, 17, 17, 0.126);
|
||||
--ll-fade-7: rgba(17, 17, 17, 0.075);
|
||||
--ll-fade-8: rgba(17, 17, 17, 0.042);
|
||||
--ll-fade-9: rgba(17, 17, 17, 0.021);
|
||||
--ll-fade-10: rgba(17, 17, 17, 0.008);
|
||||
--ll-fade-11: rgba(17, 17, 17, 0.002);
|
||||
--ll-fade-12: rgba(17, 17, 17, 0);
|
||||
/* Header fade gradient stops (dark) */
|
||||
--ll-fade-0: rgb(17, 17, 17);
|
||||
--ll-fade-1: rgba(17, 17, 17, 0.737);
|
||||
--ll-fade-2: rgba(17, 17, 17, 0.541);
|
||||
--ll-fade-3: rgba(17, 17, 17, 0.382);
|
||||
--ll-fade-4: rgba(17, 17, 17, 0.278);
|
||||
--ll-fade-5: rgba(17, 17, 17, 0.194);
|
||||
--ll-fade-6: rgba(17, 17, 17, 0.126);
|
||||
--ll-fade-7: rgba(17, 17, 17, 0.075);
|
||||
--ll-fade-8: rgba(17, 17, 17, 0.042);
|
||||
--ll-fade-9: rgba(17, 17, 17, 0.021);
|
||||
--ll-fade-10: rgba(17, 17, 17, 0.008);
|
||||
--ll-fade-11: rgba(17, 17, 17, 0.002);
|
||||
--ll-fade-12: rgba(17, 17, 17, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (color: color(display-p3 1 1 1)) {
|
||||
|
||||
Reference in New Issue
Block a user