diff --git a/src/styles/style.css b/src/styles/style.css index 8618bc7..957037d 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -22,7 +22,7 @@ --link-visited: 262 83% 58%; --background: 0 0% 100%; --foreground: 222 47% 11%; - --card: 0 0% 100%; + --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; @@ -432,8 +432,11 @@ --border: 220 9% 23%; --input: 220 9% 23%; } + /* Light: start from current background and mix toward black */ :root { + --bg-tint: 4%; + --background: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white); --background-50: color-mix(in hsl, hsl(var(--background)) 99%, black 1%); --background-100: color-mix(in hsl, hsl(var(--background)) 97%, black 3%); --background-200: color-mix(in hsl, hsl(var(--background)) 94%, black 6%); @@ -448,6 +451,7 @@ /* Dark: start from current background and mix toward white */ :root.dark { + --background: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white); --background-50: color-mix(in hsl, hsl(var(--background)) 24%, white 76%); --background-100: color-mix(in hsl, hsl(var(--background)) 36%, white 64%); --background-200: color-mix(in hsl, hsl(var(--background)) 48%, white 52%);