Customize your theme
Last updated
Last updated
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:
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 . Alternative: include a font file in your repo, make a 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
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 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
Material UI
Coolor.co