@jant/core 0.2.16 → 0.2.18

package/src/i18n/locales/zh-Hant.ts

@@ -1 +1 @@
-/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages=JSON.parse("{\"+7Wr2a\":[\"編輯: \",[\"title\"]],\"+MACwa\":[\"尚未有任何收藏。\"],\"+owNNn\":[\"文章\"],\"+zy2Nq\":[\"類型\"],\"/0D1Xp\":[\"編輯收藏集\"],\"/Rj5P4\":[\"您的姓名\"],\"0JkyS7\":[\"建立您的第一個頁面\"],\"0a6MpL\":[\"新重定向\"],\"1CU1Td\":[\"網址安全識別碼（小寫、數字、連字符）\"],\"1DBGsz\":[\"筆記\"],\"2N0qpv\":[\"文章標題...\"],\"2q/Q7x\":[\"可見性\"],\"2rJGtU\":[\"頁面標題...\"],\"3Yvsaz\":[\"302（臨時）\"],\"4/SFQS\":[\"查看網站\"],\"40TVQj\":[\"自訂路徑（選填）\"],\"4KzVT6\":[\"刪除頁面\"],\"4b3oEV\":[\"內容\"],\"4mDPGp\":[\"此頁面的 URL 路徑。使用小寫字母、數字和連字符。\"],\"6WdDG7\":[\"頁面\"],\"7G4SBz\":[\"頁面內容（支持Markdown）...\"],\"7Mk+/h\":[\"更新收藏集\"],\"7Q1KKN\":[\"來源路徑\"],\"7nGhhM\":[\"你在想什麼？\"],\"7p5kLi\":[\"儀表板\"],\"8ZsakT\":[\"密碼\"],\"90Luob\":[[\"count\"],\" 條回覆\"],\"A1taO8\":[\"搜尋\"],\"AyHO4m\":[\"這個收藏是關於什麼的？\"],\"B373X+\":[\"編輯文章\"],\"B495Gs\":[\"檔案館\"],\"BjF0Jv\":[\"僅限小寫字母、數字和連字符\"],\"D9Oea+\":[\"永久鏈接\"],\"DHhJ7s\":[\"上一頁\"],\"DoJzLz\":[\"收藏夾\"],\"E80cJw\":[\"刪除此媒體將永久從存儲中移除它。\"],\"EEYbdt\":[\"發佈\"],\"EGwzOK\":[\"完成設置\"],\"EkH9pt\":[\"更新\"],\"FGrimz\":[\"新帖子\"],\"FkMol5\":[\"精選\"],\"Fxf4jq\":[\"描述（可選）\"],\"GA5A5H\":[\"刪除收藏夾\"],\"GorKul\":[\"歡迎來到 Jant\"],\"GrZ6fH\":[\"新頁面\"],\"HfyyXl\":[\"我的部落格\"],\"HiETwV\":[\"安靜（正常）\"],\"Hzi9AA\":[\"未找到任何帖子。\"],\"I6gXOa\":[\"路徑\"],\"IagCbF\":[\"網址\"],\"J4FNfC\":[\"此集合中沒有帖子。\"],\"JIBC/T\":[\"支援的格式：JPEG、PNG、GIF、WebP、SVG。最大大小：10MB。\"],\"JiP4aa\":[\"已發佈的頁面可以通過其路徑訪問。草稿不可見。\"],\"K9NcLu\":[\"使用此 URL 將媒體嵌入到您的帖子中。\"],\"KiJn9B\":[\"備註\"],\"L85WcV\":[\"縮略名\"],\"LkvLQe\":[\"尚未有頁面。\"],\"M8kJqa\":[\"草稿\"],\"M9xgHy\":[\"重定向\"],\"MHrjPM\":[\"標題\"],\"MZbQHL\":[\"未找到結果。\"],\"Mhf/H/\":[\"建立重定向\"],\"MqghUt\":[\"搜尋帖子...\"],\"N40H+G\":[\"所有\"],\"O3oNi5\":[\"電子郵件\"],\"OCNZaU\":[\"重定向來源的路徑\"],\"ODiSoW\":[\"尚未有帖子。\"],\"ONWvwQ\":[\"上傳\"],\"Pbm2/N\":[\"創建收藏夾\"],\"RDjuBN\":[\"設置\"],\"Rj01Fz\":[\"連結\"],\"RwGhWy\":[\"包含 \",[\"count\"],\" 則帖子的主題\"],\"SJmfuf\":[\"網站名稱\"],\"ST+lN2\":[\"尚未上傳任何媒體。\"],\"Tt5T6+\":[\"文章\"],\"TxE+Mj\":[\"1 條回覆\"],\"Tz0i8g\":[\"設定\"],\"U5v6Gh\":[\"編輯頁面\"],\"UDMjsP\":[\"快速操作\"],\"UGT5vp\":[\"保存設定\"],\"VUSy8D\":[\"搜尋失敗。請再試一次。\"],\"WDcQq9\":[\"不公開\"],\"Weq9zb\":[\"一般設定\"],\"WmZ/rP\":[\"到路徑\"],\"Y+7JGK\":[\"創建頁面\"],\"ZQKLI1\":[\"危險區域\"],\"ZhhOwV\":[\"引用\"],\"an5hVd\":[\"圖片\"],\"b+/jO6\":[\"301（永久）\"],\"bHYIks\":[\"登出\"],\"biOepV\":[\"← 返回首頁\"],\"cnGeoo\":[\"刪除\"],\"dEgA5A\":[\"取消\"],\"e6Jr7Q\":[\"← 返回收藏夾\"],\"ePK91l\":[\"編輯\"],\"eWLklq\":[\"引用\"],\"eneWvv\":[\"草稿\"],\"f6e0Ry\":[\"文章\"],\"fG7BxZ\":[\"透過 API 上傳圖片：POST /api/upload，並使用文件表單字段。\"],\"fttd2R\":[\"我的收藏\"],\"hG89Ed\":[\"圖片\"],\"hXzOVo\":[\"下一頁\"],\"he3ygx\":[\"複製\"],\"iH8pgl\":[\"返回\"],\"ig4hg2\":[\"讓我們設置您的網站。\"],\"jpctdh\":[\"查看\"],\"mTOYla\":[\"查看所有文章 →\"],\"n1ekoW\":[\"登入\"],\"oYPBa0\":[\"更新頁面\"],\"pRhYH2\":[\"收藏中的帖子 (\",[\"count\"],\")\"],\"qMyM2u\":[\"來源網址（選填）\"],\"r1MpXi\":[\"安靜\"],\"rdUucN\":[\"預覽\"],\"rzNUSl\":[\"包含 1 則貼文的主題\"],\"sGajR7\":[\"線程開始\"],\"t/YqKh\":[\"移除\"],\"tfrt7B\":[\"未配置任何重定向。\"],\"tiq7kl\":[\"頁面 \",[\"page\"]],\"u2f7vd\":[\"網站描述\"],\"u3wRF+\":[\"已發佈\"],\"u6Hp4N\":[\"Markdown\"],\"uAQUqI\":[\"狀態\"],\"vXIe7J\":[\"語言\"],\"vzU4k9\":[\"新收藏集\"],\"wEF6Ix\":[\"目的地路徑或 URL\"],\"wK4OTM\":[\"標題（選填）\"],\"wM5UXj\":[\"刪除媒體\"],\"wRR604\":[\"頁面\"],\"wja8aL\":[\"無標題\"],\"x0mzE0\":[\"創建你的第一篇帖子\"],\"x4RuFo\":[\"回到首頁\"],\"xYilR2\":[\"媒體\"],\"y28hnO\":[\"文章\"],\"yQ2kGp\":[\"載入更多\"],\"yzF66j\":[\"連結\"],\"z8ajIE\":[\"找到 1 個結果\"],\"zH6KqE\":[\"找到 \",[\"count\"],\" 個結果\"]}")as Messages;
+/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages=JSON.parse("{\"+7Wr2a\":[\"Edit: \",[\"title\"]],\"+MACwa\":[\"尚未有任何收藏。\"],\"+owNNn\":[\"文章\"],\"+zy2Nq\":[\"類型\"],\"/0D1Xp\":[\"編輯收藏集\"],\"/Rj5P4\":[\"您的姓名\"],\"07Epll\":[\"這將為您的網站和儀表板設置主題。所有顏色主題都支持深色模式。\"],\"0JkyS7\":[\"建立您的第一個頁面\"],\"0a6MpL\":[\"新重定向\"],\"1CU1Td\":[\"網址安全識別碼（小寫、數字、連字符）\"],\"1DBGsz\":[\"筆記\"],\"2N0qpv\":[\"文章標題...\"],\"2q/Q7x\":[\"可見性\"],\"2rJGtU\":[\"頁面標題...\"],\"3Yvsaz\":[\"302（臨時）\"],\"4/SFQS\":[\"查看網站\"],\"40TVQj\":[\"自訂路徑（選填）\"],\"4KzVT6\":[\"刪除頁面\"],\"4b3oEV\":[\"內容\"],\"4mDPGp\":[\"此頁面的 URL 路徑。使用小寫字母、數字和連字符。\"],\"6WdDG7\":[\"頁面\"],\"7G4SBz\":[\"頁面內容（支持Markdown）...\"],\"7Mk+/h\":[\"更新收藏集\"],\"7Q1KKN\":[\"來源路徑\"],\"7aECQB\":[\"無效或已過期的連結\"],\"7nGhhM\":[\"你在想什麼？\"],\"7p5kLi\":[\"儀表板\"],\"7vhWI8\":[\"新密碼\"],\"8ZsakT\":[\"密碼\"],\"90Luob\":[[\"count\"],\" 條回覆\"],\"A1taO8\":[\"搜尋\"],\"AyHO4m\":[\"這個收藏是關於什麼的？\"],\"B373X+\":[\"編輯文章\"],\"B495Gs\":[\"檔案館\"],\"BjF0Jv\":[\"僅限小寫字母、數字和連字符\"],\"D9Oea+\":[\"永久鏈接\"],\"DCKkhU\":[\"當前密碼\"],\"DHhJ7s\":[\"上一頁\"],\"DoJzLz\":[\"收藏夾\"],\"E80cJw\":[\"刪除此媒體將永久從存儲中移除它。\"],\"EEYbdt\":[\"發佈\"],\"EGwzOK\":[\"完成設置\"],\"EkH9pt\":[\"更新\"],\"FGrimz\":[\"新帖子\"],\"FkMol5\":[\"精選\"],\"Fxf4jq\":[\"描述（可選）\"],\"GA5A5H\":[\"刪除收藏夾\"],\"GX2VMa\":[\"建立您的管理員帳戶。\"],\"GbVAnd\":[\"此密碼重設連結無效或已過期。請生成一個新的連結。\"],\"GorKul\":[\"歡迎來到 Jant\"],\"GrZ6fH\":[\"新頁面\"],\"GxkJXS\":[\"上傳中...\"],\"HfyyXl\":[\"My Blog\"],\"HiETwV\":[\"安靜（正常）\"],\"Hzi9AA\":[\"未找到任何帖子。\"],\"I6gXOa\":[\"路徑\"],\"IagCbF\":[\"網址\"],\"J4FNfC\":[\"此集合中沒有帖子。\"],\"JIBC/T\":[\"Supported formats: JPEG, PNG, GIF, WebP, SVG. Max size: 10MB.\"],\"Jed1wB\":[\"需要幫助嗎？請訪問<0>文檔</0>。\"],\"JiP4aa\":[\"已發佈的頁面可以通過其路徑訪問。草稿不可見。\"],\"K9NcLu\":[\"使用此 URL 將媒體嵌入到您的帖子中。\"],\"KbS2K9\":[\"重設密碼\"],\"KiJn9B\":[\"備註\"],\"L85WcV\":[\"縮略名\"],\"LkvLQe\":[\"尚未有頁面。\"],\"M1RvTd\":[\"點擊圖片以查看完整大小\"],\"M8kJqa\":[\"草稿\"],\"M9xgHy\":[\"重定向\"],\"MHrjPM\":[\"標題\"],\"MZbQHL\":[\"未找到結果。\"],\"Mhf/H/\":[\"建立重定向\"],\"MqghUt\":[\"搜尋帖子...\"],\"N40H+G\":[\"所有\"],\"O3oNi5\":[\"電子郵件\"],\"OCNZaU\":[\"重定向來源的路徑\"],\"ODiSoW\":[\"尚未有帖子。\"],\"ONWvwQ\":[\"上傳\"],\"Pbm2/N\":[\"創建收藏夾\"],\"RDjuBN\":[\"Setup\"],\"Rj01Fz\":[\"連結\"],\"RwGhWy\":[\"包含 \",[\"count\"],\" 則帖子的主題\"],\"SJmfuf\":[\"網站名稱\"],\"ST+lN2\":[\"尚未上傳任何媒體。\"],\"Tt5T6+\":[\"文章\"],\"TxE+Mj\":[\"1 條回覆\"],\"Tz0i8g\":[\"設定\"],\"U5v6Gh\":[\"編輯頁面\"],\"UDMjsP\":[\"快速操作\"],\"UGT5vp\":[\"保存設定\"],\"VUSy8D\":[\"Search failed. Please try again.\"],\"VhMDMg\":[\"更改密碼\"],\"WDcQq9\":[\"不公開\"],\"Weq9zb\":[\"一般設定\"],\"WmZ/rP\":[\"到路徑\"],\"Y+7JGK\":[\"創建頁面\"],\"ZQKLI1\":[\"危險區域\"],\"ZhhOwV\":[\"引用\"],\"aAIQg2\":[\"外觀\"],\"an5hVd\":[\"圖片\"],\"b+/jO6\":[\"301（永久）\"],\"bHYIks\":[\"登出\"],\"biOepV\":[\"← 返回首頁\"],\"cnGeoo\":[\"刪除\"],\"dEgA5A\":[\"取消\"],\"e6Jr7Q\":[\"← 返回收藏夾\"],\"ePK91l\":[\"編輯\"],\"eWLklq\":[\"引用\"],\"eneWvv\":[\"草稿\"],\"er8+x7\":[\"示範帳戶已預填。只需點擊登入。\"],\"f6e0Ry\":[\"文章\"],\"fG7BxZ\":[\"Upload images via the API: POST /api/upload with a file form field.\"],\"fttd2R\":[\"我的收藏\"],\"hG89Ed\":[\"圖片\"],\"hWOZIv\":[\"請輸入您的新密碼。\"],\"hXzOVo\":[\"下一頁\"],\"he3ygx\":[\"複製\"],\"iH8pgl\":[\"返回\"],\"ig4hg2\":[\"Let's set up your site.\"],\"jpctdh\":[\"查看\"],\"k1ifdL\":[\"處理中...\"],\"mTOYla\":[\"查看所有文章 →\"],\"n1ekoW\":[\"登入\"],\"oYPBa0\":[\"更新頁面\"],\"p2/GCq\":[\"確認密碼\"],\"pRhYH2\":[\"收藏中的帖子 (\",[\"count\"],\")\"],\"pZq3aX\":[\"上傳失敗。請再試一次。\"],\"qMyM2u\":[\"來源網址（選填）\"],\"r1MpXi\":[\"安靜\"],\"rFmBG3\":[\"顏色主題\"],\"rdUucN\":[\"預覽\"],\"rzNUSl\":[\"包含 1 則貼文的主題\"],\"sGajR7\":[\"線程開始\"],\"t/YqKh\":[\"移除\"],\"tfrt7B\":[\"未配置任何重定向。\"],\"tiq7kl\":[\"頁面 \",[\"page\"]],\"u2f7vd\":[\"網站描述\"],\"u3wRF+\":[\"已發佈\"],\"u6Hp4N\":[\"Markdown\"],\"uAQUqI\":[\"狀態\"],\"vXIe7J\":[\"語言\"],\"vzU4k9\":[\"新收藏集\"],\"wEF6Ix\":[\"目的地路徑或 URL\"],\"wK4OTM\":[\"標題（選填）\"],\"wM5UXj\":[\"刪除媒體\"],\"wRR604\":[\"頁面\"],\"wja8aL\":[\"無標題\"],\"x+doid\":[\"圖片會自動優化：調整大小至最大 1920 像素，轉換為 WebP 格式，並去除元數據。\"],\"x0mzE0\":[\"創建你的第一篇帖子\"],\"x4RuFo\":[\"回到首頁\"],\"xYilR2\":[\"媒體\"],\"y28hnO\":[\"文章\"],\"yQ2kGp\":[\"載入更多\"],\"yjkELF\":[\"確認新密碼\"],\"yzF66j\":[\"連結\"],\"z8ajIE\":[\"找到 1 個結果\"],\"zH6KqE\":[\"找到 \",[\"count\"],\" 個結果\"]}")as Messages;

