Customize your theme
Although this is a template, we don't want everyone's site to look exactly the same. In the file _styles/-theme.scss you'll find a palette of variables that are repeatedly used throughout the template's styling to achieve a consistent look.
Try customizing these values to distinguish your site from others built on the template:
| Property | Description |
|---|---|
etc... | The "theme" colors for your site. Two variations for each, light mode and dark mode. Primary = links, buttons, etc. Seconary = tags, etc. Background = background color of sections, tooltips, etc. Background alt= same as background, but applied to every other section Light gray = dividers, icons, etc. Gray = secondary text, icons, etc. Overlay = transparent shadow |
| Fonts for certain types of text. Recommended: use quoted font name from Google Fonts. Alternative: include a font file in your repo, make a font face for it, and name it here. Title = logo text Heading = headings, buttons, cards, features, etc. Body = default body text, paragraphs, lists, etc. Code = Code blocks and inline code |
| Line spacing in paragraphs of text. 1 = single spaced, 2 = double space, etc. |
| Border radius on buttons, cards, etc. 0 = completely square. |
| Drop shadow around images, cards, etc. |
In other files in _styles, you'll occasionally see Sass variables at the top that you can customize, like screen width wrapping points, image sizes, and more.
Picking colors
Picking good colors, especially ones that work well together is surprisingly hard, so don't do it without help! Here are some amazing color palettes we highly recommend:
Last updated
