Color Variables

You can change most of the colors in NewFolder by editing the _variables.scss file. These are classic CSS3 variables, and you can use any color format you like with them: Hex, RGB, RGBA, HSL, whatever. If your browser supports it, you can use it.

There is also an automatic dark mode. That is, I repeated all the color variables, and wrapped them in a @media (prefers-color-scheme: dark) query. If your visitors have their OS or browser set to dark mode, they'll automatically see the dark version of the site. If you want to use both light mode and dark, make sure both sets of color variables match your branding.

Now, I'll be honest. I used to have more semantic color names for everything, but it actually made my life harder to do things that way, and keep the number of color variables under like... 50. So here are all the variables, and what they do. More or less.


Background colors

Background color variables are used to provide some contrast between elements. Headers, footers, sidebars, and so on.

--background-color-1
--background-color-2
--body-background-dark

In light mode:

  • --background-color-1 is intended to be a very light off-white color, based on whatever hue you like.
  • --background-color-2 is meant to be dark and provide a lot of contrast.

In dark mode:

  • --background-color-1 is intended to be a little brighter than --body-background-dark
  • --background-color-2 is meant to be a bit brighter than --background-color-1
  • --body-background-dark is exclusive to dark mode, and changes the background color for the whole page.

Text colors

Text is styled like so:

--text-color-1
--text-color-2
--link-hover

In light mode:

  • --text-color-1 should be a dark tone for the majority of text on your page.
  • --text-color-2 will ususally be light, to contrast with any elements that have darker backgrounds (buttons and the like).
  • --link-hover should be fairly self-explanatory, I feel.

In dark mode, both of the --text-color variables are typically kept light, because everything will usually have a dark background of some kind. In this case, having a slightly different shade on --text-color-2 can be used for flavor or accessibility as needed.


Decorative colors

These colors are used for borders, buttons, forms, outlines, and other aspects of the page that need to stand out more. They can also be used as element backgrounds for various layout elements. That's up to you.

--primary-color
--secondary-color
--tertiary-color

I use these to spice up elements all across the framework, with --primary-color usually looking the most vibrant, and --secondary-color is usually a more subdued version of its predecessor. --tertiary-color can be a different color entirely, and in light mode, I try to keep it light enough that it can be used as an extra background color.


Informational colors

B y default, these are almost exclusively used for the alert/admonition boxes you can see on the Content Components page. They indicate the general amount of attention required by the reader. The variables include:

--success-color
--warning-color
--mildwarning-color

I usually go for some variation on a green, red, and orange color scheme for these, respectively. Adjust as needed.