Theme Customization

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. The section below lists all available options for general and for all specific widgets.

Styling the question components

All properties that can be used for styling are shown below. The default value applies to the akit default theme

general

Contains styles that will be applied to all widgets.

Property	Description	Default
font-general	Font for regular text	"'Lato', sans-serif"
font-size-math	Font sizeefor math expression. The font family cannot be changed.	"1.03em"
border-radius	General border radius for UI elements	"4px"
Colors
color-primary	The primary UI color	"#336699"
color-secondary	The secondary UI color	"#009fe3"
color-tertiary	The teriary UI color	"#edc951"
color-main-fg	The foreground (text) color of regular text	"#333333"
color-main-fg-inverted	Inverted foreground (text) color of regular text	"white"
color-error	The foreground (text) color of error messages	"darkred"
color-error-detail	The foreground (text) color of the subcaption of error feedback	"initial"
color-error-bg	The background color for errors	"#fff0f0"
color-strategy-error	The foreground (text) color for a "strategy error"	"orange"
color-strategy-error-bg	The background color for a "strategy error"	"#eff7fc"
color-server-error	The foreground (text) color for a server error	"darkred"
color-server-error-bg	The background color for a server error	"#fff7e7"
color-correct	The color for icons indicating a "correct" or "finished" response	"green"
color-correct-bg	Background color for elements that are marked correct	"#f0fff0"
color-correct-step-bg	The background color for elements that are marked correct but not finished
"lightgoldenrodyellow"
color-true-expression	The color for icons indicating a "true expression" response	"gray"
color-hint	The foreground (text) color for a hint	"#0b99bc"
color-hint-detail	The foreground (text) color of the subcaption of a hint	"initial"
color-hint-bg	The background color for a hint	"#f4fbff"
color-input	Color for input fields	"#eeeeee"
color-neutral-bg	Neutral (gray) background color to contrast with the regular white bg	"#fafafa"
color-neutral-fg	Neutral (gray) foreground color that complements the lighter bg color	"gray"
color-focus-outline	Color used for keyboard focus outline; by default the complementary yellow	"#edc951"
Buttons
font-buttons	Font used in buttons	"Helvetica Neue', Helvetica, Arial, sans-serif"
font-size-buttons		"initial"
font-weight-buttons		"initial"
text-transform-buttons	Text transform applied to buttons	"initial"
border-radius-buttons	Border radius for button elements	"4px"
border-buttons-primary	Border of a primary button	"1px solid #2e6da4"
border-buttons-primary-hover	Border of a primary hovered button	"1px solid #204d74"
border-buttons-default	Border of a non-primary button	"1px solid #cccccc"
border-buttons-default-hover	Border of a non-primary hovered button	"1px solid #adadad"
padding-buttons		"6px 12px;"
min-width-buttons		"initial"
shadow-buttons		"none"
color-button	Default color for buttons	"#eaeaea"
color-button-hover	Default hover color for buttons	"#eaeaea"
color-fg-buttons-primary	Foreground color of a primary button	"white"
color-bg-buttons-primary	Background color of a primary button	"color-primary"
color-fg-buttons-primary-hover	Foreground color of a primary hovered button	"white"
color-bg-buttons-primary-hover	Background color of a primary hovered button	"color-primary"
color-fg-buttons-default	Foreground color of non-primary buttons	color-main-fg
color-bg-buttons-default	Background color of non-primary buttons	white
color-fg-buttons-default-hover	Foreground color of non-primary hovered buttons	color-main-fg
color-bg-buttons-default-hover	Background color of non-primary hovered buttons	#e6e6e6
Forms
height-form-controls	Default height of form elements, such as input fields	"34px"
border-radius-form-controls	Border radius of form elements, such as input fields	"4px"

formula-editor

