Customization

The activity solver is designed to be customizable. Every part of it has its own css class you can use to style it. It also uses css variables for colors and other properties, so you can change them easily.

Colors

/* custom.css */
.activity-solver {
    --mathew-activity-solver-color-primary: #5e61ea;
    --mathew-activity-solver-color-primary-light: #e2e5fe;
    --mathew-activity-solver-color-primary-mid: #9ca2e1;
    --mathew-activity-solver-color-primary-dark: #7f81ee;
    --mathew-activity-solver-color-secondary: #ea5e61;
    --mathew-activity-solver-color-success: #38a736;
    --mathew-activity-solver-color-info: #50ced2;
    --mathew-activity-solver-color-warning: #ffb463;
    --mathew-activity-solver-color-light: #f3f4ff;
    --mathew-activity-solver-color-gray-500: #959cb0;
    --mathew-activity-solver-color-black: #262626;
}

// index.js
import { startActivitySolver } from '@adaptical/mathew-activity-solver'
import '@adaptical/mathew-activity-solver/style.css'
import './custom.css'

startActivitySolver(...)