lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to using light-dark for CSS colour scheme
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 2m8s
Details

Browse Source
This commit is contained in:
Lewis Dale 2024-06-15 13:26:34 +01:00
parent cc0bd79b63
commit 4f9ed46912
1 changed files with 16 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/css/globals.css
View File

@ -1,81 +1,38 @@
:root {
--color-primary: var(--color-neutral-200);
--color-secondary: var(--color-neutral-800);
--color-decoration: var(--color-amber-200);
--color-subtle: var(--color-neutral-300);
--color-disabled: var(--color-neutral-400);
--color-accent: var(--color-zinc-600);
--color-primary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--color-secondary: light-dark(var(--color-neutral-100), var(--color-neutral-800));
--color-decoration: light-dark(var(--color-yellow-400), var(--color-amber-200));
--color-subtle: light-dark(var(--color-zinc-600), var(--color-neutral-300));
--color-disabled: light-dark(var(--color-neutral-600), var(--color-neutral-400));
--color-accent: light-dark(var(--color-zinc-400), var(--color-zinc-600));
--color-callout-bg: light-dark(var(--color-slate-300), var(--color-slate-800));
--color-callout-border: light-dark(var(--color-coolGray-400), var(--color-coolGray-600));
color-scheme: light dark;
--color-callout-bg: var(--color-slate-800);
--color-callout-border: var(--color-coolGray-600);
}
.inverse {
--color-secondary: var(--color-neutral-100);
--color-primary: var(--color-neutral-800);
--color-decoration: var(--color-yellow-400);
--color-subtle: var(--color-zinc-600);
--color-disabled: var(--color-neutral-600);
--color-accent: var(--color-zinc-400);
--color-callout-bg: var(--color-slate-300);
--color-callout-border: var(--color-coolGray-400);
color-scheme: light;
}
@media (prefers-color-scheme: light) {
:root {
--color-secondary: var(--color-neutral-100);
--color-primary: var(--color-neutral-800);
--color-decoration: var(--color-yellow-400);
--color-subtle: var(--color-zinc-600);
--color-disabled: var(--color-neutral-600);
--color-accent: var(--color-zinc-400);
--color-callout-bg: var(--color-slate-300);
--color-callout-border: var(--color-coolGray-400);
}
.inverse {
--color-primary: var(--color-neutral-200);
--color-secondary: var(--color-neutral-800);
--color-decoration: var(--color-amber-200);
--color-subtle: var(--color-zinc-400);
--color-disabled: var(--color-neutral-400);
--color-accent: var(--color-zinc-600);
--color-callout-bg: var(--color-slate-800);
--color-callout-border: var(--color-coolGray-600);
color-scheme: dark;
}
}
[data-color-scheme="light"] {
--color-secondary: var(--color-neutral-100);
--color-primary: var(--color-neutral-800);
--color-decoration: var(--color-yellow-400);
--color-subtle: var(--color-zinc-600);
--color-disabled: var(--color-neutral-600);
--color-accent: var(--color-zinc-600);
--color-callout-bg: var(--color-slate-300);
--color-callout-border: var(--color-coolGray-400);
color-scheme: light;
}
[data-color-scheme="light"] .inverse {
--color-primary: var(--color-neutral-200);
--color-secondary: var(--color-neutral-800);
--color-decoration: var(--color-amber-200);
--color-subtle: var(--color-neutral-300);
--color-disabled: var(--color-neutral-400);
--color-accent: var(--color-zinc-400);
--color-callout-bg: var(--color-slate-800);
--color-callout-border: var(--color-coolGray-600);
color-scheme: dark;
}
[data-color-scheme="dark"] {
--color-primary: var(--color-neutral-200);
--color-secondary: var(--color-neutral-800);
--color-decoration: var(--color-amber-200);
--color-subtle: var(--color-neutral-300);
--color-disabled: var(--color-neutral-400);
--color-accent: var(--color-zinc-600);
--color-callout-bg: var(--color-slate-800);
--color-callout-border: var(--color-coolGray-600);
color-scheme: dark;
}
body {