add catppuccin theme

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 `<html>` 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 `<html>` before paint (in
 `php/head.php`) to avoid a flash, and the navbar button cycles through them,
 persisting the choice to `localStorage`.
 

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
    ======================================== */

index.php

@@ -119,12 +119,13 @@
 	<script>
 		(function () {
 			var STORAGE_KEY = 'blowdit-theme';
-			var THEMES = ['light', 'dark', 'nord', 'dracula'];
+			var THEMES = ['light', 'dark', 'nord', 'dracula', 'catppuccin'];
 			var ICONS = {
-				light:   'bi-brightness-high',
-				dark:    'bi-moon-stars',
-				nord:    'bi-snow',
-				dracula: 'bi-droplet'
+				light:      'bi-brightness-high',
+				dark:       'bi-moon-stars',
+				nord:       'bi-snow',
+				dracula:    'bi-droplet',
+				catppuccin: 'bi-cup-hot'
 			};
 			var root = document.documentElement;
 			var btn = document.getElementById('theme-toggle');