package/src/index.ts

@@ -25,8 +25,6 @@ export type {
   UpdatePost,
   JantConfig,
   JantTheme,
-  SiteConfig,
-  FeatureConfig,
   ThemeComponents,
 } from "./types.js";
 

package/src/lib/config.ts

@@ -0,0 +1,120 @@
+/**
+ * Unified Configuration System
+ *
+ * Provides a flexible configuration system with two priority modes:
+ * - User-configurable (envOnly: false): Database > Environment > Default
+ * - Environment-only (envOnly: true): Environment > Default
+ *
+ * All configuration fields are defined in CONFIG_FIELDS (types.ts).
+ */
+
+import type { Context } from "hono";
+import { CONFIG_FIELDS, type ConfigKey } from "../types.js";
+
+/**
+ * Get the fallback value for a config key (ENV > Default), skipping the database.
+ * Used for placeholder values in forms where the DB value is shown separately.
+ *
+ * @param c - Hono context
+ * @param key - Configuration key from CONFIG_FIELDS
+ * @returns Fallback value from environment or default
+ *
+ * @example
+ * ```typescript
+ * const placeholder = getConfigFallback(c, "SITE_NAME");
+ * // Returns: c.env.SITE_NAME ?? "Jant"
+ * ```
+ */
+export function getConfigFallback(c: Context, key: ConfigKey): string {
+  const field = CONFIG_FIELDS[key];
+  const envValue = c.env[key as keyof typeof c.env];
+  if (envValue && typeof envValue === "string") return envValue;
+  return field.defaultValue;
+}
+
+/**
+ * Generic configuration getter that respects priority settings
+ *
+ * @param c - Hono context
+ * @param key - Configuration key from CONFIG_FIELDS
+ * @returns Configuration value following the defined priority
+ *
+ * @example
+ * ```typescript
+ * // For user-configurable configs (SITE_NAME):
+ * // Returns: (DB: SITE_NAME) ?? c.env.SITE_NAME ?? "Jant"
+ *
+ * // For environment-only configs (SITE_URL):
+ * // Returns: c.env.SITE_URL ?? ""
+ * ```
+ */
+export async function getConfig(c: Context, key: ConfigKey): Promise<string> {
+  const field = CONFIG_FIELDS[key];
+
+  if (!field.envOnly) {
+    // User-configurable: DB > ENV > Default
+    // 1. Check database setting first
+    const dbValue = await c.var.services.settings.get(key);
+    if (dbValue) {
+      return dbValue;
+    }
+  }
+
+  // ENV > Default
+  // 2. Check environment variable
+  const envValue = c.env[key as keyof typeof c.env];
+  if (envValue && typeof envValue === "string") {
+    return envValue;
+  }
+
+  // 3. Default value
+  return field.defaultValue;
+}
+
+/**
+ * Get site name with fallback chain: DB > ENV > Default
+ *
+ * @param c - Hono context
+ * @returns Site name
+ *
+ * @example
+ * ```typescript
+ * const siteName = await getSiteName(c);
+ * // Returns: (DB: SITE_NAME) ?? c.env.SITE_NAME ?? "Jant"
+ * ```
+ */
+export async function getSiteName(c: Context): Promise<string> {
+  return getConfig(c, "SITE_NAME");
+}
+
+/**
+ * Get site description with fallback chain: DB > ENV > Default
+ *
+ * @param c - Hono context
+ * @returns Site description
+ *
+ * @example
+ * ```typescript
+ * const description = await getSiteDescription(c);
+ * // Returns: (DB: SITE_DESCRIPTION) ?? c.env.SITE_DESCRIPTION ?? "A microblog powered by Jant"
+ * ```
+ */
+export async function getSiteDescription(c: Context): Promise<string> {
+  return getConfig(c, "SITE_DESCRIPTION");
+}
+
+/**
+ * Get site language with fallback chain: DB > ENV > Default
+ *
+ * @param c - Hono context
+ * @returns Site language code
+ *
+ * @example
+ * ```typescript
+ * const lang = await getSiteLanguage(c);
+ * // Returns: (DB: SITE_LANGUAGE) ?? c.env.SITE_LANGUAGE ?? "en"
+ * ```
+ */
+export async function getSiteLanguage(c: Context): Promise<string> {
+  return getConfig(c, "SITE_LANGUAGE");
+}

