diff options
| author | Jean-Nicolas Veigel <art.jnveigel@gmail.com> | 2024-03-16 03:54:16 +0100 |
|---|---|---|
| committer | Louis Pilfold <louis@lpil.uk> | 2024-03-26 10:31:25 +0000 |
| commit | a2db58855e1102d38ae2a151cfe04141d429266c (patch) | |
| tree | 423eeb0a7f69886d38915e7d0aadbab89eb244a2 /static/css/theme.css | |
| parent | d5f3d8b2ba17c64f2e4ca7365219b643ac27ed3f (diff) | |
| download | tour-a2db58855e1102d38ae2a151cfe04141d429266c.tar.gz tour-a2db58855e1102d38ae2a151cfe04141d429266c.zip | |
style: add support for more color schemes
toggle between light & dark variants
Diffstat (limited to 'static/css/theme.css')
| -rw-r--r-- | static/css/theme.css | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/static/css/theme.css b/static/css/theme.css new file mode 100644 index 0000000..4d12e42 --- /dev/null +++ b/static/css/theme.css @@ -0,0 +1,52 @@ +/* + +Derives app colors for both dark & light themes from common.css variables + +*/ + +:root { + --hot-pink: #d900b8; + --light-pink: #fff8fe; + --gray-light: #dfdfdf; + + --drop-shadow: 0 0 var(--gap-quarter) var(--color-background), var(--gap) var(--gap) 0 var(--color-drop-shadow), inset 0 0 0 1px var(--color-accent-muted); + + --color-navbar-background: var(--faff-pink); + --color-navbar-text: var(--light-theme-text); + --color-navbar-link: var(--light-theme-text); + + --color-accent: var(--faff-pink); + --color-accent-light: var(--light-pink); + --color-accent-hot: var(--hot-pink); + --color-accent-dark: var(--unexpected-aubergine); +} + +html.theme-light { + --color-background: var(--light-theme-background); + --color-background-dim: var(--light-theme-background-dim); + --color-text: var(--light-theme-text); + --color-text-secondary: var(--light-theme-text-secondary); + --color-link: var(--light-theme-text); + --color-link-decoration: var(--faff-pink); + --color-code: var(--light-theme-code); + --color-divider: var(--faff-pink); + --color-drop-shadow: var(--gray-light); + --color-accent-muted: var(--color-accent-light); + --color-text-accent: var(--color-accent-dark); + color-scheme: light; +} + +html.theme-dark { + --color-background: var(--dark-theme-background); + --color-background-dim: var(--dark-theme-background-dim); + --color-text: var(--dark-theme-text); + --color-text-secondary: var(--dark-theme-text-secondary); + --color-link: var(--dark-theme-text); + --color-link-decoration: var(--faff-pink); + --color-code: var(--dark-theme-code); + --color-divider: var(--unexpected-aubergine); + --color-drop-shadow: var(--color-background-dim); + --color-accent-muted: var(--color-accent-dark); + --color-text-accent: var(--color-accent); + color-scheme: dark; +}
\ No newline at end of file |