Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ThemeInterface

Hierarchy

  • ThemeInterface

Index

Properties

Properties

Optional background

background: string

Overall foreground color. This color is used if not overriden by a component

Optional button

button: { activeForeground?: string; containedPrimaryBackground?: string; containedPrimaryForeground?: string; hoverOverlayColor?: string; outlinedBorderColor?: string; outlinedInactiveOverlayColor?: string; outlinedPrimaryBackground?: string; outlinedPrimaryForeground?: string; outlinedSecondaryBackground?: string; outlinedSecondaryForeground?: string; textInactiveOpacity?: string; textPrimaryForeground?: string; textSecondaryForeground?: string }

https://material.io/components/buttons/

Type declaration

  • Optional activeForeground?: string

    States

  • Optional containedPrimaryBackground?: string

    High Emphasis button - primary variant e.g.: Export button

  • Optional containedPrimaryForeground?: string
  • Optional hoverOverlayColor?: string
  • Optional outlinedBorderColor?: string
  • Optional outlinedInactiveOverlayColor?: string
  • Optional outlinedPrimaryBackground?: string

    Medium Emphasis button - primary variant e.g.: New Text, Text Design, Upload on toolControlBar

  • Optional outlinedPrimaryForeground?: string
  • Optional outlinedSecondaryBackground?: string

    Medium Emphasis button - secondary variant e.g.: Remove Filter, Overlay, Shuffle Text Design

  • Optional outlinedSecondaryForeground?: string
  • Optional textInactiveOpacity?: string
  • Optional textPrimaryForeground?: string

    Low Emphasis button - primary variant e.g.: primary button in modal

  • Optional textSecondaryForeground?: string

    Low Emphasis button - secondary variant e.g.: secondary button in modal, undo, redo, Carousel navigators, alignment buttons

Optional canvas

canvas: { background?: string; controlsColor?: string; controlsOutline?: string; cropBackdrop?: string }

Type declaration

  • Optional background?: string
  • Optional controlsColor?: string

    control color, eg: knob or crop control color

  • Optional controlsOutline?: string

    control outline color, eg: sprite or focus border

  • Optional cropBackdrop?: string

    backdrop color in crop

Optional canvasActionBar

canvasActionBar: { background?: string; borderRadius?: number; foreground?: string; separatorColor?: string }

Type declaration

  • Optional background?: string

    Button Group e.g.: Sprite Actions

  • Optional borderRadius?: number
  • Optional foreground?: string
  • Optional separatorColor?: string

Optional card

card: { activeBorderColor?: string; activeOverlayColor?: string; background?: string; foreground?: string; hoverOverlayColor?: string; inactiveOverlayColor?: string; labelBackground?: string; labelForeground?: string }

Type declaration

  • Optional activeBorderColor?: string

    states

  • Optional activeOverlayColor?: string
  • Optional background?: string
  • Optional foreground?: string
  • Optional hoverOverlayColor?: string
  • Optional inactiveOverlayColor?: string
  • Optional labelBackground?: string
  • Optional labelForeground?: string

    card in PESDK usually has a label

Optional checkbox

checkbox: { activeBackground?: string; activeForeground?: string; background?: string; foreground?: string; hoverOpacity?: string; inactiveOpacity?: string }

Input Elements

Type declaration

  • Optional activeBackground?: string
  • Optional activeForeground?: string

    States

  • Optional background?: string
  • Optional foreground?: string
  • Optional hoverOpacity?: string
  • Optional inactiveOpacity?: string

Optional colorItem

colorItem: { borderRadius?: string; margin?: string }

Type declaration

  • Optional borderRadius?: string
  • Optional margin?: string

Optional colorPicker

colorPicker: { controlsColor?: string; inputBorderColor?: string; listBackground?: string; listShadow?: string }

Type declaration

  • Optional controlsColor?: string

    control color, eg: thumb color

  • Optional inputBorderColor?: string
  • Optional listBackground?: string
  • Optional listShadow?: string

Optional dropdown

dropdown: { background?: string; borderColor?: string; caretColor?: string; foreground?: string; hoverBorderColor?: string; inactiveOpacity?: string; listBackground?: string; listBorderColor?: string; listForeground?: string; listItemHoverBackground?: string; listShadow?: string }

Type declaration

  • Optional background?: string
  • Optional borderColor?: string
  • Optional caretColor?: string
  • Optional foreground?: string
  • Optional hoverBorderColor?: string
  • Optional inactiveOpacity?: string
  • Optional listBackground?: string
  • Optional listBorderColor?: string
  • Optional listForeground?: string
  • Optional listItemHoverBackground?: string

    States

  • Optional listShadow?: string

    According to material design shadows are applied for dark theme they don't really work for light theme