package/src/lib/constants.ts

@@ -21,11 +21,13 @@ export const RESERVED_PATHS = [
   "quotes",
   "media",
   "pages",
+  "reset",
   "p",
   "c",
   "static",
   "assets",
   "health",
+  "appearance",
 ] as const;
 
 export type ReservedPath = (typeof RESERVED_PATHS)[number];
@@ -52,6 +54,7 @@ export const SETTINGS_KEYS = {
   SITE_DESCRIPTION: "SITE_DESCRIPTION",
   SITE_LANGUAGE: "SITE_LANGUAGE",
   THEME: "THEME",
+  PASSWORD_RESET_TOKEN: "PASSWORD_RESET_TOKEN",
 } as const;
 
 export type SettingsKey = (typeof SETTINGS_KEYS)[keyof typeof SETTINGS_KEYS];

package/src/lib/sse.ts

@@ -106,6 +106,22 @@ export interface SSEStream {
    * ```
    */
   remove(selector: string): void;
+
+  /**
+   * Show a toast notification
+   *
+   * Appends a toast element to `#toast-container` with auto-dismiss after 3s.
+   *
+   * @param message - The message to display
+   * @param type - Toast type: "success" (default) or "error"
+   *
+   * @example
+   * ```ts
+   * await stream.toast("Settings saved successfully.");
+   * await stream.toast("Something went wrong.", "error");
+   * ```
+   */
+  toast(message: string, type?: "success" | "error"): void;
 }
 
 /**
@@ -216,6 +232,28 @@ export function sse(
             ),
           );
         },
+
+        toast(message, type = "success") {
+          const cls = type === "error" ? "toast-error" : "toast-success";
+          const icon =
+            type === "error"
+              ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>'
+              : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>';
+          const closeBtn = `<button class="toast-close" data-on:click="el.closest('.toast').classList.add('toast-out'); el.closest('.toast').addEventListener('animationend', () => el.closest('.toast').remove())"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path d="M18 6 6 18M6 6l12 12"/></svg></button>`;
+          const escapedMessage = message
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+          const html = `<div class="toast ${cls}" data-init="setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)">${icon}<span>${escapedMessage}</span>${closeBtn}</div>`;
+          const dataLines: string[] = [
+            `elements ${html}`,
+            "mode append",
+            "selector #toast-container",
+          ];
+          controller.enqueue(
+            encoder.encode(formatEvent("datastar-patch-elements", dataLines)),
+          );
+        },
       };
 
       await handler(stream);

package/src/lib/theme.ts

@@ -0,0 +1,86 @@
+/**
+ * Theme Resolution Helpers
+ *
+ * Resolves the active color theme and builds CSS for injection into `<head>`.
+ */
+
+import type { ColorTheme } from "../theme/color-themes.js";
+import { BUILTIN_COLOR_THEMES } from "../theme/color-themes.js";
+import type { JantConfig } from "../types.js";
+
+/**
+ * Get the list of available color themes.
+ *
+ * Returns `config.theme.colorThemes` if provided, otherwise the built-in list.
+ *
+ * @param config - The Jant configuration
+ * @returns Array of available color themes
+ *
+ * @example
+ * ```typescript
+ * const themes = getAvailableThemes(c.var.config);
+ * ```
+ */
+export function getAvailableThemes(config: JantConfig): ColorTheme[] {
+  return config.theme?.colorThemes ?? BUILTIN_COLOR_THEMES;
+}
+
+/**
+ * Build a `<style>` CSS string from a color theme and optional cssVariables overlay.
+ *
+ * Priority (lowest → highest):
+ *   BaseCoat defaults → selected theme → cssVariables
+ *
+ * @param theme - The active color theme (undefined = no theme overrides)
+ * @param cssVariables - Extra CSS variable overrides from `createApp({ theme: { cssVariables } })`
+ * @returns CSS string to inject in `<head>`, or empty string if nothing to inject
+ *
+ * Uses `:root:root` and `:root.dark` selectors for higher specificity than
+ * BaseCoat defaults (`:root` and `.dark`). This ensures theme overrides win
+ * regardless of source order — important because Vite dev mode injects CSS
+ * as `<style>` tags after the theme `<style>`.
+ *
+ * @example
+ * ```typescript
+ * const css = buildThemeStyle(blueTheme, { "--radius": "0.5rem" });
+ * // => ":root:root { --primary: oklch(...); ... }\n:root.dark { ... }"
+ * ```
+ */
+export function buildThemeStyle(
+  theme: ColorTheme | undefined,
+  cssVariables?: Record<string, string>,
+): string {
+  const lightVars: Record<string, string> = {
+    ...(theme?.light ?? {}),
+    ...(cssVariables ?? {}),
+  };
+  const darkVars: Record<string, string> = {
+    ...(theme?.dark ?? {}),
+    ...(cssVariables ?? {}),
+  };
+
+  const hasLight = Object.keys(lightVars).length > 0;
+  const hasDark = Object.keys(darkVars).length > 0;
+
+  if (!hasLight && !hasDark) return "";
+
+  const parts: string[] = [];
+
+  if (hasLight) {
+    const declarations = Object.entries(lightVars)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join("\n");
+    // :root:root has specificity (0,0,2) > BaseCoat's :root (0,0,1)
+    parts.push(`:root:root {\n${declarations}\n}`);
+  }
+
+  if (hasDark) {
+    const declarations = Object.entries(darkVars)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join("\n");
+    // :root.dark has specificity (0,1,1) > BaseCoat's .dark (0,1,0)
+    parts.push(`:root.dark {\n${declarations}\n}`);
+  }
+
+  return parts.join("\n");
+}

