GrafanaTheme interface

Signature

  1. export interface GrafanaTheme extends GrafanaThemeCommons

Import

  1. import { GrafanaTheme } from '@grafana/data';

Properties

PropertyTypeDescription
colors{
bg1: string;
bg2: string;
bg3: string;
border1: string;
border2: string;
border3: string;
bgBlue1: string;
bgBlue2: string;
dashboardBg: string;
bodyBg: string;
panelBg: string;
panelBorder: string;
pageHeaderBg: string;
pageHeaderBorder: string;
dropdownBg: string;
dropdownShadow: string;
dropdownOptionHoverBg: string;
link: string;
linkDisabled: string;
linkHover: string;
linkExternal: string;
textStrong: string;
textHeading: string;
text: string;
textSemiWeak: string;
textWeak: string;
textFaint: string;
textBlue: string;
formLabel: string;
formDescription: string;
formInputBg: string;
formInputBgDisabled: string;
formInputBorder: string;
formInputBorderHover: string;
formInputBorderActive: string;
formInputBorderInvalid: string;
formFocusOutline: string;
formInputText: string;
formInputDisabledText: string;
formInputPlaceholderText: string;
formValidationMessageText: string;
formValidationMessageBg: string;
}
isDarkboolean
isLightboolean
palette{
black: string;
white: string;
dark1: string;
dark2: string;
dark3: string;
dark4: string;
dark5: string;
dark6: string;
dark7: string;
dark8: string;
dark9: string;
dark10: string;
gray1: string;
gray2: string;
gray3: string;
gray4: string;
gray5: string;
gray6: string;
gray7: string;
gray98: string;
gray97: string;
gray95: string;
gray90: string;
gray85: string;
gray70: string;
gray60: string;
gray33: string;
gray25: string;
gray15: string;
gray10: string;
gray05: string;
blue95: string;
blue85: string;
blue80: string;
blue77: string;
red88: string;
redBase: string;
redShade: string;
greenBase: string;
greenShade: string;
red: string;
yellow: string;
purple: string;
orange: string;
orangeDark: string;
queryRed: string;
queryGreen: string;
queryPurple: string;
queryOrange: string;
brandPrimary: string;
brandSuccess: string;
brandWarning: string;
brandDanger: string;
online: string;
warn: string;
critical: string;
}
shadows{
listItem: string;
}
typeGrafanaThemeType
visualizationThemeVisualizationColors

colors property

Signature

  1. colors: {
  2.         bg1: string;
  3.         bg2: string;
  4.         bg3: string;
  5.         border1: string;
  6.         border2: string;
  7.         border3: string;
  8.         bgBlue1: string;
  9.         bgBlue2: string;
  10.         dashboardBg: string;
  11.         bodyBg: string;
  12.         panelBg: string;
  13.         panelBorder: string;
  14.         pageHeaderBg: string;
  15.         pageHeaderBorder: string;
  16.         dropdownBg: string;
  17.         dropdownShadow: string;
  18.         dropdownOptionHoverBg: string;
  19.         link: string;
  20.         linkDisabled: string;
  21.         linkHover: string;
  22.         linkExternal: string;
  23.         textStrong: string;
  24.         textHeading: string;
  25.         text: string;
  26.         textSemiWeak: string;
  27.         textWeak: string;
  28.         textFaint: string;
  29.         textBlue: string;
  30.         formLabel: string;
  31.         formDescription: string;
  32.         formInputBg: string;
  33.         formInputBgDisabled: string;
  34.         formInputBorder: string;
  35.         formInputBorderHover: string;
  36.         formInputBorderActive: string;
  37.         formInputBorderInvalid: string;
  38.         formFocusOutline: string;
  39.         formInputText: string;
  40.         formInputDisabledText: string;
  41.         formInputPlaceholderText: string;
  42.         formValidationMessageText: string;
  43.         formValidationMessageBg: string;
  44.     };

isDark property

Signature

  1. isDark: boolean;

isLight property

Signature

  1. isLight: boolean;

palette property

Signature

  1. palette: {
  2.         black: string;
  3.         white: string;
  4.         dark1: string;
  5.         dark2: string;
  6.         dark3: string;
  7.         dark4: string;
  8.         dark5: string;
  9.         dark6: string;
  10.         dark7: string;
  11.         dark8: string;
  12.         dark9: string;
  13.         dark10: string;
  14.         gray1: string;
  15.         gray2: string;
  16.         gray3: string;
  17.         gray4: string;
  18.         gray5: string;
  19.         gray6: string;
  20.         gray7: string;
  21.         gray98: string;
  22.         gray97: string;
  23.         gray95: string;
  24.         gray90: string;
  25.         gray85: string;
  26.         gray70: string;
  27.         gray60: string;
  28.         gray33: string;
  29.         gray25: string;
  30.         gray15: string;
  31.         gray10: string;
  32.         gray05: string;
  33.         blue95: string;
  34.         blue85: string;
  35.         blue80: string;
  36.         blue77: string;
  37.         red88: string;
  38.         redBase: string;
  39.         redShade: string;
  40.         greenBase: string;
  41.         greenShade: string;
  42.         red: string;
  43.         yellow: string;
  44.         purple: string;
  45.         orange: string;
  46.         orangeDark: string;
  47.         queryRed: string;
  48.         queryGreen: string;
  49.         queryPurple: string;
  50.         queryOrange: string;
  51.         brandPrimary: string;
  52.         brandSuccess: string;
  53.         brandWarning: string;
  54.         brandDanger: string;
  55.         online: string;
  56.         warn: string;
  57.         critical: string;
  58.     };

shadows property

Signature

  1. shadows: {
  2.         listItem: string;
  3.     };

type property

Signature

  1. type: GrafanaThemeType;

visualization property

Signature

  1. visualization: ThemeVisualizationColors;