From 165efe1d03d409ad2ad45157e2474aab4b990411 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Sun, 8 Jun 2025 18:33:42 -0400 Subject: [PATCH] better colors --- assets/site.css | 48 ++++++++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/assets/site.css b/assets/site.css index aaa656f..96a3069 100644 --- a/assets/site.css +++ b/assets/site.css @@ -14,11 +14,13 @@ } body { - --c-highlight: hsl(0 0% 100% / 87.5%); - --c-dark: hsl(217 17% 21%); + --c-highlight: oklch(100% 0 0 / 0.875); + --c-dark: oklch(32.1% 0.022 259.9); --c-accent: white; - --c-body-background: hsl(0 0% 85%); - --c-text-background-light: hsl(0 0% 95% / 60%); + --c-body-background: oklch(85% 0 338); + --c-bg1: oklch(85% 0.04 285); + --c-bg2: oklch(85% 0.04 188); + --c-text-background-light: oklch(96.2% 0 0 / 0.6); --c-text-light: var(--c-highlight); --c-text-dark: var(--c-dark); @@ -43,8 +45,8 @@ body { ); --inset: calc(50vw - var(--content-width) / 2); background-image: - radial-gradient(circle at -20% 20vmin, #0000ff19, transparent 60%), - radial-gradient(circle at 120% calc(100% - 20vmin), #0873, transparent 60%), + radial-gradient(circle at -20% 20vmin, var(--c-bg1), transparent 60%), + radial-gradient(circle at 120% calc(100% - 20vmin), var(--c-bg2), transparent 60%), url(/noise.png); } @@ -52,14 +54,15 @@ body[data-theme="dark"] { background-color: var(--c-body-background); } [data-theme="dark"] { - --c-highlight: hsl(320 40% 20% / 50%); - --c-dark: hsl(217 9% 8%); - --c-accent: hsl(320 40% 25% / 80%); - --c-body-background: hsl(220 50% 5%); - - --c-text-background-light: hsl(320 40% 20% / 30%); - --c-text-light: hsl(60 50% 86.67%); - --c-text-dark: hsl(60 50% 86.67%); + --c-highlight: oklch(40% 0.088 341.9 / 0.6); + --c-accent: oklch(40% 0.088 341.9 / 0.8); + --c-body-background: oklch(15% 0.05 262); + --c-bg1: oklch(15% 0.05 285); + --c-bg2: oklch(15% 0.05 188); + --c-dark: oklch(19.1% 0.005 259.9); + --c-text-background-light: oklch(30.6% 0.073 341.7 / 0.3); + --c-text-light: oklch(94% 0.045 107.2); + --c-text-dark: oklch(94% 0.045 107.2); } @media (prefers-color-scheme: dark) { @@ -67,14 +70,15 @@ body[data-theme="dark"] { background-color: var(--c-body-background); } [data-theme="auto"] { - --c-highlight: hsl(320 40% 25% / 50%); - --c-dark: hsl(217 9% 8%); - --c-accent: hsl(320 40% 25%); - --c-body-background: hsl(220 50% 5%); - - --c-text-background-light: hsl(320 40% 20% / 30%); - --c-text-light: hsl(60 50% 86.67%); - --c-text-dark: hsl(60 50% 86.67%); + --c-highlight: oklch(40% 0.088 341.9 / 0.6); + --c-accent: oklch(40% 0.088 341.9 / 0.8); + --c-body-background: oklch(15% 0.05 262); + --c-bg1: oklch(15% 0.05 285); + --c-bg2: oklch(15% 0.05 188); + --c-dark: oklch(19.1% 0.005 259.9); + --c-text-background-light: oklch(30.6% 0.073 341.7 / 0.3); + --c-text-light: oklch(94% 0.045 107.2); + --c-text-dark: oklch(94% 0.045 107.2); } }