diff options
| author | tdro <tdro@noreply.example.com> | 2023-03-16 17:50:09 -0400 |
|---|---|---|
| committer | tdro <tdro@noreply.example.com> | 2023-03-16 18:56:13 -0400 |
| commit | 06aea1d89d6db9b881a004f897e7f7f42fd9ebb2 (patch) | |
| tree | 30f8809d5964ed6b4226dd84694cf807be91b96e | |
| parent | 218ab3e355eef2e1b76d67d04c76c21e275ecaae (diff) | |
| download | canory-06aea1d89d6db9b881a004f897e7f7f42fd9ebb2.tar.gz canory-06aea1d89d6db9b881a004f897e7f7f42fd9ebb2.tar.bz2 canory-06aea1d89d6db9b881a004f897e7f7f42fd9ebb2.zip | |
assets/css/default: Add accent based light color scheme
To experiment with
| -rw-r--r-- | assets/css/default.css | 37 |
1 files changed, 19 insertions, 18 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index aea6c50..79e87d1 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -23,34 +23,35 @@ /* ----- Colors ----- */ :root { - color-scheme: light dark; - --active-background-alternate: #cce1ff; - --background-bolder: #fff; - --background-rgb: 254, 254, 254; - --background: rgba(var(--background-rgb), 1); - --border-darker: rgba(var(--foreground-rgb), 0.2); - --border-darkest: rgba(var(--foreground-rgb), 0.3); - --border-lighter: rgba(var(--foreground-rgb), 0.08); + --primary: 230; + --secondary: 258; + --accent: 217; + --foreground: hsl(var(--primary), 99%, 5%); + --fade: hsl(var(--primary), 35%, 30%); + --border-lighter: hsl(var(--primary), 35%, 92%); + --border-darker: hsl(var(--primary), 35%, 80%); + --border-darkest: hsl(var(--primary), 35%, 70%); + --background: hsl(var(--secondary), 99%, 99%); + --background-bolder: hsl(var(--secondary), 99%, 98%); + --widget-background: hsl(var(--secondary), 25%, 97%); + --hover-background: hsl(var(--secondary), 25%, 94%); + --focus-within-background: hsl(var(--secondary), 52%, 95%); + --table-even-background: hsl(var(--secondary), 25%, 99%); + --table-odd-background: hsl(var(--secondary), 25%, 97%); + --link: hsl(var(--accent), 99%, 37%); + --hover-background-alternate: hsl(var(--accent), 100%, 96%); + --active-background-alternate: hsl(var(--accent), 100%, 90%); --button-background: #fff; --danger-background-lighter: #fff5f5; --danger-background: #fcd2cf; --danger: #8f0000; - --fade: rgba(var(--foreground-rgb), 0.75); - --focus-within-background: #f0ecf9; - --foreground-rgb: 0, 0, 0; - --foreground: rgba(var(--foreground-rgb), 0.95); - --hover-background-alternate: #ebf3ff; - --hover-background: rgba(var(--foreground-rgb), 0.06); - --link: #0149bc; --shadow: #00000060; --spoiler: #444; --success-background: #d5f3c4; --success: #1d3c0c; - --table-even-background: rgba(var(--foreground-rgb), 0.04); - --table-odd-background: rgba(var(--foreground-rgb), 0.02); --warning-background: #ffe699; --warning: #332600; - --widget-background: rgba(var(--foreground-rgb), 0.02); + color-scheme: light dark; } @media (prefers-color-scheme: dark) { |