Customization

Learn how to customize the look and feel of your site.

Themes

The site uses CSS custom properties for theming. Themes are defined in the GitHub Markdown Themes stylesheet and can be switched at runtime.

Built-in themes

Light: Light, Light High Contrast, Light Colorblind, Light Tritanopia

Dark: Dark, Dark High Contrast, Dark Dimmed, Dark Colorblind, Dark Tritanopia, Ayu Mirage

Setting defaults

Configure the default light and dark themes in blog.config.mjs:

theme: {
  light: "light",
  dark: "ayu-mirage",
},

Fonts

The site uses three font families:

SCSS architecture

Styles are organized in layers:

src/scss/
├── abstracts/   → Variables, functions, mixins (no output)
├── themes/      → Design tokens and theme definitions
├── base/        → Reset, typography, fonts
├── layout/      → Header, footer, navigation
├── components/  → Reusable UI components
├── pages/       → Page-specific styles
└── utilities/   → Print styles, helpers

Override any design token with CSS custom properties in your theme file.