Your theme has two main colors: a primary color and a secondary color.
It also has a primary text color, a dark gray, and a light gray.
Usually it suffices to only change the primary and secondary colors to your brand's two main colors, meaning you can leave the primary text color, the dark gray, and the light gray as they are.
To change the colors to match your brand:
- Go to Theme → Files → _nm-variables.scss.
- As of the time of writing, the colors section starts on line 11:
- $brand-primary: Line 26 (as of time of writing), your theme's primary color, usually the darker color between itself and $brand-secondary.
- $brand-secondary: Line 30 (as of time of writing), your theme's secondary color, usually the lighter color between itself and $brand-primary.
- $gray-base: Line 15 (as of time of writing), your theme's primary text color. Usually a black or off black.
- $neutral-gray: Line 22 (as of time of writing), the darker gray used frequently throughout the theme.
- $light-gray: Line 24 (as of time of writing), the lighter gray used frequently throughout the theme.
- To change these colors, simply replace them with the hex values of your brand. The hex values for a given color are six characters preceded by a # (hash symbol). Upper/lowercase does not matter (#023d5d = #023D5D). If you have your brand's colors in some other format besides hex, you can use this converter.
NOTE: You can ignore all variables not explicitly mentioned above. For example, don't worry about $gray-light, $brand-primary-light, or $brand-success.
