Theme
Interface | Source Code
Properties
Section titled “Properties”accent: string
Section titled “accent: string”A color that accents elements on the page. It should probably be complementary, but stand out against the background and foreground.
affirmative: string
Section titled “affirmative: string”The color used to indicate an affirmative action, like a confirmation button for whether the user wants to save their data.
affirmativeText: string
Section titled “affirmativeText: string”The color for text that appears on an element with a background of the affirmative color.
background: string
Section titled “background: string”The color that should be used for the background of the page.
button: string
Section titled “button: string”A color used for the button elements on the page. This should be visible against the foreground and/or background, depending on what you’re going to put elements on top of.
buttonText: string
Section titled “buttonText: string”The color for the text of a button. This should be visible against the button color.
disabled: string
Section titled “disabled: string”The color that should be used for disabled elements. This should be visible against the foreground and/or background, depending on what you’re going to put elements on top of.
focus: string
Section titled “focus: string”The color used for the focus outline of elements. This should be easily visible against the foreground and/or background, depending on what you’re going to put elements on top of. Contrast is particularly important for this color, as it’s what will indicate to a user navigating the page with the keyboard what element is currently selected.
foreground: string
Section titled “foreground: string”The color that should be used for things that sit on top of the background. This could be things like cards or nav bars. This color should be visible against the background.
info: string
Section titled “info: string”The color used to call attention to extra information.
infoText: string
Section titled “infoText: string”The color for text that appears on an element with a background of the info color.
name: string
Section titled “name: string”The name of the theme. This should be unique among themes.
negative: string
Section titled “negative: string”The color used to indicate a negative or possibly destructive action, like a confirmation button for deleting some data.
negativeText: string
Section titled “negativeText: string”The color for text that appears on an element with a background of the negative color.
outline: string
Section titled “outline: string”A color used to outline elements to show their box. This could be used to outline things like text inputs.
text: string
Section titled “text: string”The color that should be used for text on the page. This should be visible against the foreground and/or background, depending on what you’re going to put elements on top of.
warn: string
Section titled “warn: string”The color used to indicate a warning to the user. A warning isn’t as bad as something negative and should be used when indicating to the user that something had a recoverable/ignorable issue.
warnText: string
Section titled “warnText: string”The color for text that appears on an element with a background of the warn color.