UnoCSS & Styles

UnoCSS Change Appearance#

You can customize the theme default UnoCSS palette by modifying the CSS file at src/assets/styles/app.css. For example, if you want to change the default theme color, you can modify the following code:

:root {
  /* ... */
  --primary: 200 29% 45%; 
  --primary: <Your favorite color using raw hsl>; 
}

And the same way to change the default font family, you can modify the following code:

:root {
  /* ... */
  font-family: 'Satoshi'; 
  src: url('/fonts/Satoshi-Variable.ttf'); 
  font-family: '<Your favorite font family>'; 
  src: url('/fonts/<Your favorite font>.ttf'); 
}

Make sure to put your custom font file in the public/fonts directory.

UnoCSS Configuration#

File: uno.config.ts

Get to know more:

• UnoCSS: Astro Integration ↗
• UnoCSS: Configuring UnoCSS ↗

@unocss/preset-typography#

Typography config can be modified in uno.config.ts:

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

But if you want to customize the typography by UnoCSS, or just change the preset typography theme, you can do it in src/site.config.ts:

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

Checkout Typography preset ↗ for more.