diff --git a/README.md b/README.md index 6ee1be4..0259bff 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the ## Features -- 🎨 **Four color themes** β€” the navbar button cycles **Light β†’ Dark β†’ Nord β†’ Dracula**, remembering the visitor's choice (falls back to the OS preference). +- 🎨 **Five color themes** β€” the navbar button cycles **Light β†’ Dark β†’ Nord β†’ Dracula β†’ Catppuccin**, remembering the visitor's choice (falls back to the OS preference). - 🧱 **Monochrome base design** β€” restrained grayscale palette with crisp typography (Inter). - πŸ‘€ **Profile hero** β€” circular avatar, site title, slogan and social links on the homepage. - πŸ“š **Right sidebar** β€” drop any Bludit sidebar plugin into it (categories, tags, search…). @@ -56,8 +56,8 @@ blowdit/ ## Themes Each theme is just a set of CSS custom properties. Light lives in `:root`; the -others override it under `[data-theme="dark"]`, `[data-theme="nord"]` and -`[data-theme="dracula"]`. The attribute is set on `` before paint (in +others override it under `[data-theme="dark"]`, `[data-theme="nord"]`, +`[data-theme="dracula"]` and `[data-theme="catppuccin"]`. The attribute is set on `` before paint (in `php/head.php`) to avoid a flash, and the navbar button cycles through them, persisting the choice to `localStorage`. diff --git a/css/style.css b/css/style.css index 5b0e631..450d215 100644 --- a/css/style.css +++ b/css/style.css @@ -174,6 +174,42 @@ --social-icon-filter: brightness(0) invert(1); } +/* ---------------------------------------- + THEME TOKENS β€” Catppuccin Mocha + ---------------------------------------- */ +[data-theme="catppuccin"] { + color-scheme: dark; + + --accent: #cba6f7; + --accent-hover: #d7bdf9; + --accent-contrast: #1e1e2e; + + --bg-body: #1e1e2e; + --bg-surface: #313244; + --bg-subtle: #45475a; + --bg-hover: #585b70; + + --text-primary: #cdd6f4; + --text-secondary: #bac2de; + --text-muted: #a6adc8; + + --border-color: #45475a; + --border-subtle: #313244; + + --chrome-bg: #313244; + --chrome-text: rgba(205, 214, 244, 0.9); + --chrome-text-hover: #cdd6f4; + + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45); + + --code-bg: #181825; + --code-text: #cdd6f4; + + --social-icon-filter: brightness(0) invert(1); +} + /* ======================================== BASE ======================================== */ diff --git a/index.php b/index.php index e300591..7a889ac 100644 --- a/index.php +++ b/index.php @@ -119,12 +119,13 @@