From 6e24476f6b0a400e683f616fcd37d37375d73393 Mon Sep 17 00:00:00 2001 From: Angela Quinton Date: Tue, 14 Mar 2023 11:15:45 -0400 Subject: [PATCH] support for system-set dark mode --- src/app.css | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/app.css b/src/app.css index 3ef7334..10d0ea0 100644 --- a/src/app.css +++ b/src/app.css @@ -3,12 +3,23 @@ @tailwind utilities; :root { + /* light */ --background: #F8FAF9; /* Sage/Light/2 */ --callout: #ECEFED; /* Sage/Light/4 */ --stroke: #D7DCDA; /* Sage/Light/7 */ - --text-shout: #164430; /* Green/Dark/6 */ + --text-shout: #236E4A; /* Green/Dark/8 */ --text-murmur: #113123; /* Green/Dark/4 */ - --icon-dark: #236E4A; /* Green/Dark/8 */ +} + +@media (prefers-color-scheme: dark) { + :root { + /* dark */ + --background: #141716; /* Sage/Dark/1 */ + --callout: #252A27; /* Sage/Dark/4 */ + --stroke: #393F3C; /* Sage/Dark/7 */ + --text-shout: #92CEAC; /* Green/Light/7 */ + --text-murmur: #99A29E; /* Green/Dark/11 */ + } } body { @@ -19,10 +30,13 @@ body { } h1, h2, h3, h4 { - color: var(--text-shout); font-weight: 700; } +h2, h3, h4 { + color: var(--text-shout); +} + h1 { font-family: "Redaction", Georgia, 'Times New Roman', Times, serif; } @@ -39,6 +53,10 @@ footer { content: "/"; } +.pronoun-example-table { + border-color: var(--stroke); +} + .t-row:not(:last-child) { @apply border-b; border-color: var(--stroke); @@ -48,10 +66,6 @@ footer { background-color: var(--callout); } -.svg-dark-stroke { - stroke: var(--icon-dark); -} - @media (min-width: 1024px) { .t-row:not(:last-child) { @@ -59,5 +73,6 @@ footer { } .t-row:not(:last-child) .t-cell { @apply border-r; + border-color: var(--stroke); } } \ No newline at end of file