From: Adam Dullage Date: Tue, 23 Apr 2024 19:16:05 +0000 (+0100) Subject: Theming X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=635d0d3b3e15e9c0e294ecafd9164bcf8b9ea910;p=flatnotes.git Theming --- diff --git a/client/index.html b/client/index.html index 2f015fb..3f315fe 100644 --- a/client/index.html +++ b/client/index.html @@ -8,7 +8,7 @@ - +

diff --git a/client/style.css b/client/style.css index b5c61c9..b91ad0a 100644 --- a/client/style.css +++ b/client/style.css @@ -1,3 +1,37 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + body { + --theme-brand: 248 166 107; + + --theme-background: 255 255 255; + --theme-background-elevated: 255 255 255; + --theme-background-tint: 243 244 245; + --theme-background-highlight: 239 243 255; + + --theme-text: 44 49 57; + --theme-text-muted: 136 145 161; + --theme-text-very-muted: 193 199 208; + + --theme-shadow: 236 238 240; + --theme-border: 236 238 240; + } + + body.dark-theme { + /* --theme-brand: 248 166 107; */ + + --theme-background: 34 38 44; + --theme-background-elevated: 44 49 57; + --theme-background-tint: 34 38 44; + --theme-background-highlight: 136 145 161; + + --theme-text: 193 199 208; + --theme-text-muted: 136 145 161; + --theme-text-very-muted: 94 107 128; + + --theme-shadow: none; + --theme-border: 94 107 128; + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 48289ca..9a715f4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,22 @@ /** @type {import('tailwindcss').Config} */ + module.exports = { content: ["client/**/*.{html,js,vue}"], theme: { - extend: {}, + extend: { + colors: { + "theme-brand": "rgb(var(--theme-brand) / )", + "theme-background": "rgb(var(--theme-background) / )", + "theme-background-elevated": "rgb(var(--theme-background-elevated) / )", + "theme-background-tint": "rgb(var(--theme-background-tint) / )", + "theme-background-highlight": "rgb(var(--theme-background-highlight) / )", + "theme-text": "rgb(var(--theme-text) / )", + "theme-text-muted": "rgb(var(--theme-text-muted) / )", + "theme-text-very-muted": "rgb(var(--theme-text-very-muted) / )", + "theme-shadow": "rgb(var(--theme-shadow) / )", + "theme-border": "rgb(var(--theme-border) / )", + }, + }, }, plugins: [], };