Applies to the component that can be used to input math formulas.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
width-max	Maximum width for the formula editor	"700px"
width-min	Minimum width for the formula editor	"320px"
border-palette-buttons	Border for the subpalette buttons	"initial"
border-radius	The border radius for the bottom left and right corner	border-radius
border-radius-palette-buttons	Border radius for the subpalette buttons	"3px"
color-sub-palette	Color for the sub-palette: the lower part of the editor where the buttons for symbols are located	"#767676"
color-tab-hover	Color when hovering over a palette tab	"#999999"
color-buttons-hover	hover color for the buttons elsewhere	"#ececec"
color-light-bg	Background color for the instruction/help area	"#efefef"
color-full-palette-heading	Color for the headings between categories in the full palette	"#eaeaea"
color-tab-fg	Foreground color for the tabs	"white"
color-palette-buttons-fg	Foreground color for the subpalette buttons	"#333333"
color-palette-buttons-bg	Background color for the subpalette buttons	"white"
placeholder-color-main	Color of the squares in tab buttons	"#eeeeee"
placeholder-color-sub	Color of the squares in subpalette buttons	"#bbb"
color-mobile-palette-button-fg	Foreground color for the default buttons on touch devices	"#333333"
color-mobile-palette-main-button-fg	Foreground color for the "main section" buttons on touch devices	"white"

interaction

An interaction object wraps a question type (like Multistep, Math Table, etc) and optionally an instruction element.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
padding-instruction	The padding of the instruction element	"0px"
margin-bottom-instruction	The vertical margin between the instruction element and the interaction	"0px"
border-instruction	The border specification of the instruction element	"none"
border-radius-instruction-top	The top border radius of the instruction element	border-radius
border-radius-instruction-bottom	The top border radius of the instruction element	border-radius
color-instruction-bg	The background color of the instruction element	"transparent"

multistep

Applies to the "Multistep" interaction type.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
width-max	Maximum width for the widget	"700px"
Worksheet
color-worksheet-bg	Background color for the math input and derivation area (the "worksheet") of the multistep	"#f0f7ff"
border-worksheet		"2px solid var(--akit-color-primary)"
color-input-border	Color for the line to the left of the input area	"#25c8c7"
color-hover	Color for buttons ("submit", "hint", etc.) when hovered over	"#acc7e7"
color-cell-description	Foreground (text) color for cell description text	"#darkgray"
Buttons
color-buttons-fg		color-primary
color-buttons-fg-hover		color-primary
color-buttons-fg-disabled		color-primary
color-buttons-bg		"#f0f7ff"
color-buttons-bg-hover		"#acc7e7"
color-buttons-bg-disabled		"#f0f7ff"
opacity-buttons-disabled		"0.5"
border-buttons		"1px solid var(--akit-color-primary)"
border-buttons-hover		"1px solid var(--akit-color-primary)"
border-buttons-disabled		"1px solid var(--akit-color-primary)"
border-radius-buttons		border-radius-buttons
Hints
border-hint-line		"2px solid var(--akit-color-hint)"
color-hint-label		color-hint
color-hint-expr		"inherit"
color-hint-main		color-hint
color-hint-detail		correct-hint-detail
Error feedback
border-fb-line		"2px solid var(--akit-color-error)"
color-fb-label		color-error
color-fb-expr		"inherit"
color-fb-main		color-error
color-fb-detail		color-error-detail

arithmetic-notebook

Applies to the "Arithmetic Notebook" interaction type.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-palette-buttons-bg	Background color for the palette buttons	"white"
color-palette-buttons-fg	Foreground color for the palette buttons	"#333333"

model-method

Applies to the "Model Method" interaction type.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
border		"1px solid #333"
border-radius		"0.2em"
color-input		"white"
color-bg-shade-0		"#E3F5FC"
color-bg-shade-1		"#C8EAF9"
color-bg-shade-2		"#ADE0F7"
input-padding		"0.4em 0.6em"

choice