package/src/preset.css

@@ -12,4 +12,13 @@
 
 @theme {
   --radius-default: 0.5rem;
+  --color-success: var(--success);
+}
+
+:root {
+  --success: oklch(0.518 0.16 145.071);
+}
+
+.dark {
+  --success: oklch(0.627 0.194 149.214);
 }

package/src/routes/dash/appearance.tsx

@@ -0,0 +1,180 @@
+/**
+ * Dashboard Appearance Routes
+ */
+
+import { Hono } from "hono";
+import { useLingui } from "@lingui/react/macro";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { DashLayout } from "../../theme/layouts/index.js";
+import { sse } from "../../lib/sse.js";
+import { getSiteName } from "../../lib/config.js";
+import { SETTINGS_KEYS } from "../../lib/constants.js";
+import { getAvailableThemes } from "../../lib/theme.js";
+import type { ColorTheme } from "../../theme/color-themes.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const appearanceRoutes = new Hono<Env>();
+
+function ThemeCard({
+  theme,
+  selected,
+}: {
+  theme: ColorTheme;
+  selected: boolean;
+}) {
+  const expr = `$theme === '${theme.id}'`;
+  const { preview } = theme;
+
+  return (
+    <label
+      class={`block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`}
+      data-class:border-primary={expr}
+      data-class:border-border={`$theme !== '${theme.id}'`}
+    >
+      <div class="grid grid-cols-2">
+        <div
+          class="p-5"
+          style={`background-color:${preview.lightBg};color:${preview.lightText}`}
+        >
+          <input
+            type="radio"
+            name="theme"
+            value={theme.id}
+            data-bind="theme"
+            checked={selected || undefined}
+            class="mb-1"
+          />
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in light mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.lightLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+        <div
+          class="p-5"
+          style={`background-color:${preview.darkBg};color:${preview.darkText}`}
+        >
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in dark mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.darkLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+      </div>
+    </label>
+  );
+}
+
+function AppearanceContent({
+  themes,
+  currentThemeId,
+}: {
+  themes: ColorTheme[];
+  currentThemeId: string;
+}) {
+  const { t } = useLingui();
+
+  const signals = JSON.stringify({ theme: currentThemeId }).replace(
+    /</g,
+    "\\u003c",
+  );
+
+  return (
+    <div
+      data-signals={signals}
+      data-on:change="@post('/dash/appearance')"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Color theme",
+            comment: "@context: Appearance settings heading",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "This will theme both your site and your dashboard. All color themes support dark mode.",
+            comment: "@context: Appearance settings description",
+          })}
+        </p>
+
+        <div class="flex flex-col gap-4">
+          {themes.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              selected={theme.id === currentThemeId}
+            />
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+// Appearance page
+appearanceRoutes.get("/", async (c) => {
+  const { settings } = c.var.services;
+  const siteName = await getSiteName(c);
+  const currentThemeId = (await settings.get(SETTINGS_KEYS.THEME)) ?? "default";
+  const themes = getAvailableThemes(c.var.config);
+  const saved = c.req.query("saved") !== undefined;
+
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Appearance"
+      siteName={siteName}
+      currentPath="/dash/appearance"
+      toast={saved ? { message: "Theme saved successfully." } : undefined}
+    >
+      <AppearanceContent themes={themes} currentThemeId={currentThemeId} />
+    </DashLayout>,
+  );
+});
+
+// Save theme
+appearanceRoutes.post("/", async (c) => {
+  const body = await c.req.json<{ theme: string }>();
+  const { settings } = c.var.services;
+  const themes = getAvailableThemes(c.var.config);
+
+  // Validate theme ID
+  const validTheme = themes.find((t) => t.id === body.theme);
+  if (!validTheme) {
+    return sse(c, async (stream) => {
+      await stream.toast("Invalid theme selected.", "error");
+    });
+  }
+
+  if (validTheme.id === "default") {
+    await settings.remove(SETTINGS_KEYS.THEME);
+  } else {
+    await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
+  }
+
+  // Full page reload to apply the new theme CSS
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/appearance?saved");
+  });
+});

