UnoCSS 与样式

UnoCSS 更改外观#

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

:root {
  /* ... */
  --primary: 200 29% 45%; 
  --primary: <使用原始 hsl 的您喜欢的颜色>; 
}

同样，要更改默认字体系列，您可以修改以下代码：

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

请确保将您的自定义字体文件放在 public/fonts 目录中。

UnoCSS 配置#

文件：uno.config.ts

了解更多：

• UnoCSS: Astro 集成 ↗
• UnoCSS: 配置 UnoCSS ↗

@unocss/preset-typography#

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

const typographyConfig = {
  // prettier-ignore
  cssExtend: { 
    // ...
  }
}

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

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

查看 Typography 预设 ↗ 了解更多。