Jerry's Blog

Back

UnoCSS 与样式

更改站点外观并创建自定义样式

UnoCSS 更改外观#

你可以通过修改 src/assets/styles/app.css 文件中的 CSS 来自定义主题默认的 UnoCSS 调色板。例如，如果你想更改默认主题颜色，可以修改以下代码：

src/assets/styles/app.css
:root {
  /* ... */
  --primary: 200 29% 45%; 
  --primary: <你喜欢的原始hsl颜色>; 
}
css

同样的方式，更改默认字体系列，可以修改以下代码：

src/assets/styles/app.css
:root {
  /* ... */
  font-family: 'Satoshi'; 
  src: url('/fonts/Satoshi-Variable.ttf'); 
  font-family: '<你喜欢的字体系列>'; 
  src: url('/fonts/<你喜欢的字体>.ttf'); 
}
css

确保将自定义字体文件放在 public/fonts 目录下。

UnoCSS 配置#

文件：uno.config.ts

了解更多：

@unocss/preset-typography#

可以在 uno.config.ts 中修改排版配置：

uno.config.ts
const typographyConfig = {
  // prettier-ignore
  cssExtend: { 
    // ...
  }
}
js

但如果你想通过 UnoCSS 自定义排版，或只是更改预设排版主题，可以在 src/site.config.ts 中进行：

src/site.config.ts
export const integ: IntegrationUserConfig = {
  // ...
  typography: {
    class: 'prose text-base text-muted-foreground'
  }
}
ts

更多信息请查看 排版预设 ↗。