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: ["#e0e0e0", "#484848"]

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

radiusSmall

• Default: 5

Small radius. Used for small elements like icons.

radiusMedium

• Default: 8

Medium radius. Used for medium-sized elements like input fields or buttons.

radiusLarge

• Default: 14

Large radius. Used for larger elements like dialog windows or panels.

baseBackground

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

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

baseAltBackground

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

Alternative base background color. Used for surfaces such as panels or sections that need to be visually distinct from the main baseBackground.

basePlaneBackground

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

Base plane background color. Used as a surface underneath baseBackground or as an alternative to it.

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: ["#838383", "#7b7b7b"]

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

baseContentTertiary

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

Tertiary base content color. Used over baseBackground for tertiary 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", "#191919"]

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

frameContent

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

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

frameBorder

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

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: ["#e0e0e0", "#222222"]

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: ["#0090ff", "#0090ff"]

Primary border color. Used around primary surfaces.

primaryContent

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

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: ["#e8e8e8", "#2a2a2a"]

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

secondaryBorder

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

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: ["#e0e0e0", "#313131"]

Secondary buttons background color when hovered.

secondaryHoveredBorder

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

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: ["#dc3e42", "#8f6424"]

Negative background color. Generally red, used for interactive elements indicating a critical action, such as a delete button.

negativeContent

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

Negative content color. Used over negativeBackground for text and icons.

negativeBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#dc3e42", "#8f6424"]

Negative border color. Used around negative surfaces.

negativeSecondaryBackground

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#fcd8da", "#500f1c"]

Secondary negative background color. Used for elements indicating a non-critical negative action, such as cancelling an operation.

negativeSecondaryContent

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

Danger content color. Used over dangerBackground for text and icons in critical elements.

negativeSecondaryBorder

• Type: Theme.LightDarkColor | Theme.Color
• Default: ["#fcd8da", "#500f1c"]

Secondary negative border color. Used around secondary negative surfaces.

positiveBackground

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

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: ["#ffffff", "#ffffff"]

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

positiveBorder

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

Positive border color. Used around positive surfaces.

strongBackground

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

Strong background color. Used for elements that need to stand out, similar to primary but with a more pronounced effect.

strongContent

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

Strong content color. Used over strongBackground for text and icons.

strongBorder

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

Strong border color. Used around strong surfaces.

fieldBackground

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

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: ["#202020", "#eeeeee"]

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

fieldContentSecondary

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

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

fieldContentTertiary

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

Field tertiary content color. Used for less important text, such as helper text or hints. 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.