Style the components

The appearance of the Algebrakit's widgets can be customized using the styles property in the AlgebraKIT javascript object

This property needs to be added to the config in the AlgebraKIT object on page initialization. The styles are only loaded once. For example

var AlgebraKIT = {
    config: {
        /* Other configuration properties */
        styles: {
            general: {
                'color-primary': '#2C5F2D',
                'color-secondary': '#97BC62FF',
            },
            'formula-editor': {
                'color-sub-palette': '#576957'
            }
        }
    }
}

Will result in the following appearance for the formula editor:

The options in general will be applied to all widgets, while the options in formula-editor will only be applied to the akit-formula-editor components. color-sub-palette in the akit-formula-editor object is an option that only exists for the formula editor but all options that can be used in general can also be used here.

Every available option, for general and for each specific widget, is listed in the styling properties reference. The defaults shown there apply to the akit default theme.