Unocss
sh
├── unocss.config.ts * 主要的样式定义
└── src
└── styles
├── main.css 页面基础样式
├── prose.css * 页面和文章的主要样式
└── vars.css 次要使用的css变量
├── unocss.config.ts * 主要的样式定义
└── src
└── styles
├── main.css 页面基础样式
├── prose.css * 页面和文章的主要样式
└── vars.css 次要使用的css变量
尝试定义 unocss.config.ts
- 生成方便使用的 css 原子化 class
bg-l-dim => rgb(75, 85, 99)bg-c-dim => bg-l-dim dark:bg-d-dim
ts
export const _VARS: Theme = {
colors: {
l: {
bg: 'rgb(255, 255, 255)',
fg: 'rgb(85, 85, 85)',
fgDeep: 'rgb(34, 34, 34)',
fgDeeper: 'rgb(0, 0, 0)',
dim: 'rgb(75, 85, 99)',
border: 'rgba(125, 125, 125, 0.3)',
codeBG: 'rgb(248, 248, 248)',
innerCodeBG: 'rgba(130, 146, 167, 0.1)',
},
d: {
bg: 'rgb(5, 5, 5)',
fg: 'rgb(187, 187, 187)',
fgDeep: 'rgb(221, 221, 221)',
fgDeeper: 'rgb(255, 255, 255)',
dim: 'rgb(161, 161, 170)',
border: 'rgba(125, 125, 125, 0.4)',
codeBG: 'rgba(52, 52, 52, 0.5)',
innerCodeBG: 'rgba(255, 255, 255, 0.1)',
},
brand: 'rgb(168, 191, 191)',
},
}
export const _VARS: Theme = {
colors: {
l: {
bg: 'rgb(255, 255, 255)',
fg: 'rgb(85, 85, 85)',
fgDeep: 'rgb(34, 34, 34)',
fgDeeper: 'rgb(0, 0, 0)',
dim: 'rgb(75, 85, 99)',
border: 'rgba(125, 125, 125, 0.3)',
codeBG: 'rgb(248, 248, 248)',
innerCodeBG: 'rgba(130, 146, 167, 0.1)',
},
d: {
bg: 'rgb(5, 5, 5)',
fg: 'rgb(187, 187, 187)',
fgDeep: 'rgb(221, 221, 221)',
fgDeeper: 'rgb(255, 255, 255)',
dim: 'rgb(161, 161, 170)',
border: 'rgba(125, 125, 125, 0.4)',
codeBG: 'rgba(52, 52, 52, 0.5)',
innerCodeBG: 'rgba(255, 255, 255, 0.1)',
},
brand: 'rgb(168, 191, 191)',
},
}
代码块主题
build/markdown/index.ts:26-27
ts
md.use(Shiki, {
theme: {
light: 'vitesse-light',
dark: 'vitesse-dark',
},
})
md.use(Shiki, {
theme: {
light: 'vitesse-light',
dark: 'vitesse-dark',
},
})
ts
declare type Theme =
'css-variables'
| 'dark-plus'
| 'dracula-soft'
| 'dracula'
| 'github-dark-dimmed'
| 'github-dark'
| 'github-light'
| 'hc_light'
| 'light-plus'
| 'material-darker'
| 'material-default'
| 'material-lighter'
| 'material-ocean'
| 'material-palenight'
| 'min-dark'
| 'min-light'
| 'monokai'
| 'nord'
| 'one-dark-pro'
| 'poimandres'
| 'rose-pine-dawn'
| 'rose-pine-moon'
| 'rose-pine'
| 'slack-dark'
| 'slack-ochin'
| 'solarized-dark'
| 'solarized-light'
| 'vitesse-dark'
| 'vitesse-light'
declare type Theme =
'css-variables'
| 'dark-plus'
| 'dracula-soft'
| 'dracula'
| 'github-dark-dimmed'
| 'github-dark'
| 'github-light'
| 'hc_light'
| 'light-plus'
| 'material-darker'
| 'material-default'
| 'material-lighter'
| 'material-ocean'
| 'material-palenight'
| 'min-dark'
| 'min-light'
| 'monokai'
| 'nord'
| 'one-dark-pro'
| 'poimandres'
| 'rose-pine-dawn'
| 'rose-pine-moon'
| 'rose-pine'
| 'slack-dark'
| 'slack-ochin'
| 'solarized-dark'
| 'solarized-light'
| 'vitesse-dark'
| 'vitesse-light'
嘎然而止 ~ 开始渐进式探索吧. 祝愿你可以创造出满意的个人站点 !