From 12d6af83cf2694b3d1bd2713e07130c1142215ae Mon Sep 17 00:00:00 2001 From: Samidy Date: Fri, 5 Dec 2025 18:07:32 +0300 Subject: [PATCH] Add files for christmas theme, theme handler, feedback revamp and cattpuccin theme --- docs/.vitepress/config.mts | 2 +- docs/.vitepress/constants.ts | 2 +- docs/.vitepress/theme/Layout.vue | 7 + .../theme/components/ColorPicker.vue | 321 +++++++++----- docs/.vitepress/theme/components/Feedback.vue | 39 +- .../theme/components/SidebarCard.vue | 11 +- .../theme/components/ThemeDropdown.vue | 184 ++++++++ .../theme/components/ThemeSelector.vue | 48 +++ docs/.vitepress/theme/index.ts | 3 + docs/.vitepress/theme/themes/README.md | 109 +++++ .../theme/themes/configs/catppuccin.ts | 161 +++++++ .../theme/themes/configs/christmas.ts | 161 +++++++ docs/.vitepress/theme/themes/configs/dark.ts | 161 +++++++ docs/.vitepress/theme/themes/configs/index.ts | 25 ++ docs/.vitepress/theme/themes/index.ts | 19 + docs/.vitepress/theme/themes/themeHandler.ts | 395 ++++++++++++++++++ docs/.vitepress/theme/themes/types.ts | 134 ++++++ 17 files changed, 1655 insertions(+), 127 deletions(-) create mode 100644 docs/.vitepress/theme/components/ThemeDropdown.vue create mode 100644 docs/.vitepress/theme/components/ThemeSelector.vue create mode 100644 docs/.vitepress/theme/themes/README.md create mode 100644 docs/.vitepress/theme/themes/configs/catppuccin.ts create mode 100644 docs/.vitepress/theme/themes/configs/christmas.ts create mode 100644 docs/.vitepress/theme/themes/configs/dark.ts create mode 100644 docs/.vitepress/theme/themes/configs/index.ts create mode 100644 docs/.vitepress/theme/themes/index.ts create mode 100644 docs/.vitepress/theme/themes/themeHandler.ts create mode 100644 docs/.vitepress/theme/themes/types.ts diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index c126e7681..8b73fb0be 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -96,7 +96,7 @@ export default defineConfig({ { find: /^.*VPSwitchAppearance\.vue$/, replacement: fileURLToPath( - new URL('./theme/Appearance.vue', import.meta.url) + new URL('./theme/components/ThemeDropdown.vue', import.meta.url) ) } ] diff --git a/docs/.vitepress/constants.ts b/docs/.vitepress/constants.ts index 0d0091e00..01942c889 100644 --- a/docs/.vitepress/constants.ts +++ b/docs/.vitepress/constants.ts @@ -332,4 +332,4 @@ export const sidebar: DefaultTheme.Sidebar | DefaultTheme.NavItemWithLink[] = [ } ] } -] +] \ No newline at end of file diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue index 4f37b3b8c..17b8bbe56 100644 --- a/docs/.vitepress/theme/Layout.vue +++ b/docs/.vitepress/theme/Layout.vue @@ -1,9 +1,12 @@ diff --git a/docs/.vitepress/theme/components/Feedback.vue b/docs/.vitepress/theme/components/Feedback.vue index 876c99794..014c757db 100644 --- a/docs/.vitepress/theme/components/Feedback.vue +++ b/docs/.vitepress/theme/components/Feedback.vue @@ -145,36 +145,28 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value) - +
+ +
+ +
+ +
- + \ No newline at end of file diff --git a/docs/.vitepress/theme/components/ThemeDropdown.vue b/docs/.vitepress/theme/components/ThemeDropdown.vue new file mode 100644 index 000000000..e7f2d6994 --- /dev/null +++ b/docs/.vitepress/theme/components/ThemeDropdown.vue @@ -0,0 +1,184 @@ + + + + + diff --git a/docs/.vitepress/theme/components/ThemeSelector.vue b/docs/.vitepress/theme/components/ThemeSelector.vue new file mode 100644 index 000000000..1653f3d27 --- /dev/null +++ b/docs/.vitepress/theme/components/ThemeSelector.vue @@ -0,0 +1,48 @@ + + + diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 04b2aa4b9..2c37e37ef 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -18,6 +18,7 @@ import type { Theme } from 'vitepress' import Components from '@fmhy/components' import DefaultTheme from 'vitepress/theme' import { loadProgress } from './composables/nprogress' +import { useThemeHandler } from './themes/themeHandler' import Layout from './Layout.vue' import Post from './PostLayout.vue' @@ -34,5 +35,7 @@ export default { app.component('Post', Post) app.component('Feedback', Feedback) loadProgress(router) + // Initialize theme handler + useThemeHandler() } } satisfies Theme diff --git a/docs/.vitepress/theme/themes/README.md b/docs/.vitepress/theme/themes/README.md new file mode 100644 index 000000000..9aa112d5d --- /dev/null +++ b/docs/.vitepress/theme/themes/README.md @@ -0,0 +1,109 @@ +# Theme System + +This document explains the updated theme architecture, display modes, and integration components in the site. + +## Architecture + +- Display modes: `light` and `dark`. +- AMOLED: an enhancement of `dark` mode (pure black backgrounds) toggled on top of dark β€” not a separate mode. +- Themes: color schemes and optional design tokens that apply across modes. +- Modes are independent from themes; themes define colors and tokens for light/dark. + +## File Structure + +``` +docs/.vitepress/theme/themes/ +β”œβ”€β”€ types.ts // Type definitions +β”œβ”€β”€ themeHandler.ts // Theme handler logic & DOM/CSS application +β”œβ”€β”€ index.ts // Exports +└── configs/ + β”œβ”€β”€ index.ts // Theme registry (default + named themes) + └── catppuccin.ts // Example theme (default) +``` + +## Core Types + +- `DisplayMode`: `'light' | 'dark'`. +- `Theme`: `{ name, displayName, preview?, logo?, modes: { light, dark }, ... }`. +- `ModeColors`: + - `brand?`: optional brand colors (`1`, `2`, `3`, `soft`). If omitted, the ColorPicker controls brand. + - `bg`, `bgAlt`, `bgElv`, `bgMark?`. + - `text?`: optional (`1`, `2`, `3`). If omitted, VitePress defaults are used. + - `button`: `brand` and `alt` sub-objects with `bg`, `border`, `text`, `hover*`, `active*`. + - `customBlock`: `info`, `tip`, `warning`, `danger` with `bg`, `border`, `text`, `textDeep`. + - `selection`: `{ bg }`. + - `home?`: optional hero styles. + +## Handler Behavior (`themeHandler.ts`) + +- Persists `theme` (`vitepress-theme-name`) and `mode` (`vitepress-display-mode`). +- Applies HTML classes: always the current mode; adds `dark` for compatibility; adds `amoled` when dark + AMOLED enabled. +- AMOLED handling: overrides dark backgrounds to pure black while retaining other dark tokens. +- Brand colors: + - If theme provides brand colors, inline CSS variables are set. + - If theme omits brand colors, inline brand variables are removed so the ColorPicker stylesheet takes effect. +- Text colors: + - Applied only if defined in the theme; otherwise defaults are used. +- Custom logo: + - If theme provides `logo`, sets `--vp-theme-logo: url(...)` for downstream usage. + +## UI Components + +- `ThemeDropdown.vue`: replaces the appearance toggle. + - Options: Light, Dark, AMOLED (as dark variant). + - Stores/reads mode and AMOLED-enabled state. + - Aliased via `docs/.vitepress/config.mts` to override `VPSwitchAppearance.vue`. +- `ColorPicker.vue`: + - Controls brand color CSS variables via a stylesheet tag (`#brand-color`). + - Reapplies colors on a custom event `theme-changed-apply-colors` when switching to themes without brand. +- `ThemeSelector.vue`: + - Shows circular previews per theme (image via `preview` or gradient fallback). + - Calls `setTheme(name)`; independent from ColorPicker. + +## Theme Registry (`configs/index.ts`) + +- Example: +```ts +import { catppuccinTheme } from './catppuccin' + +export const themeRegistry = { + default: catppuccinTheme, + catppuccin: catppuccinTheme +} +``` + +## Creating a Theme (`configs/.ts`) + +- Export a `Theme` object with: + - `name`, `displayName`, optional `preview` (image URL/data) and `logo`. + - `modes.light` and `modes.dark` objects. + - Optional `fonts`, `spacing`, `borderRadius`, `customProperties`. +- Register it in `configs/index.ts`. +- If you omit `brand` in a mode, the ColorPicker-selected brand colors will be used. +- If you omit `text` in a mode, VitePress default text colors will be used. + +## CSS Variables + +- Brand: `--vp-c-brand-1`, `--vp-c-brand-2`, `--vp-c-brand-3`, `--vp-c-brand-soft`. +- Background: `--vp-c-bg`, `--vp-c-bg-alt`, `--vp-c-bg-elv`, `--vp-c-bg-mark`. +- Text: `--vp-c-text-1`, `--vp-c-text-2`, `--vp-c-text-3`. +- Buttons: `--vp-button-brand-*`, `--vp-button-alt-*`. +- Custom blocks: `--vp-custom-block-{type}-*`. +- Selection: `--vp-c-selection-bg`. +- Home hero: `--vp-home-hero-*`. +- Custom props: all keys in `customProperties`. +- Optional: `--vp-theme-logo` (when theme defines `logo`). + +## Migration Notes + +- AMOLED is no longer a separate mode; it’s a dark enhancement (pure black backgrounds) toggled in the dropdown. +- The legacy `Appearance.vue` toggle is replaced by `ThemeDropdown.vue` via alias in `config.mts`. +- Themes can rely on the ColorPicker for brand colors by omitting `brand`. + +## Troubleshooting + +- Theme not applying: ensure it’s added to `themeRegistry` and named correctly. +- Brand not changing: if a theme sets inline brand variables, ColorPicker won’t override; remove `brand` from the theme to defer to ColorPicker. +- Colors not updating after theme switch: ColorPicker listens for `theme-changed-apply-colors`; make sure that event dispatch remains in `setTheme()`. +- AMOLED not pure black: confirm dark mode is active and AMOLED toggle is enabled; handler overrides backgrounds when enabled. + diff --git a/docs/.vitepress/theme/themes/configs/catppuccin.ts b/docs/.vitepress/theme/themes/configs/catppuccin.ts new file mode 100644 index 000000000..9125cb769 --- /dev/null +++ b/docs/.vitepress/theme/themes/configs/catppuccin.ts @@ -0,0 +1,161 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Theme } from '../types' + +export const catppuccinTheme: Theme = { + name: 'catppuccin', + displayName: 'Catppuccin', + preview: 'https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png', + modes: { + light: { + brand: { + 1: '#8b5cf6', + 2: '#7c3aed', + 3: '#5b21b6', + soft: '#a78bfa' + }, + bg: '#ffffff', + bgAlt: '#f9fafb', + bgElv: 'rgba(255, 255, 255, 0.7)', + bgMark: 'rgb(232, 232, 232)', + text: { + 1: '#1f2937', + 2: '#4b5563', + 3: '#6b7280' + }, + button: { + brand: { + bg: '#8b5cf6', + border: '#a78bfa', + text: 'rgba(42, 40, 47)', + hoverBorder: '#a78bfa', + hoverText: 'rgba(42, 40, 47)', + hoverBg: '#a78bfa', + activeBorder: '#a78bfa', + activeText: 'rgba(42, 40, 47)', + activeBg: '#8b5cf6' + }, + alt: { + bg: '#484848', + text: '#f0eeee', + hoverBg: '#484848', + hoverText: '#f0eeee' + } + }, + customBlock: { + info: { + bg: '#ede9fe', + border: '#5b21b6', + text: '#5b21b6', + textDeep: '#4c1d95' + }, + tip: { + bg: '#d1fae5', + border: '#065f46', + text: '#065f46', + textDeep: '#064e3b' + }, + warning: { + bg: '#fef3c7', + border: '#92400e', + text: '#92400e', + textDeep: '#78350f' + }, + danger: { + bg: '#ffe4e6', + border: '#9f1239', + text: '#9f1239', + textDeep: '#881337' + } + }, + selection: { + bg: '#5586a6' + }, + home: { + heroNameColor: 'transparent', + heroNameBackground: '-webkit-linear-gradient(120deg, #c4b5fd 30%, #7bc5e4)', + heroImageBackground: 'linear-gradient(-45deg, #c4b5fd 50%, #47caff 50%)', + heroImageFilter: 'blur(44px)' + } + }, + dark: { + brand: { + 1: '#a78bfa', + 2: '#8b5cf6', + 3: '#6d28d9', + soft: '#c4b5fd' + }, + bg: 'rgb(26, 26, 26)', + bgAlt: 'rgb(23, 23, 23)', + bgElv: 'rgba(23, 23, 23, 0.8)', + button: { + brand: { + bg: '#a78bfa', + border: '#c4b5fd', + text: 'rgba(42, 40, 47)', + hoverBorder: '#c4b5fd', + hoverText: 'rgba(42, 40, 47)', + hoverBg: '#c4b5fd', + activeBorder: '#c4b5fd', + activeText: 'rgba(42, 40, 47)', + activeBg: '#a78bfa' + }, + alt: { + bg: '#484848', + text: '#f0eeee', + hoverBg: '#484848', + hoverText: '#f0eeee' + } + }, + customBlock: { + info: { + bg: '#2e1065', + border: '#5b21b6', + text: '#ddd6fe', + textDeep: '#ddd6fe' + }, + tip: { + bg: '#022c22', + border: '#065f46', + text: '#a7f3d0', + textDeep: '#a7f3d0' + }, + warning: { + bg: '#451a03', + border: '#92400e', + text: '#fef08a', + textDeep: '#fef08a' + }, + danger: { + bg: '#4c0519', + border: '#9f1239', + text: '#fecdd3', + textDeep: '#fecdd3' + } + }, + selection: { + bg: '#0f2c47' + }, + home: { + heroNameColor: 'transparent', + heroNameBackground: '-webkit-linear-gradient(120deg, #c4b5fd 30%, #7bc5e4)', + heroImageBackground: 'linear-gradient(-45deg, #c4b5fd 50%, #47caff 50%)', + heroImageFilter: 'blur(44px)' + } + } + } +} diff --git a/docs/.vitepress/theme/themes/configs/christmas.ts b/docs/.vitepress/theme/themes/configs/christmas.ts new file mode 100644 index 000000000..d82f17d3a --- /dev/null +++ b/docs/.vitepress/theme/themes/configs/christmas.ts @@ -0,0 +1,161 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Theme } from '../types' + +export const christmasTheme: Theme = { + name: 'Christmas', + displayName: 'Christmas', + preview: 'https://files.catbox.moe/inbi62.png', + modes: { + light: { + brand: { + 1: '#BD2F2F', + 2: '#22ff00ff', + 3: '#155C2F', + soft: '#a200ffff' + }, + bg: '#ffffffff', + bgAlt: '#f9fafb', + bgElv: 'rgba(255, 255, 255, 0.7)', + bgMark: 'rgb(232, 232, 232)', + text: { + 1: '#1f2937', + 2: '#4b5563', + 3: '#353638ff' + }, + button: { + brand: { + bg: '#155C2F', + border: '#0E3B1F', + text: 'rgba(255, 255, 255)', + hoverBorder: '#072a15ff', + hoverText: 'rgba(255, 255, 255)', + hoverBg: '#072a15ff', + activeBorder: '#072a15ff', + activeText: 'rgba(255, 255, 255)', + activeBg: '#072a15ff' + }, + alt: { + bg: '#484848', + text: '#f0eeee', + hoverBg: '#484848', + hoverText: '#f0eeee' + } + }, + customBlock: { + info: { + bg: '#dbeafe', + border: '#1e40af', + text: '#1e40af', + textDeep: '#1e3a8a' + }, + tip: { + bg: '#D8F8E4', + border: '#447A61', + text: '#2D6A58', + textDeep: '#166534' + }, + warning: { + bg: '#FCEFC3', + border: '#9A8034', + text: '#9C701B', + textDeep: '#92400e' + }, + danger: { + bg: '#FBE1E2', + border: '#B3565E', + text: '#912239', + textDeep: '#991b1b' + } + }, + selection: { + bg: '#bfdbfe' + }, + home: { + heroNameColor: 'transparent', + heroNameBackground: '-webkit-linear-gradient(120deg, #BD2F2F 30%, #f9fafb)', + heroImageBackground: 'linear-gradient(-45deg, #BD2F2F 50%, #f9fafb 50%)', + heroImageFilter: 'blur(44px)' + } + }, + dark: { + brand: { + 1: '#2CA03C', + 2: '#22ff00ff', + 3: '#5C151A', + soft: '#a200ffff' + }, + bg: 'rgb(26, 26, 26)', + bgAlt: 'rgb(23, 23, 23)', + bgElv: 'rgba(23, 23, 23, 0.8)', + button: { + brand: { + bg: '#155C2F', + border: '#0E3B1F', + text: 'rgba(255, 255, 255)', + hoverBorder: '#072a15ff', + hoverText: 'rgba(255, 255, 255)', + hoverBg: '#072a15ff', + activeBorder: '#072a15ff', + activeText: 'rgba(255, 255, 255)', + activeBg: '#072a15ff' + }, + alt: { + bg: '#484848', + text: '#f0eeee', + hoverBg: '#484848', + hoverText: '#f0eeee' + } + }, + customBlock: { + info: { + bg: '#0c4a6e', + border: '#0284c7', + text: '#bae6fd', + textDeep: '#bae6fd' + }, + tip: { + bg: '#0C2A20', + border: '#184633', + text: '#B0EBC9', + textDeep: '#166534' + }, + warning: { + bg: '#403207', + border: '#7E6211', + text: '#F9DE88', + textDeep: '#92400e' + }, + danger: { + bg: '#3F060A', + border: '#7C0F18', + text: '#F7C1BC', + textDeep: '#991b1b' + } + }, + selection: { + bg: '#1e3a8a' + }, + home: { + heroNameColor: 'transparent', + heroNameBackground: '-webkit-linear-gradient(120deg, #f9fafb 30%, #BD2F2F)', + heroImageBackground: 'linear-gradient(-45deg, #f9fafb 50%,#BD2F2F 50%)', + heroImageFilter: 'blur(44px)' + } + } + } +} diff --git a/docs/.vitepress/theme/themes/configs/dark.ts b/docs/.vitepress/theme/themes/configs/dark.ts new file mode 100644 index 000000000..bf0b9acf4 --- /dev/null +++ b/docs/.vitepress/theme/themes/configs/dark.ts @@ -0,0 +1,161 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Theme } from '../types' + +export const darkTheme: Theme = { + name: 'Christmas', + displayName: 'Christmas', + preview: 'https://files.catbox.moe/inbi62.png', + modes: { + light: { + brand: { + 1: '#BD2F2F', + 2: '#22ff00ff', + 3: '#155C2F', + soft: '#a200ffff' + }, + bg: '#ffffffff', + bgAlt: '#f9fafb', + bgElv: 'rgba(255, 255, 255, 0.7)', + bgMark: 'rgb(232, 232, 232)', + text: { + 1: '#1f2937', + 2: '#4b5563', + 3: '#353638ff' + }, + button: { + brand: { + bg: '#155C2F', + border: '#0E3B1F', + text: 'rgba(255, 255, 255)', + hoverBorder: '#072a15ff', + hoverText: 'rgba(255, 255, 255)', + hoverBg: '#072a15ff', + activeBorder: '#072a15ff', + activeText: 'rgba(255, 255, 255)', + activeBg: '#072a15ff' + }, + alt: { + bg: '#484848', + text: '#f0eeee', + hoverBg: '#484848', + hoverText: '#f0eeee' + } + }, + customBlock: { + info: { + bg: '#dbeafe', + border: '#1e40af', + text: '#1e40af', + textDeep: '#1e3a8a' + }, + tip: { + bg: '#D8F8E4', + border: '#447A61', + text: '#2D6A58', + textDeep: '#166534' + }, + warning: { + bg: '#FCEFC3', + border: '#9A8034', + text: '#9C701B', + textDeep: '#92400e' + }, + danger: { + bg: '#FBE1E2', + border: '#B3565E', + text: '#912239', + textDeep: '#991b1b' + } + }, + selection: { + bg: '#bfdbfe' + }, + home: { + heroNameColor: 'transparent', + heroNameBackground: '-webkit-linear-gradient(120deg, #BD2F2F 30%, #f9fafb)', + heroImageBackground: 'linear-gradient(-45deg, #BD2F2F 50%, #f9fafb 50%)', + heroImageFilter: 'blur(44px)' + } + }, + dark: { + brand: { + 1: '#2CA03C', + 2: '#22ff00ff', + 3: '#5C151A', + soft: '#a200ffff' + }, + bg: 'rgb(26, 26, 26)', + bgAlt: 'rgb(23, 23, 23)', + bgElv: 'rgba(23, 23, 23, 0.8)', + button: { + brand: { + bg: '#155C2F', + border: '#0E3B1F', + text: 'rgba(255, 255, 255)', + hoverBorder: '#072a15ff', + hoverText: 'rgba(255, 255, 255)', + hoverBg: '#072a15ff', + activeBorder: '#072a15ff', + activeText: 'rgba(255, 255, 255)', + activeBg: '#072a15ff' + }, + alt: { + bg: '#484848', + text: '#f0eeee', + hoverBg: '#484848', + hoverText: '#f0eeee' + } + }, + customBlock: { + info: { + bg: '#0c4a6e', + border: '#0284c7', + text: '#bae6fd', + textDeep: '#bae6fd' + }, + tip: { + bg: '#0C2A20', + border: '#184633', + text: '#B0EBC9', + textDeep: '#166534' + }, + warning: { + bg: '#403207', + border: '#7E6211', + text: '#F9DE88', + textDeep: '#92400e' + }, + danger: { + bg: '#3F060A', + border: '#7C0F18', + text: '#F7C1BC', + textDeep: '#991b1b' + } + }, + selection: { + bg: '#1e3a8a' + }, + home: { + heroNameColor: 'transparent', + heroNameBackground: '-webkit-linear-gradient(120deg, #f9fafb 30%, #BD2F2F)', + heroImageBackground: 'linear-gradient(-45deg, #f9fafb 50%,#BD2F2F 50%)', + heroImageFilter: 'blur(44px)' + } + } + } +} diff --git a/docs/.vitepress/theme/themes/configs/index.ts b/docs/.vitepress/theme/themes/configs/index.ts new file mode 100644 index 000000000..a6df1af17 --- /dev/null +++ b/docs/.vitepress/theme/themes/configs/index.ts @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { christmasTheme } from './christmas' +import { catppuccinTheme } from './catppuccin' +import type { ThemeRegistry } from '../types' + +export const themeRegistry: ThemeRegistry = { + catppuccin: catppuccinTheme, + christmas: christmasTheme, +} + +export { christmasTheme, catppuccinTheme } diff --git a/docs/.vitepress/theme/themes/index.ts b/docs/.vitepress/theme/themes/index.ts new file mode 100644 index 000000000..3fa0d637f --- /dev/null +++ b/docs/.vitepress/theme/themes/index.ts @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './types' +export * from './themeHandler' +export * from './configs' diff --git a/docs/.vitepress/theme/themes/themeHandler.ts b/docs/.vitepress/theme/themes/themeHandler.ts new file mode 100644 index 000000000..f86b42094 --- /dev/null +++ b/docs/.vitepress/theme/themes/themeHandler.ts @@ -0,0 +1,395 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ref, onMounted, computed } from 'vue' +import type { DisplayMode, ThemeState, Theme, ModeColors } from './types' +import { themeRegistry } from './configs' + +const STORAGE_KEY_THEME = 'vitepress-theme-name' +const STORAGE_KEY_MODE = 'vitepress-display-mode' +const STORAGE_KEY_AMOLED = 'vitepress-amoled-enabled' + +export class ThemeHandler { + private state = ref({ + currentTheme: 'christmas', + currentMode: 'light' as DisplayMode, + theme: themeRegistry.christmas + }) + private amoledEnabled = ref(false) + + constructor() { + this.initializeTheme() + } + + private initializeTheme() { + if (typeof window === 'undefined') return + + // Load saved preferences + const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas' + const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null + const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true' + + // Set theme + if (themeRegistry[savedTheme]) { + this.state.value.currentTheme = savedTheme + this.state.value.theme = themeRegistry[savedTheme] + } + + // Set amoled preference + this.amoledEnabled.value = savedAmoled + + // Set mode + if (savedMode) { + this.state.value.currentMode = savedMode + } else { + // Detect system preference for initial mode + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches + this.state.value.currentMode = prefersDark ? 'dark' : 'light' + } + + this.applyTheme() + + // Listen for system theme changes (only if user hasn't set a preference) + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { + if (!localStorage.getItem(STORAGE_KEY_MODE)) { + this.state.value.currentMode = e.matches ? 'dark' : 'light' + this.applyTheme() + } + }) + } + + private applyTheme() { + if (typeof document === 'undefined') return + + const { currentMode, theme } = this.state.value + const modeColors = theme.modes[currentMode] + + this.applyDOMClasses(currentMode) + this.applyCSSVariables(modeColors, theme) + } + + private applyDOMClasses(mode: DisplayMode) { + const root = document.documentElement + + // Remove all mode classes + root.classList.remove('dark', 'light', 'amoled') + + // Add current mode class + root.classList.add(mode) + + // Add amoled class if enabled in dark mode + if (mode === 'dark' && this.amoledEnabled.value) { + root.classList.add('amoled') + } + + // Add dark class for backward compatibility with VitePress + if (mode === 'dark') { + root.classList.add('dark') + } + } + + private applyCSSVariables(colors: ModeColors, theme: Theme) { + if (typeof document === 'undefined') return + + const root = document.documentElement + + // Clear ALL inline styles related to theming to ensure clean slate + const allStyleProps = Array.from(root.style) + allStyleProps.forEach(prop => { + if (prop.startsWith('--vp-')) { + root.style.removeProperty(prop) + } + }) + let bgColor = colors.bg + let bgAltColor = colors.bgAlt + let bgElvColor = colors.bgElv + + if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) { + bgColor = '#000000' + bgAltColor = '#000000' + bgElvColor = 'rgba(0, 0, 0, 0.9)' + } + + // Apply brand colors only if theme specifies them + // Otherwise, remove inline styles to let ColorPicker CSS take effect + if (colors.brand && (colors.brand[1] || colors.brand[2] || colors.brand[3] || colors.brand.soft)) { + if (colors.brand[1]) root.style.setProperty('--vp-c-brand-1', colors.brand[1]) + if (colors.brand[2]) root.style.setProperty('--vp-c-brand-2', colors.brand[2]) + if (colors.brand[3]) root.style.setProperty('--vp-c-brand-3', colors.brand[3]) + if (colors.brand.soft) root.style.setProperty('--vp-c-brand-soft', colors.brand.soft) + } else { + // Remove inline brand color styles so ColorPicker CSS can apply + root.style.removeProperty('--vp-c-brand-1') + root.style.removeProperty('--vp-c-brand-2') + root.style.removeProperty('--vp-c-brand-3') + root.style.removeProperty('--vp-c-brand-soft') + } + + // Apply background colors + root.style.setProperty('--vp-c-bg', bgColor) + root.style.setProperty('--vp-c-bg-alt', bgAltColor) + root.style.setProperty('--vp-c-bg-elv', bgElvColor) + if (colors.bgMark) { + root.style.setProperty('--vp-c-bg-mark', colors.bgMark) + } + + // Apply text colors - always set them to ensure proper theme switching + if (colors.text) { + if (colors.text[1]) root.style.setProperty('--vp-c-text-1', colors.text[1]) + if (colors.text[2]) root.style.setProperty('--vp-c-text-2', colors.text[2]) + if (colors.text[3]) root.style.setProperty('--vp-c-text-3', colors.text[3]) + } else { + // Remove inline styles if theme doesn't specify text colors + // This allows CSS variables from style.scss to take effect + root.style.removeProperty('--vp-c-text-1') + root.style.removeProperty('--vp-c-text-2') + root.style.removeProperty('--vp-c-text-3') + } + + // Debug: log applied text color variables so we can inspect in console + try { + // eslint-disable-next-line no-console + console.log('[ThemeHandler] applied text vars', { + theme: theme.name, + mode: this.state.value.currentMode, + vp_text_1: root.style.getPropertyValue('--vp-c-text-1'), + vp_text_2: root.style.getPropertyValue('--vp-c-text-2'), + vp_text_3: root.style.getPropertyValue('--vp-c-text-3') + }) + } catch (e) { + // ignore + } + + // Apply button colors + root.style.setProperty('--vp-button-brand-bg', colors.button.brand.bg) + root.style.setProperty('--vp-button-brand-border', colors.button.brand.border) + root.style.setProperty('--vp-button-brand-text', colors.button.brand.text) + root.style.setProperty('--vp-button-brand-hover-border', colors.button.brand.hoverBorder) + root.style.setProperty('--vp-button-brand-hover-text', colors.button.brand.hoverText) + root.style.setProperty('--vp-button-brand-hover-bg', colors.button.brand.hoverBg) + root.style.setProperty('--vp-button-brand-active-border', colors.button.brand.activeBorder) + root.style.setProperty('--vp-button-brand-active-text', colors.button.brand.activeText) + root.style.setProperty('--vp-button-brand-active-bg', colors.button.brand.activeBg) + root.style.setProperty('--vp-button-alt-bg', colors.button.alt.bg) + root.style.setProperty('--vp-button-alt-text', colors.button.alt.text) + root.style.setProperty('--vp-button-alt-hover-bg', colors.button.alt.hoverBg) + root.style.setProperty('--vp-button-alt-hover-text', colors.button.alt.hoverText) + + // Apply custom block colors + const blocks = ['info', 'tip', 'warning', 'danger'] as const + blocks.forEach((block) => { + const blockColors = colors.customBlock[block] + root.style.setProperty(`--vp-custom-block-${block}-bg`, blockColors.bg) + root.style.setProperty(`--vp-custom-block-${block}-border`, blockColors.border) + root.style.setProperty(`--vp-custom-block-${block}-text`, blockColors.text) + root.style.setProperty(`--vp-custom-block-${block}-text-deep`, blockColors.textDeep) + }) + + // Apply selection color + root.style.setProperty('--vp-c-selection-bg', colors.selection.bg) + + // Apply home hero colors (if defined) + if (colors.home) { + root.style.setProperty('--vp-home-hero-name-color', colors.home.heroNameColor) + root.style.setProperty('--vp-home-hero-name-background', colors.home.heroNameBackground) + root.style.setProperty('--vp-home-hero-image-background-image', colors.home.heroImageBackground) + root.style.setProperty('--vp-home-hero-image-filter', colors.home.heroImageFilter) + } else { + // Remove home hero color styles if theme doesn't specify them + root.style.removeProperty('--vp-home-hero-name-color') + root.style.removeProperty('--vp-home-hero-name-background') + root.style.removeProperty('--vp-home-hero-image-background-image') + root.style.removeProperty('--vp-home-hero-image-filter') + } + + // Apply fonts (if defined) + if (theme.fonts?.body) { + root.style.setProperty('--vp-font-family-base', theme.fonts.body) + } else { + root.style.removeProperty('--vp-font-family-base') + } + if (theme.fonts?.heading) { + root.style.setProperty('--vp-font-family-heading', theme.fonts.heading) + } else { + root.style.removeProperty('--vp-font-family-heading') + } + + // Apply border radius (if defined) + if (theme.borderRadius) { + root.style.setProperty('--vp-border-radius', theme.borderRadius) + } else { + root.style.removeProperty('--vp-border-radius') + } + + // Apply spacing (if defined) + if (theme.spacing) { + if (theme.spacing.small) root.style.setProperty('--vp-spacing-small', theme.spacing.small) + else root.style.removeProperty('--vp-spacing-small') + if (theme.spacing.medium) root.style.setProperty('--vp-spacing-medium', theme.spacing.medium) + else root.style.removeProperty('--vp-spacing-medium') + if (theme.spacing.large) root.style.setProperty('--vp-spacing-large', theme.spacing.large) + else root.style.removeProperty('--vp-spacing-large') + } else { + root.style.removeProperty('--vp-spacing-small') + root.style.removeProperty('--vp-spacing-medium') + root.style.removeProperty('--vp-spacing-large') + } + + // Apply custom properties (if defined) + if (theme.customProperties) { + Object.entries(theme.customProperties).forEach(([key, value]) => { + root.style.setProperty(key, value) + }) + } + + // Apply custom logo (if defined) + if (theme.logo) { + root.style.setProperty('--vp-theme-logo', `url(${theme.logo})`) + } else { + root.style.removeProperty('--vp-theme-logo') + } + } + + public setTheme(themeName: string) { + if (!themeRegistry[themeName]) { + console.warn(`Theme "${themeName}" not found. Using christmas theme.`) + themeName = 'christmas' + } + + this.state.value.currentTheme = themeName + this.state.value.theme = themeRegistry[themeName] + localStorage.setItem(STORAGE_KEY_THEME, themeName) + this.applyTheme() + + // Force re-apply ColorPicker colors if theme doesn't specify brand colors + this.ensureColorPickerColors() + } + + public setMode(mode: DisplayMode) { + this.state.value.currentMode = mode + localStorage.setItem(STORAGE_KEY_MODE, mode) + this.applyTheme() + } + + public toggleMode() { + const currentMode = this.state.value.currentMode + + // Toggle between light and dark + const newMode: DisplayMode = currentMode === 'light' ? 'dark' : 'light' + + this.setMode(newMode) + } + + public setAmoledEnabled(enabled: boolean) { + this.amoledEnabled.value = enabled + localStorage.setItem(STORAGE_KEY_AMOLED, enabled.toString()) + this.applyTheme() + } + + public getAmoledEnabled() { + return this.amoledEnabled.value + } + + public toggleAmoled() { + this.setAmoledEnabled(!this.amoledEnabled.value) + } + + public getAmoledEnabledRef() { + return this.amoledEnabled + } + + private ensureColorPickerColors() { + // If theme doesn't specify brand colors, force ColorPicker to reapply its selection + const currentMode = this.state.value.currentMode + const modeColors = this.state.value.theme.modes[currentMode] + + if (!modeColors.brand || !modeColors.brand[1]) { + // Trigger a custom event that ColorPicker can listen to + if (typeof window !== 'undefined') { + window.dispatchEvent(new CustomEvent('theme-changed-apply-colors')) + } + } + } + + public getState() { + return this.state + } + + public getMode() { + return this.state.value.currentMode + } + + public getTheme() { + return this.state.value.currentTheme + } + + public getCurrentTheme() { + return this.state.value.theme + } + + public getAvailableThemes() { + return Object.keys(themeRegistry).map(key => ({ + name: key, + displayName: themeRegistry[key].displayName + })) + } + + public isDarkMode() { + const mode = this.state.value.currentMode + return mode === 'dark' + } + + public isAmoledMode() { + return this.state.value.currentMode === 'dark' && this.amoledEnabled.value + } +} + +// Global theme handler instance +let themeHandlerInstance: ThemeHandler | null = null + +export function useThemeHandler() { + if (!themeHandlerInstance) { + themeHandlerInstance = new ThemeHandler() + } + return themeHandlerInstance +} + +// Composable for use in Vue components +export function useTheme() { + const handler = useThemeHandler() + const state = handler.getState() + + onMounted(() => { + // Ensure theme is applied on mount + handler.setMode(handler.getMode()) + }) + + return { + mode: computed(() => state.value.currentMode), + themeName: computed(() => state.value.currentTheme), + theme: computed(() => state.value.theme), + setMode: (mode: DisplayMode) => handler.setMode(mode), + setTheme: (themeName: string) => handler.setTheme(themeName), + toggleMode: () => handler.toggleMode(), + getAvailableThemes: () => handler.getAvailableThemes(), + isDarkMode: () => handler.isDarkMode(), + isAmoledMode: () => handler.isAmoledMode(), + amoledEnabled: handler.getAmoledEnabledRef(), + setAmoledEnabled: (enabled: boolean) => handler.setAmoledEnabled(enabled), + toggleAmoled: () => handler.toggleAmoled(), + state + } +} \ No newline at end of file diff --git a/docs/.vitepress/theme/themes/types.ts b/docs/.vitepress/theme/themes/types.ts new file mode 100644 index 000000000..cc997412c --- /dev/null +++ b/docs/.vitepress/theme/themes/types.ts @@ -0,0 +1,134 @@ +/** + * Copyright (c) 2025 taskylizard. Apache License 2.0. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export type DisplayMode = 'light' | 'dark' + +export interface ModeColors { + // Brand colors (optional - if not specified, ColorPicker values are used) + brand?: { + 1?: string + 2?: string + 3?: string + soft?: string + } + + // Background colors + bg: string + bgAlt: string + bgElv: string + bgMark?: string + + // Text colors (optional - if not specified, VitePress defaults are used) + text?: { + 1?: string + 2?: string + 3?: string + } + + // Button colors + button: { + brand: { + bg: string + border: string + text: string + hoverBorder: string + hoverText: string + hoverBg: string + activeBorder: string + activeText: string + activeBg: string + } + alt: { + bg: string + text: string + hoverBg: string + hoverText: string + } + } + + // Custom blocks + customBlock: { + info: { + bg: string + border: string + text: string + textDeep: string + } + tip: { + bg: string + border: string + text: string + textDeep: string + } + warning: { + bg: string + border: string + text: string + textDeep: string + } + danger: { + bg: string + border: string + text: string + textDeep: string + } + } + + // Selection color + selection: { + bg: string + } + + // Home hero + home?: { + heroNameColor: string + heroNameBackground: string + heroImageBackground: string + heroImageFilter: string + } +} + +export interface Theme { + name: string + displayName: string + preview?: string // URL or path to theme preview image + logo?: string // URL or path to custom logo + modes: { + light: ModeColors + dark: ModeColors + } + fonts?: { + body?: string + heading?: string + } + borderRadius?: string + spacing?: { + small?: string + medium?: string + large?: string + } + customProperties?: Record +} + +export interface ThemeRegistry { + [themeName: string]: Theme +} + +export interface ThemeState { + currentTheme: string + currentMode: DisplayMode + theme: Theme +}