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
primary 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
title etc...	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
spacing	Line spacing in paragraphs of text. 1 = single spaced, 2 = double space, etc.
rounded	Border radius on buttons, cards, etc. 0 = completely square.
shadow	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:

Tailwind

tailwindcolor.com

Material UI

materialpalette.com/colors

Coolor.co

coolors.co/palettes