mirror of
https://github.com/fmhy/edit.git
synced 2026-01-12 23:11:06 +11:00
Theme Handler (By Land), Christmas & Catppuccin Theme And Feedback Window Revamp (#4386)
* Add files for christmas theme, theme handler, feedback revamp and cattpuccin theme * Add files via upload * update image on home page * add tree logo for faster loading * change link to raw github
This commit is contained in:
Samidy
GitHub
parent
d0b9c2079b
commit
d4d4ad0d85
20 changed files with 1657 additions and 129 deletions
109
docs/.vitepress/theme/themes/README.md
Normal file
109
docs/.vitepress/theme/themes/README.md
Normal file
|
|
@ -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/<name>.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.
|
||||
|
||||
161
docs/.vitepress/theme/themes/configs/catppuccin.ts
Normal file
161
docs/.vitepress/theme/themes/configs/catppuccin.ts
Normal file
|
|
@ -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)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
161
docs/.vitepress/theme/themes/configs/christmas.ts
Normal file
161
docs/.vitepress/theme/themes/configs/christmas.ts
Normal file
|
|
@ -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://raw.githubusercontent.com/SamidyFR/edit/refs/heads/main/docs/.vitepress/theme/themes/configs/christmas_tree.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)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
docs/.vitepress/theme/themes/configs/christmas_tree.png
Normal file
BIN
docs/.vitepress/theme/themes/configs/christmas_tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
161
docs/.vitepress/theme/themes/configs/dark.ts
Normal file
161
docs/.vitepress/theme/themes/configs/dark.ts
Normal file
|
|
@ -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)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
docs/.vitepress/theme/themes/configs/index.ts
Normal file
25
docs/.vitepress/theme/themes/configs/index.ts
Normal file
|
|
@ -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 }
|
||||
19
docs/.vitepress/theme/themes/index.ts
Normal file
19
docs/.vitepress/theme/themes/index.ts
Normal file
|
|
@ -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'
|
||||
395
docs/.vitepress/theme/themes/themeHandler.ts
Normal file
395
docs/.vitepress/theme/themes/themeHandler.ts
Normal file
|
|
@ -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<ThemeState>({
|
||||
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
|
||||
}
|
||||
}
|
||||
134
docs/.vitepress/theme/themes/types.ts
Normal file
134
docs/.vitepress/theme/themes/types.ts
Normal file
|
|
@ -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<string, string>
|
||||
}
|
||||
|
||||
export interface ThemeRegistry {
|
||||
[themeName: string]: Theme
|
||||
}
|
||||
|
||||
export interface ThemeState {
|
||||
currentTheme: string
|
||||
currentMode: DisplayMode
|
||||
theme: Theme
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue