Variable ThemedColorsConst

Type declaration

• Readonlydark: {
      background: "#191F24";
      blue5: "#4B7096";
      blueDark: "#1E3456";
      buttonSecondary: "#4B5F72";
      cardDivider: "#3E464F";
      cards: "#292E33";
      cardSectionSeparator: "#4A525D";
      drawer: "#20252A";
      fieldsFloating: "#292E33";
      fieldsOnCard: "#394047";
      greenDark: "#3DAE33";
      greenDark2: "#245C1F";
      greenLight: "#5ADD4F";
      iconButtonBg: "#394047";
      iconsDisabled: "#777F8A";
      lineColor: "#384351";
      navigation: "#171A1E";
      navigationSide: "#14171A";
      navigationTop: "#171A1E";
      orange: "#EC9E57";
      orangeDark: "#503D1B";
      primary: "#4E8DED";
      red: "#E6696B";
      redDark: "#652A2B";
      text: "#FFFFFF";
      textFaded: "#ADB8C9";
      white: "#FFFFFF";
  }

  • Readonlybackground: "#191F24"

    Background color.

  • Readonlyblue5: "#4B7096"

    Blue5 color.

  • ReadonlyblueDark: "#1E3456"

    Blue dark 2 color.

  • ReadonlybuttonSecondary: "#4B5F72"

    Secondary button color.

  • ReadonlycardDivider: "#3E464F"

    Card divider color.

  • Readonlycards: "#292E33"

    Cards background color.

  • ReadonlycardSectionSeparator: "#4A525D"

    Card section separator color.

  • Readonlydrawer: "#20252A"

    Drawer background color.

  • ReadonlyfieldsFloating: "#292E33"

    Fields floating background color.

  • ReadonlyfieldsOnCard: "#394047"

    Fields on card background color.

  • ReadonlygreenDark: "#3DAE33"

    Green dark color.

  • ReadonlygreenDark2: "#245C1F"

    Green dark 2 color.

  • ReadonlygreenLight: "#5ADD4F"

    Green light color.

  • ReadonlyiconButtonBg: "#394047"

    Icon button BG

  • ReadonlyiconsDisabled: "#777F8A"

    Disabled icons color.

  • ReadonlylineColor: "#384351"

    Line Color

  • Readonlynavigation: "#171A1E"

    Navigation color.

  • ReadonlynavigationSide: "#14171A"

    Navigation side.

  • ReadonlynavigationTop: "#171A1E"

    Navigation Top.

  • Readonlyorange: "#EC9E57"

    Orange color.

  • ReadonlyorangeDark: "#503D1B"

    Orange dark color.

  • Readonlyprimary: "#4E8DED"

    Primary brand color.

    Example

    <div style={{ backgroundColor: ThemedColors.dark.primary }}>Hello</div>
    Copy

  • Readonlyred: "#E6696B"

    Red color.

  • ReadonlyredDark: "#652A2B"

    Red dark color.

  • Readonlytext: "#FFFFFF"

    Text color.

  • ReadonlytextFaded: "#ADB8C9"

    Text faded color.

  • Readonlywhite: "#FFFFFF"

    White color.

• Readonlylight: {
      background: "#E9E9E9";
      blue5: "#4B7096";
      blueDark: "#E2EDFF";
      buttonSecondary: "#B2B9C4";
      cardDivider: "#E0E3E8";
      cards: "#FFFFFF";
      cardSectionSeparator: "#E0E3E8";
      drawer: "#F7F7F7";
      fieldsFloating: "#FFFFFF";
      fieldsOnCard: "#F7F7F7";
      greenDark: "#3DAE33";
      greenDark2: "#245C1F";
      greenLight: "#5ADD4F";
      iconButtonBg: "#FFFFFF";
      iconsDisabled: "#9BA4B1";
      lineColor: "#F2F2F2";
      navigation: "#344767";
      navigationSide: "#344767";
      navigationTop: "#FBFBFB";
      orange: "#EC9E57";
      orangeDark: "#FFEDD5";
      primary: "#4E8DED";
      red: "#E6696B";
      redDark: "#FCE1E1";
      text: "#353B43";
      textFaded: "#9BA4B1";
      white: "#ffffff";
  }

  • Readonlybackground: "#E9E9E9"

    Background color.

  • Readonlyblue5: "#4B7096"

    Blue5 color.

  • ReadonlyblueDark: "#E2EDFF"

    Blue dark 2 color.

  • ReadonlybuttonSecondary: "#B2B9C4"

    Secondary button color.

  • ReadonlycardDivider: "#E0E3E8"

    Card divider color.

  • Readonlycards: "#FFFFFF"

    Cards background color.

  • ReadonlycardSectionSeparator: "#E0E3E8"

    Card section separator color.

  • Readonlydrawer: "#F7F7F7"

    Drawer background color.

  • ReadonlyfieldsFloating: "#FFFFFF"

    Fields floating background color.

  • ReadonlyfieldsOnCard: "#F7F7F7"

    Fields on card background color.

  • ReadonlygreenDark: "#3DAE33"

    Green dark color.

  • ReadonlygreenDark2: "#245C1F"

    Green dark 2 color.

  • ReadonlygreenLight: "#5ADD4F"

    Green light color.

  • ReadonlyiconButtonBg: "#FFFFFF"

    Icon button BG

  • ReadonlyiconsDisabled: "#9BA4B1"

    Disabled icons color.

  • ReadonlylineColor: "#F2F2F2"

    Line Color

  • Readonlynavigation: "#344767"

    Navigation color.

  • ReadonlynavigationSide: "#344767"

    Navigation side.

  • ReadonlynavigationTop: "#FBFBFB"

    Navigation Top.

  • Readonlyorange: "#EC9E57"

    Orange color.

  • ReadonlyorangeDark: "#FFEDD5"

    Orange dark color.

  • Readonlyprimary: "#4E8DED"

    Primary brand color.

    Example

    <div style={{ backgroundColor: ThemedColors.light.primary }}>Hello</div>
    Copy

  • Readonlyred: "#E6696B"

    Red color.

  • ReadonlyredDark: "#FCE1E1"

    Red dark color.

  • Readonlytext: "#353B43"

    Text color.

  • ReadonlytextFaded: "#9BA4B1"

    Text faded color.

  • Readonlywhite: "#ffffff"

    White color.