From 0ba8cfaf6e412eaa2e00fe92b8dca1bea6206582 Mon Sep 17 00:00:00 2001 From: nycki Date: Fri, 21 Mar 2025 18:35:45 -0700 Subject: [PATCH] refactor css and change light theme to offwhite --- content/index.css | 43 ++++++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/content/index.css b/content/index.css index 2c446a8..9d6a2ee 100644 --- a/content/index.css +++ b/content/index.css @@ -9,33 +9,38 @@ html { --font-family: comic-mono, consolas, sans-serif; --syntax-tab-size: 2; - --background-color: var(--xkcd-eggshell); - --text-color: var(--xkcd-dark-grey); - --text-color-link: var(--xkcd-teal); - --accent-color: var(--xkcd-red-orange); + --background-light: var(--xkcd-offwhite); + --text-light: var(--xkcd-dark-grey); + --link-light: var(--xkcd-teal); + --accent-light: var(--xkcd-red-orange); + + --background-dark: var(--xkcd-very-dark-brown); + --text-dark: var(--xkcd-light-grey); + --link-dark: var(--xkcd-steel-blue); + --accent-dark: var(--xkcd-bronze); +} + +html, [theme='light'] { + --background-color: var(--background-light); + --text-color: var(--text-light); + --text-color-link: var(--link-light); + --accent-color: var(--accent-light); } @media(prefers-color-scheme: dark) { html { - --background-color: var(--xkcd-very-dark-brown); - --text-color: var(--xkcd-light-grey); - --text-color-link: var(--xkcd-steel-blue); - --accent-color: var(--xkcd-bronze); + --background-color: var(--background-dark); + --text-color: var(--text-dark); + --text-color-link: var(--link-dark); + --accent-color: var(--accent-dark); } } [theme='dark'] { - --background-color: var(--xkcd-very-dark-brown); - --text-color: var(--xkcd-light-grey); - --text-color-link: var(--xkcd-steel-blue); - --accent-color: var(--xkcd-bronze); -} - -[theme='light'] { - --background-color: var(--xkcd-eggshell); - --text-color: var(--xkcd-dark-grey); - --text-color-link: var(--xkcd-teal); - --accent-color: var(--xkcd-red-orange); + --background-color: var(--background-dark); + --text-color: var(--text-dark); + --text-color-link: var(--link-dark); + --accent-color: var(--accent-dark); } /* Global stylesheet */