The design system supports the ability to "theme" certain aspects like its color palette, type scale, and spacing. There are a few ways to accomplish this.
$color-primary) and then reference that variable throughout your CSS declarations.
If your site is using Sass, you can override the design system's default Sass variables. Variables exist for every color, type size, and spacing value used in the design system. The biggest benefit of overriding a Sass variable is it only requires one line of code, and any utility class or component that references that variable will automatically be updated to use it, without introducing additional CSS.
Overriding Sass variables
To override Sass variables, create a new
.scss file where you will define the new variable value:
/* overrides.scss */ $color-primary: #ff0000;
Then, in your main stylesheet, import your overrides file before you import the design system's Sass files:
/* main.scss */ @import 'overrides'; @import '@cmsgov/design-system-core/src/index';
Sass variables are documented on the relevant documentation pages, and are defined in the
If you're not using Sass, another way to "theme" the design system is by overriding its CSS declarations. This isn't the most ideal solution since it'll require extra work on your end. It also means you'll be introducing more declarations. Be conscious of this and keep an eye on your file size. If you find yourself overriding a large portion of the design system, consider switching to Sass so you can take advantage of Sass variables.