Applies to the "Multiple Choice" interaction type.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-option-fg	Color of content in options	var(--akit-color-main-fg)
color-option-bg	Background color of options	#f7fafa
color-option-bg-hover	Background color of hovered options	#ccc
color-option-bg-selected	Background color of selectedoptions	#c6eeff
color-box-fg	Font color in checkboxes	var(--akit-color-main-fg)
color-box-bg	Background color of checkboxes	white
color-box-bg-hover	Background color of checkboxes in hovered options	white
color-box-bg-selected	Background color of checkboxes in selected options	white
color-option-correct	Font color for correct options	var(--akit-color-correct)
color-option-correct-bg	Background color for correct options	var(--akit-color-correct-bg)
color-box-correct	Font color for correct checkboxes	var(--akit-color-correct)
color-box-correct-bg	Background color for correct	var(--akit-color-correct-bg)
color-option-error	Font color for incorrect options	var(--akit-color-error)
color-option-error-bg	Background color for incorrect options	var(--akit-color-error-bg)
color-box-error	Font color for incorrect checkboxes	var(--akit-color-error)
color-box-error-bg	Background color for incorrect options	var(--akit-color-error-bg)
border-box	Border of checkboxes	1px solid var(--akit-color-main-fg)
border-box-hover	Border of checkboxes in hovered options	var(--akit-choice-border-box)
border-box-selected	Border of checkboxes in selected options	var(--akit-choice-border-box)
border-option	Border for options	1px solid #ccc
border-option-hover	Border of hovered options	var(--akit-choice-option-box)
border-option-selected	Border of selected options	var(--akit-choice-option-box)
border-radius-option	Border radius for options	var(--akit-border-radius)
border-radius-box	Border radius for checkboxes. Applies to multiple-select only)	8px
spacing-options	Vertical distance between options	8px
spacing-box-content	Horizontal distance between option box and content	2em
padding-option-vertical	Vertical padding around content in options	8px
padding-option-horizontal	Horizontal padding in options	8px
size-box	Height and width of checkboxes	24px
min-height-option	Minimum height of options	32px
font-weight-box	Font weight in checkboxes	bold

feedback

Applies to the elements that are shown when Algebrakit supplies error feedback.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
border	The border of the element	"1px solid #e59999"
padding-vertical	Top and bottom padding for the element	"8px"
padding-horizontal	Left and right padding for the element	"8px"

derivation

Applies to the worked solutions that Algebrakit can show.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-derivation-bg	The background color of the derivation	"transparent"
color-step-bg	Background color for an expanded step	"#f0f7ff"
shadow-step	The shadow around an expanded step	"0 3px 5px 0 rgb(0 0 0 / 15%)"
color-arrow	The color of the arrow that is shown on the left side of an expanded step	"#646464"

geometry

Applies to the "Geometry and Graphs" interaction type.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-support-1	Additional color used in the geometry widget	"#034655"
color-support-2	Additional color used in the geometry widget	"#777777"

inline-math

Applies to the Multistep interaction that are used inline.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
cell-description	Foreground (text) color for cell description text	"darkgray"

math-table

Applies to the "Table" interaction.

All options from general can be used here.

Property	Description	Default
color-arrows	Color of the (optional) arrows above and below the table	"firebrick"
color-fb-main	Color of main line of error feedback	color-error
color-fb-detail	Color of subcaption of error feedback	color-error-detail

open-answer

Applies to the "Open Answer" interaction.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-give-up-review	Foreground (text) color indicating an open answer exercise that was "given up"	"gray"

scientific-calculator

Applies to the calculator utility that can be activated when doing exercises.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-minor-btn		"#777777"
border-radius		border-radius
border-spec		"0px solid transparent"

numpad

Applies to the number pad as used in e.g. Model Method

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
color-background		"white"
color-outline		"black"
color-text		"black"
color-hover		"lightgrey"
color-backspace-bg		"black"
color-backspace		"white"
border-radius		"5px"
border-width		"1px"

Styling the authoring components

The following styling options are only applicable to the authoring tools used outside of our CMS.

exercise-editor

These rules are applied generally within the exercise editor.

All options from general can be used here. Additionally, the following options apply:

Property	Description	Default
border-radius		"var(--akit-border-radius)"
color-inactive-bg		"#eeeeee"
color-bg-header		"#f6f6f6"
border-header		"1px solid #ccc;"
color-fg-settings-button		"white"
color-bg-settings-button		"var(--akit-exercise-editor-color-secondary)"
color-step-buttons-active		"var(--akit-exercise-editor-color-secondary)"
color-bg-balloon-title		"#dddddd"
color-fg-balloon-title		"#333333"
border-balloon-title		"1px solid #ccc"
color-bg-task-selector		"var(--akit-exercise-editor-color-primary)"
color-fg-task-selector		"white"
color-fg-summary		"var(--akit-color-main-fg)"
color-bg-summary		"none"
color-bg-summary-hover		"#ddd !important"
border-bottom-summary		"none"
border-collapsable-content		"2px solid var(--akit-exercise-editor-color-bg-summary)"
border-hr-step-buttons		"1px solid var(--akit-exercise-editor-color-secondary);"

text-editor

Applies to the text editor that allows an author to specify text content, such as instructions, hints and error feedback.

All options from general can be used here.

Property	Description	Default
border-single-block-editor		"1px solid #c0c0c0"