diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-13 14:59:42 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-13 14:59:42 +0100 |
| commit | d07c2f6a7ed699f1a7e5762c06b9ec4e8a8e5e94 (patch) | |
| tree | f4ed78caa9a3d86c3fd7903bdb712c5164793075 /public/main.css | |
| parent | 910dc5183c52d4d58cf5ba65583423a95dffdb30 (diff) | |
Fixes dark/light color-scheme switching
Diffstat (limited to 'public/main.css')
| -rw-r--r-- | public/main.css | 25 |
1 files changed, 11 insertions, 14 deletions
diff --git a/public/main.css b/public/main.css index e89888f..fcdf397 100644 --- a/public/main.css +++ b/public/main.css @@ -20,10 +20,10 @@ --color-primary-900: #010003; --color-primary-900: oklch(5% 0.02 290); - --text-color: var(--color-primary-900); - --text-highlight-color: var(--color-primary-800); - --background-color: var(--color-primary-50); - --background-highlight-color: var(--color-primary-200); + --text-color: var(--color-primary-50); + --text-highlight-color: var(--color-primary-100); + --background-color: var(--color-primary-900); + --background-highlight-color: var(--color-primary-800); --max-width-prose-content: 35rem; --max-width-all-content: 56.6rem; /* golden ratio * prose content width */ @@ -53,16 +53,6 @@ background-color: var(--background-color); } -.dark { - --text-color: var(--color-primary-50); - --text-highlight-color: var(--color-primary-100); - --background-color: var(--color-primary-900); - --background-highlight-color: var(--color-primary-800); - - color: var(--text-color); - background-color: var(--background-color); -} - @media (min-width: 40rem) { :root { --sm-to-lg: calc(var(--breakpoint-lg) - var(--breakpoint-sm)); @@ -76,6 +66,13 @@ :is(main, article) { container-name: main; container-type: inline-size; + + --text-color: var(--color-primary-900); + --text-highlight-color: var(--color-primary-800); + --background-color: var(--color-primary-50); + --background-highlight-color: var(--color-primary-200); + color: var(--text-color); + background-color: var(--background-color); } :is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { |