Theme

See the theme option of Mode.dialog to learn how to use custom themes with Porto. When using a custom theme with Mode.dialog, all properties but colorScheme are optional and will fall back to the default theme values.

Theme related types exported by porto/theme:

colorScheme

• Type: "light" | "dark" | "light dark"

The color scheme for the theme. With "light dark", theme colors must be provided as Theme.LightDarkColor (light and dark color pairs). Otherwise, colors must be provided as Theme.Color.

accent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#0588f0", "#3b9eff"]

Accent color. Used for highlighting text, icons or outline elements.

focus

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#0090ff", "#0090ff"]

Focus ring color. Used for keyboard navigation and input fields.

link

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#0588f0", "#3b9eff"]

Link color. Used for hyperlinks and interactive text elements.

separator

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#cecece", "#484848"]

Separator color. Used for dividing elements, such as lines between sections or items.

baseBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#fcfcfc", "#191919"]

Base background color. Used for the main dialog background and other large areas.

baseBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e0e0e0", "#2a2a2a"]

Base border color. Used around base surfaces.

baseContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#202020", "#eeeeee"]

Base content color. Used over baseBackground for text and icons.

baseContentSecondary

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#8d8d8d", "#6e6e6e"]

Secondary base content color. Used over baseBackground for secondary text and icons.

baseContentTertiary

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#838383", "#7b7b7b"]

Tertiary base content color. Used over baseBackground for text and icons.

baseContentPositive

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#30a46c", "#30a46c"]

Positive base content color, such as success messages or positive values. Used over baseBackground for text and icons.

baseContentNegative

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e5484d", "#e5484d"]

Negative base content color, such as error messages or negative values. Used over baseBackground for text and icons.

baseHoveredBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#f0f0f0", "#222222"]

Base background color when hovered, e.g. for links showing a background color when hovered.

frameBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#fcfcfc", "#222222"]

Frame background color. Used for the dialog title bar and other frame elements.

frameContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#838383", "#7b7b7b"]

Frame content color. Used over frameBackground for text and icons.

frameBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e0e0e0", "#2a2a2a"]

Frame border color. Used around frame surfaces.

frameRadius

• Default: 14

Frame radius. Used for the radius of the dialog.

badgeBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e8e8e8", "#2a2a2a"]

Default badge background color. Used for small labels, indicators or icons, e.g. for the environment name in the title bar.

badgeContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#838383", "#7b7b7b"]

Badge content color. Used over badgeBackground for text and icons.

badgeStrongBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#D9D9D9", "#3A3A3A"]

More prominent badge background color. Used for badges that need to stand out more than the default badge, such as the default icon in the title bar.

badgeStrongContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#000000", "#FFFFFF"]

Content color for strong badges. Used over badgeStrongBackground for text and icons.

badgeInfoBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#008ff519", "#0077ff3a"]

Background color for info badges. Used for the background of icons that provide additional information or context, e.g. the icons used for screen titles.

badgeInfoContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#0588f0", "#3b9eff"]

Content color for info badges. Used over badgeInfoBackground for text and icons.

badgeNegativeBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#FCD8DA", "#500F1C"]

Background color for negative badges. Used for badges indicating negative states or values, such as errors or warnings.

badgeNegativeContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#DC3E42", "#EC5D5E"]

Content color for negative badges. Used over badgeNegativeBackground for text and icons.

badgePositiveBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#E3F3E8", "#1A3428"]

Background color for positive badges. Used for badges indicating positive states or values.

badgePositiveContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#30A46C", "#30A46C"]

Content color for positive badges. Used over badgePositiveBackground for text and icons.

badgeWarningBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#FBF8E6", "#252018"]

Background color for warning badges. Used for badges indicating warnings or important notices.

badgeWarningContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#E2A336", "#8F6424"]

Content color for warning badges. Used over badgeWarningBackground for text and icons.

primaryBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#0090ff", "#0090ff"]

Primary background color. Used for primary buttons and important interactive elements.

primaryBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e0e0e0", "#2a2a2a"]

Primary border color. Used around primary surfaces.

primaryContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#FFF", "#FFF"]

Primary content color. Used over primaryBackground for text and icons.

primaryHoveredBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#058bf0", "#3b9eff"]

Primary buttons background color when hovered.

primaryHoveredBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#058bf0", "#3b9eff"]

Primary border color when hovered. Used around primary surfaces.

secondaryBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#f0f0f0", "#222222"]

Secondary background color. Used for secondary buttons and interactive elements.

secondaryBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#f0f0f0", "#222222"]

Secondary border color. Used around secondary surfaces.

secondaryContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#202020", "#eeeeee"]

Secondary content color. Used over secondaryBackground for text and icons.

secondaryHoveredBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e8e8e8", "#2a2a2a"]

Secondary buttons background color when hovered.

secondaryHoveredBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e8e8e8", "#2a2a2a"]

Secondary buttons border color when hovered. Used around secondary surfaces.

disabledBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#F0F0F0", "#222222"]

Disabled buttons background color. Used for disabled buttons and interactive elements.

disabledBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#F0F0F0", "#222222"]

Disabled buttons border color. Used for borders around disabled surfaces.

disabledContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#BBBBBB", "#606060"]

Disabled content color. Used over disabledBackground for text and icons.

negativeBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#feebec", "#3b1219"]

Negative background color. Generally red, used for elements indicating error or negative state, such as a destructive action or an error message.

negativeContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e5484d", "#e5484d"]

Negative content color. Used over negativeBackground for text and icons in error elements.

positiveBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e6f7ed", "#0d2a1f"]

Positive background color. Generally green, used for elements indicating success or positive state, such as a success message or a confirmation button.

positiveContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#30a46c", "#30a46c"]

Positive content color. Used over positiveBackground for text and icons in success elements.

fieldBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e8e8e8", "#222222"]

Field background color. Used for input fields, text areas, some edit buttons, and other form elements.

fieldBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e0e0e0", "#313131"]

Field border color. Used around field surfaces.

fieldContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#646464", "#b4b4b4"]

Field content color. Used over fieldBackground for text and icons.

fieldContentSecondary

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#838383", "#7b7b7b"]

Field secondary content color. Used over fieldBackground for text and icons.

fieldErrorBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#eb8e90", "#b54548"]

Field error border color. Used around field surfaces.

fieldFocusedBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#e0e0e0", "#313131"]

Field background color when focused. Used for input fields and other form elements when they are focused or active.

fieldFocusedContent

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#202020", "#eeeeee"]

Field content color when focused. Used over fieldFocusedBackground for text and icons in focused input fields.