package/src/routes/dash/collections.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Dashboard Collections Routes
  */
@@ -363,7 +364,7 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
 
 // List collections
 collectionsRoutes.get("/", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
   const collections = await c.var.services.collections.list();
 
   return c.html(
@@ -380,7 +381,7 @@ collectionsRoutes.get("/", async (c) => {
 
 // New collection form
 collectionsRoutes.get("/new", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -422,7 +423,7 @@ collectionsRoutes.get("/:id", async (c) => {
   if (!collection) return c.notFound();
 
   const posts = await c.var.services.collections.getPosts(id);
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -444,7 +445,7 @@ collectionsRoutes.get("/:id/edit", async (c) => {
   const collection = await c.var.services.collections.getById(id);
   if (!collection) return c.notFound();
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout

package/src/routes/dash/index.tsx

@@ -9,6 +9,7 @@ import { Trans, useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
+import { getSiteName } from "../../lib/config.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -86,7 +87,7 @@ function DashboardContent({
 }
 
 dashIndexRoutes.get("/", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   // Get some stats
   const allPosts = await c.var.services.posts.list({ limit: 1000 });

package/src/routes/dash/media.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Dashboard Media Routes
  *
@@ -544,7 +545,7 @@ function ViewMediaContent({
 // List media
 mediaRoutes.get("/", async (c) => {
   const mediaList = await c.var.services.media.list(100);
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
 
@@ -570,7 +571,7 @@ mediaRoutes.get("/:id", async (c) => {
   const media = await c.var.services.media.getById(id);
   if (!media) return c.notFound();
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
 

package/src/routes/dash/pages.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Dashboard Pages Routes
  *
@@ -189,7 +190,7 @@ pagesRoutes.get("/", async (c) => {
     visibility: ["unlisted", "draft"],
     limit: 100,
   });
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -205,7 +206,7 @@ pagesRoutes.get("/", async (c) => {
 
 // New page form
 pagesRoutes.get("/new", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -249,7 +250,7 @@ pagesRoutes.get("/:id", async (c) => {
   const page = await c.var.services.posts.getById(id);
   if (!page || page.type !== "page") return c.notFound();
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -271,7 +272,7 @@ pagesRoutes.get("/:id/edit", async (c) => {
   const page = await c.var.services.posts.getById(id);
   if (!page || page.type !== "page") return c.notFound();
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout