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.