Customize styles

Learn how to customize template's styles to match your brand.

To change the template's appearance you'll want to modify the styles/global.css file where most of the styles are defined.

The page layout and core colors are defined in the following css variables.

Variable	Default value
`--width-page-article-column`	`15rem`
`--width-page-table-of-contents-column`	`15rem`
`--width-page-column-gap`	`3.5rem`
`--width-page-padding`	`2.5rem`
`--width-page-padding-mobile`	`1.25rem`
`--color-default`	`theme('colors.slate[900]')`
`--color-secondary`	`theme('colors.slate[600]')`
`--color-tertiary`	`theme('colors.slate[400]')`
`--color-divider`	`theme('colors.slate[200]')`

Customize components

You can customize how components look by modifying the css classes or changing the tailwind theme defined in tailwind.config.js.

For example, to change the appearance of the page subtitle modify the following class in styles/global.css

.content p.page-subtitle {
   @apply font-sans text-subtitle text-color-secondary mt-3 mb-8;
}

The apply rule above uses styles defined in tailwind to style the subheading.

Alternatively, instead of changing the page-subtitle css class you can adjust the style by making changes to the tailwind theme.

Customize page layout

For more advanced changes feel free to modify the React components. For example, to change the page layout go to the components/page-layout/PageLayout.tsx and make your changes there.