Optional error

error: string

Optional focusOutlineColor

focusOutlineColor: string

Overall outline color for focused elements. This color is only used if not overridden by a component

Optional foreground

foreground: string

Overall background color. This color is used if not overriden by a component

Optional mainCanvasActionBar

mainCanvasActionBar: { background?: string; borderColor?: string; foreground?: string }

top bar in advanced UI

Type declaration

  • Optional background?: string
  • Optional borderColor?: string
  • Optional foreground?: string

Optional modal

modal: { backdrop?: string; background?: string; bodyForeground?: string; headerForeground?: string }

Portals

Type declaration

  • Optional backdrop?: string
  • Optional background?: string
  • Optional bodyForeground?: string
  • Optional headerForeground?: string

Optional primary

primary: string

Optional scrollbar

scrollbar: { handleColor?: string }

Scrollbar handle color, track color is transparent

Type declaration

  • Optional handleColor?: string

Optional selectColor

selectColor: { activeBorderColor?: string; inactiveOpacity?: string }

Type declaration

  • Optional activeBorderColor?: string
  • Optional inactiveOpacity?: string

Optional shape

shape: { radiusLarge?: number; radiusMedium?: number; radiusSmall?: number }

Type declaration

  • Optional radiusLarge?: number

    Border Radius for large sized components Modal

  • Optional radiusMedium?: number

    Border Radius for medium sized components Button, Tooltip, Cards, Dropdown, Color Picker, Input

  • Optional radiusSmall?: number

    Border Radius for small sized components Color Selection, Checkbox

Optional slider

slider: { activeTrackColor?: string; hoverOpacity?: string; inactiveOpacity?: string; thumbBackground?: string; thumbBorderColor?: string; trackColor?: string }

Type declaration

  • Optional activeTrackColor?: string

    States

  • Optional hoverOpacity?: string
  • Optional inactiveOpacity?: string
  • Optional thumbBackground?: string
  • Optional thumbBorderColor?: string
  • Optional trackColor?: string

Optional snapping

snapping: { positionGuideColor?: string; rotationGuideColor?: string }

Type declaration

  • Optional positionGuideColor?: string
  • Optional rotationGuideColor?: string

Optional success

success: string

Optional tabTitle

tabTitle: { activeBackground?: string; activeBorderColor?: string; activeForeground?: string; background?: string; foreground?: string }

relevant only for Basic UI

Type declaration

  • Optional activeBackground?: string
  • Optional activeBorderColor?: string
  • Optional activeForeground?: string

    States

  • Optional background?: string
  • Optional foreground?: string

Optional textInput

textInput: { background?: string; borderColor?: string; foreground?: string; hoverBorderColor?: string; inactiveOpacity?: string }

Type declaration

  • Optional background?: string
  • Optional borderColor?: string
  • Optional foreground?: string
  • Optional hoverBorderColor?: string

    States

  • Optional inactiveOpacity?: string

Optional toolControlBar

toolControlBar: { background?: string; borderColor?: string; inputLabelForeground?: string; inputLabelInactiveOpacity?: string; separatorColor?: string; shadow?: string; titleForeground?: string }

Type declaration

  • Optional background?: string
  • Optional borderColor?: string
  • Optional inputLabelForeground?: string
  • Optional inputLabelInactiveOpacity?: string
  • Optional separatorColor?: string
  • Optional shadow?: string

    The shadow can be used to create a better seperation between control bar and the canvas

  • Optional titleForeground?: string

Optional toolbar

toolbar: { activeBackground?: string; activeForeground?: string; background?: string; border?: string; borderColor?: string; foreground?: string }

App sections

Type declaration

  • Optional activeBackground?: string
  • Optional activeForeground?: string
  • Optional background?: string
  • Optional border?: string
  • Optional borderColor?: string
  • Optional foreground?: string

Optional tooltip

tooltip: { background?: string; foreground?: string }

Type declaration

  • Optional background?: string
  • Optional foreground?: string

Optional transform

transform: { crops?: { highlight?: string; main?: string; shadow?: string } }

Type declaration

  • Optional crops?: { highlight?: string; main?: string; shadow?: string }
    • Optional highlight?: string
    • Optional main?: string
    • Optional shadow?: string

Optional typography

typography: WebFont | GoogleFont

Optional warning

warning: string

Optional webcam

webcam: { backdrop?: string; background?: string; floatButton?: string }

Type declaration

  • Optional backdrop?: string
  • Optional background?: string
  • Optional floatButton?: string