docs: add how to custom dark mode style

This commit is contained in:
YunYouJun 2025-03-14 20:55:52 +08:00
parent b432098852
commit 07065d3e1e
8 changed files with 626 additions and 374 deletions

View File

@ -2,7 +2,7 @@
"name": "valaxy-theme-custom",
"version": "0.0.0",
"private": true,
"packageManager": "pnpm@10.6.1",
"packageManager": "pnpm@10.6.3",
"author": {
"email": "me@yunyoujun.cn",
"name": "YunYouJun",

View File

@ -10,9 +10,15 @@ end: false
## Automatic Style Injection {lang="en"}
> 仅首次新建 styles/index.scss 文件时,需要重启开发服务器,以确保 scss 被加载。
::: warning
- `index.ts` / `index.scss` / `index.css` 不应当同时存在,否则可能会导致重复引入。
- 仅首次新建 styles/index.scss 文件时,需要重启开发服务器,以确保 scss 被加载。
:::
:::zh-CN
新建 `styles` 文件夹,目录下的以下文件将会被自动引入:
- `index.ts`
@ -23,7 +29,6 @@ end: false
我们推荐您:
- 新建 `index.ts` 文件,并在其中自由引入其他样式文件 `xxx.scss`
- `index.ts` / `index.scss` / `index.css` 不应当同时存在,否则可能会导致重复引入。
:::
@ -124,3 +129,31 @@ input {
cursor: var(--cursor-text), text;
}
```
### 覆盖暗色模式 {lang="zh-CN"}
需使用 `html.dark` 选择器包裹样式。
```ts [styles/index.ts]
import './vars.scss'
```
```scss [styles/vars.scss]
// 亮色
.yun-page-header-gradient {
background: linear-gradient(to right, blue 0, rgba(0, 0, 0, 0.2) 100%);
}
// 覆盖 Dark Mode
html.dark{
--va-c-bg-light:rgba(5, 16, 29, 0.8);
.yun-page-header-gradient {
background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 100%);
}
.yun-footer-gradient {
background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 100%);
}
}
```

View File

@ -3,7 +3,7 @@
"type": "module",
"version": "0.22.14",
"private": true,
"packageManager": "pnpm@10.6.1",
"packageManager": "pnpm@10.6.3",
"description": "📄 Vite & Vue powered static blog generator.",
"author": {
"email": "me@yunyoujun.cn",
@ -82,10 +82,10 @@
"valaxy-theme-yun": "workspace:*"
},
"devDependencies": {
"@antfu/eslint-config": "^4.8.1",
"@antfu/eslint-config": "^4.10.1",
"@iconify-json/logos": "catalog:",
"@iconify-json/vscode-icons": "catalog:",
"@microsoft/api-extractor": "^7.51.1",
"@microsoft/api-extractor": "^7.52.1",
"@playwright/test": "^1.51.0",
"@types/debug": "^4.1.12",
"@types/fs-extra": "^11.0.4",
@ -95,12 +95,12 @@
"@types/node": "^22.13.10",
"@types/prompts": "^2.4.9",
"@types/resolve": "^1.20.6",
"bumpp": "^10.0.3",
"bumpp": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^9.22.0",
"https-localhost": "^4.7.1",
"husky": "^9.1.7",
"lint-staged": "^15.4.3",
"lint-staged": "^15.5.0",
"npm-run-all": "^4.1.5",
"prompts": "^2.4.2",
"rimraf": "^6.0.1",

View File

@ -35,7 +35,7 @@
},
"dependencies": {
"@rollup/pluginutils": "^5.1.4",
"axios": "^1.8.2",
"axios": "^1.8.3",
"body-parser": "^2.1.0",
"cors": "^2.8.5",
"http-proxy-middleware": "^3.0.3",
@ -49,12 +49,12 @@
"@advjs/gui": "0.0.7-beta.7",
"@iconify-json/ri": "catalog:",
"@intlify/unplugin-vue-i18n": "^6.0.3",
"@primevue/themes": "^4.3.1",
"@primevue/themes": "^4.3.2",
"@types/body-parser": "^1.19.5",
"@types/splitpanes": "^2.2.6",
"@types/wicg-file-system-access": "^2023.10.5",
"gray-matter": "^4.0.3",
"primevue": "^4.3.1",
"primevue": "^4.3.2",
"splitpanes": "^4.0.2",
"typescript": "catalog:",
"unbuild": "catalog:",

View File

@ -28,10 +28,10 @@
"@explosions/fireworks": "^0.1.0",
"@iconify-json/ant-design": "catalog:",
"@iconify-json/simple-icons": "catalog:",
"@vueuse/motion": "^2.2.6",
"@vueuse/motion": "^3.0.3",
"animejs": "^3.2.2",
"gsap": "^3.12.7",
"primevue": "^4.3.1"
"primevue": "^4.3.2"
},
"devDependencies": {
"@types/animejs": "^3.1.13",

View File

@ -65,7 +65,7 @@
"@clack/prompts": "^0.10.0",
"@iconify-json/ri": "catalog:",
"@intlify/unplugin-vue-i18n": "^6.0.3",
"@shikijs/transformers": "^3.1.0",
"@shikijs/transformers": "^3.2.1",
"@types/katex": "^0.16.7",
"@unhead/addons": "1",
"@unhead/schema-org": "1",
@ -110,7 +110,7 @@
"markdown-it-table-of-contents": "^0.9.0",
"markdown-it-task-lists": "^2.1.1",
"medium-zoom": "^1.1.0",
"mermaid": "^11.4.1",
"mermaid": "^11.5.0",
"mlly": "^1.7.4",
"nprogress": "^0.2.0",
"open": "10.1.0",
@ -121,7 +121,7 @@
"qrcode": "^1.5.4",
"resolve-global": "^2.0.0",
"sass": "^1.85.1",
"shiki": "^3.1.0",
"shiki": "^3.2.1",
"star-markdown-css": "^0.5.3",
"table": "^6.9.0",
"unhead": "1",
@ -136,7 +136,7 @@
"vite-plugin-vue-layouts": "^0.11.0",
"vite-ssg": "^25.2.0",
"vite-ssg-sitemap": "^0.8.1",
"vitepress-plugin-group-icons": "^1.3.6",
"vitepress-plugin-group-icons": "^1.3.7",
"vue": "^3.5.13",
"vue-i18n": "catalog:",
"vue-router": "^4.5.0",

File diff suppressed because it is too large Load Diff

View File

@ -11,13 +11,13 @@ catalog:
'@iconify-json/carbon': ^1.2.8
'@iconify-json/logos': ^1.2.4
'@iconify-json/ri': ^1.2.5
'@iconify-json/simple-icons': ^1.2.27
'@iconify-json/simple-icons': ^1.2.28
'@iconify-json/vscode-icons': ^1.2.16
consola: ^3.4.0
typescript: ^5.8.2
unbuild: ^3.5.0
vite: ^6.2.1
vite: ^6.2.2
vue-i18n: ^11.1.2
zx: ^8.4.0
consola: ^3.4.0
zx: ^8.4.1
onlyBuiltDependencies:
- vue-demi