AboutSupportDeveloper GuideVersion 21.0.10

Type alias CustomThemeOptionsWithScheme

CustomThemeOptionsWithScheme: BaseThemeOptions & {
    default?: `${Exclude<ColorSchemeOptionType, "system">}`;
    notificationIndicatorColors?: NotificationIndicatorColorsWithScheme;
    palettes: {
        dark: CustomPaletteSet;
        light: CustomPaletteSet;
    };
}

Type declaration

  • Optional default?: `${Exclude<ColorSchemeOptionType, "system">}`

    The default color scheme for this theme.

    This will be used as a fallback if the user has not yet selected a color scheme, or there was an error fetching the user's color scheme.

    Default

    'dark'
  • Optional notificationIndicatorColors?: NotificationIndicatorColorsWithScheme

    NOTE: Only used in Notifications

    Used for providing color overrides of notification indicators or defining custom colors that clients could target.

    Example

    const themeOptions = {
      default: 'light',
      palettes: {...}
      notificationIndicatorColors: {
        red: {
          dark: {
            background: '#FF0000',
            foreground: '#FFFFDD'
          },
          light: {
            // If `foreground` is not defined it will default to `#FFFFFF`
            background: '#FF1100',
          }
        },
        customred: {
          // If one of the schemes is not defined (in this case `light`) the values from the defined one will be copied to the other
          dark: {
            background: '#FF0011',
            foreground: '#FFDDDD'
          }
        }
      }
    };
  • palettes: {
        dark: CustomPaletteSet;
        light: CustomPaletteSet;
    }

    The palette for this theme.

    When a user selects a color scheme, the palette will be updated to match the selected scheme.

    If system is selected, the palette will be updated to match the user's system color scheme.

Settings

Theme