Interface ThemeOptions

Options that affect the style of Views and Shells. To explore the options and their effects, try the theme designer.

The first character of an option name indicates the expected type (a style often called Hungarian notation):

  • b: a boolean value
  • n: a number value (which will be clamped to a valid range)
  • d: a string describing a duration using CSS syntax, such as "1s" for 1 second
  • c: a string describing a colour value in CSS syntax, such as "#f00" for pure red
  • f: a string consisting of comma-separated list of font family names
  • s: a string from a set of allowed values

Colour values accept "hexa" syntax (#RGBA and #RRGGBBAA) even if not supported by the browser. Some option types (notably colours), allow additional CSS properties to be set by appending a semicolon ; followed by a valid CSS declaration (property and value).

Security note: To help prevent third party or user themes from injecting malicious code into your app, theme options are rejected if they contain certain character sequences. Rejected options are silently discarded.

see

sBaseTheme

Hierarchy

  • ThemeOptions

Index

Properties

Optional bPanelHide

bPanelHide: boolean

Whether Shell SidePanels will responsively hide at very narrow device widths. This effect is independent of whether the panel has been programmatically opened or closed using SidePanel.open. That is, when true, the panel can be hidden even when "open". Default is false.

Optional bPanelShrink

bPanelShrink: boolean

Whether Shell SidePanels will responsively shrink in size at narrow device widths. Default is true.

Optional cButtonActiveBg

cButtonActiveBg: string

The background colour for UI buttons that are active, specified as a CSS colour value. This colour is most prominent just after the button is released.

Optional cButtonBg

cButtonBg: string

The background colour for UI buttons, specified as a CSS colour value.

Optional cButtonEmptyFg

cButtonEmptyFg: string

The foreground (label) colour for empty nodes in math objects shown in UI buttons, specified as a CSS colour value.

Optional cButtonFg

cButtonFg: string

The foreground (label) colour for UI buttons, specified as a CSS colour value.

Optional cButtonFocusBg

cButtonFocusBg: string

The background colour for focused UI buttons, specified as a CSS colour value.

Optional cButtonHoverBg

cButtonHoverBg: string

The background colour for UI buttons under the cursor (pointer), specified as a CSS colour value.

Optional cButtonMoveBg

cButtonMoveBg: string

The alternate background colour for UI buttons related to caret movement, specified as a CSS colour value.

Optional cButtonSelectBg

cButtonSelectBg: string

The alternate background colour for UI buttons related to caret selection, specified as a CSS colour value.

Optional cCaret

cCaret: string

The colour of the caret (insertion point), specified as a CSS colour value.

Optional cDialogBg

cDialogBg: string

The background colour of dialog pop-ups, specified as a CSS colour value.

Optional cDialogFootFg

cDialogFootFg: string

The foreground colour used in the foot area of dialogs, specified as a CSS colour value. This is the text colour of dialog accept and cancel buttons.

Optional cDisabledBg

cDisabledBg: string

The background colour for UI buttons that are presently disabled, specified as a CSS colour value.

Optional cError

cError: string

The colour of the wavy error underline, specified as a CSS colour value.

Optional cErrorFeedback

cErrorFeedback: string

The flash colour used for visual error feedback.

see

sErrorFeedback

Optional cFieldBg

cFieldBg: string

The background colour of text and number fields in dialogs, specified as a CSS colour value.

Optional cFileDrop

cFileDrop: string

The colour used to indicate that a file will be dropped into the editor, specified as a CSS colour value.

see

acceptFileDrops

Optional cHardShadow

cHardShadow: string

The colour used for hard shadows in UI elements, specified as a CSS colour value. This colour is most prominent in the gaps between shell palettes.

Optional cHighlight

cHighlight: string

The colour of other (non-selection) content highlighters, specified as a CSS colour value.

Optional cInterface

cInterface: string

The default colour for UI text, specified as a CSS colour value.

Optional cKeyStrokeBg

cKeyStrokeBg: string

The background colour of keys in generated help tables.

Optional cKeyStrokeFg

cKeyStrokeFg: string

The foreground colour of keys in generated help tables.

Optional cKeyStrokeShadow

cKeyStrokeShadow: string

The shadow colour of keys in generated help tables.

Optional cLine

cLine: string

The colour used for lines around Views, Shells, and rows and buttons in palettes.

Optional cMathBg

cMathBg: string

The colour of View backgrounds, specified as a CSS colour value.

Optional cMathFg

cMathFg: string

The default colour of math content, specified as a CSS colour value.

Optional cNodeAnswerBg

cNodeAnswerBg: string

The background colour of the indicator for a "spoiler box" whose contents are only revealed when the caret is within, specified as a CSS colour value.

Optional cNodeAnswerFg

cNodeAnswerFg: string

The foreground colour of the indicator for a "spoiler box" whose contents are only revealed when the caret is within, specified as a CSS colour value.

Optional cNodeBlank

cNodeBlank: string

The colour of the indicator for a blank to be filled in, specified as a CSS colour value.

Optional cNodeCloned

cNodeCloned: string

The colour of a "field" whose content is copied automatically from a real field, specified as a CSS colour value.

Optional cNodeEmpty

cNodeEmpty: string

The colour of the empty node indicator which highlights empty fields of a math object, specified as a CSS colour value.

Optional cNodeIdent

cNodeIdent: string

The default colour of an identifier (variable whose name is longer than one letter), specified as a CSS colour value.

Optional cNodeOptional

cNodeOptional: string

The colour of the empty node indicator which highlights an empty but optional field of a math object, specified as a CSS colour value.

Optional cNodeText

cNodeText: string

The background colour indicating that content is part of a text box and not regular math, specified as a CSS colour value.

Optional cNodeUnit

cNodeUnit: string

The colour that indicates that content is part of a unit (such as m/s) and not regular math, specified as a CSS colour value.

Optional cPanelBg

cPanelBg: string

The background colour of side panels, specified as a CSS colour value.

Optional cPressure

cPressure: string

The colour of the pressure ripple effect, specified as a CSS colour value.

Optional cPrimaryBg

cPrimaryBg: string

The alternate background colour for "primary" UI elements, such as palette headers, specified as a CSS colour value.

Optional cPrimaryFg

cPrimaryFg: string

The alternate foreground colour for "primary" UI elements, such as palette headers, specified as a CSS colour value.

Optional cSelection

cSelection: string

The colour of the selection highlighter, specified as a CSS colour value.

Optional cSoftShadow

cSoftShadow: string

The colour used for soft shadows in UI elements, specified as a CSS colour value. This colour is most prominent as the shadow of menus and dialogs.

Optional cToastBg

cToastBg: string

The background colour for toast messages, specified as a CSS colour value.

Optional cToastFg

cToastFg: string

The foreground colour for toast messages, specified as a CSS colour value.

Optional cToggleRing

cToggleRing: string

The colour of the focus ring used to highlight toggle switch controls.

Optional cToggleSelectedBg

cToggleSelectedBg: string

The colour used to indicate that a toggle switch is selected (turned on).

Optional dCaretBlink

dCaretBlink: string

The period of time required for one blink of the caret (insertion point), specified as a CSS duration value.

see

sCaretBlink

Optional fInterface

fInterface: string

The font family list used for UI elements, specified as a CSS font family list. Including the special family name mcdUI will load and use the theme-standard font family.

Optional nCaretBlinks

nCaretBlinks: number

The number of times the caret will blink after being moved. After this number of blinks, the caret will remain solid until it is moved or the View loses and regains focus. If set to 0 the caret will blink continuously. Has no effect if sCaretBlink is "none".

Optional nScale

nScale: number

A global scaling factor that adjusts the size of View and Shell content relative to the page's rem unit.

Note: Changes to any of the nScale* values will not be reflected correctly by existing Views or Shells. Either set the scale values before creating any Views or Shells, or dispose of and replace existing Views or Shells after applying the change. (Alternatively, you can scale existing Views and Shells by modifying the size of the page's rem unit.)

see

nScaleUi

see

nScaleMath

Optional nScaleMath

nScaleMath: number

A scaling factor applied to math content in a View. The final scaling factor for math content is nScale * nScaleMath, constrained to a reasonable range.

see

nScale

Optional nScaleUi

nScaleUi: number

A scaling factor applied to UI elements such as palette buttons. The final scaling factor for UI elements is nScale * nScaleUi, constrained to a reasonable range.

see

nScale

Optional sBaseTheme

sBaseTheme: "default" | "dark"

The base theme that these options will build on. Possible values:

  • "default": Use the default base theme (black text, white background, blue accents).
  • "dark": Use the "dark mode" base theme (white text, black background, grey accents).

Optional sCaretBlink

sCaretBlink: "none" | "fade" | "step"

The caret (insertion point) blink style. Default is "fade". Possible values:

  • "fade": The caret will fade smoothly between visible and invisible.
  • "step": The caret will switch instantly between visible and invisible.
  • "none": The caret will not blink.
see

dCaretBlink

Optional sErrorFeedback

sErrorFeedback: "none" | "all" | "aural" | "visual" | "tactile" | "aural,visual" | "aural,tactile" | "visual,tactile"

The sensory form(s) taken by feedback when the user commits an error, such as trying an inapplicable command. Possible values:

  • "none": Do not provide additional feedback. The user must infer that an error occurred from the (lack of) change in state.
  • "aural": Emit a brief audio cue. This has no effect if not supported by the device, or if audio volume is muted.
  • "tactile": Emit a brief haptic cue, typically by causing the device to vibrate. This has no effect if not supported by the device.
  • "visual": Emit a brief visual cue by flashing the screen or window. The maximum rate at which such flashes can occur is limited to minimize the risk of triggering a seizure in users with photosensitive epilepsy.
  • "all": Emit feedback using all available methods.

Multiple comma-separated values are allowed. The default value is "aural,tactile".

This API is still under development and is subject to change. Copyright © Math I Can Do Solutions Incorporated and/or its licensors.