Theming

To create and change themes we have a scss based theme system, which takes the colors and generates the variables and colors. Also if you don't want to use our theme generator you can manually set all the color tokens.

Explaining theme structure

The default theme included in the @acorex/styles package uses a number of variables and mixins that you need to know about in order to build your own theme. The code below explains the different parts in the comments.

default.scss

Customize Theme

To create a custom theme, you can use the default file and set the colors and variables as desired and load it into the main style file of the project. For example, the file below only has the primary color, danger, accent 1 and accent 2, so components that get colors like buttons only have these colors and the rest of the default colors are not generated.

my-theme.scss