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 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-1is intended to be a very light off-white color, based on whatever hue you like.
--background-color-2is meant to be dark and provide a lot of contrast.
In dark mode:
--background-color-1is intended to be a little brighter than
--background-color-2is meant to be a bit brighter than
--body-background-darkis exclusive to dark mode, and changes the background color for the whole page.
Text is styled like so:
--text-color-1 --text-color-2 --link-hover
In light mode:
--text-color-1should be a dark tone for the majority of text on your page.
--text-color-2will ususally be light, to contrast with any elements that have darker backgrounds (buttons and the like).
--link-hovershould 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.
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.
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.