Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.
GrafanaTheme interface
Signature
export interface GrafanaTheme extends GrafanaThemeCommons
Import
import { GrafanaTheme } from '@grafana/data';
Properties
Property | Type | Description |
---|---|---|
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; formSwitchBg: string; formSwitchBgActive: string; formSwitchBgActiveHover: string; formSwitchBgHover: string; formSwitchBgDisabled: string; formSwitchDot: string; formCheckboxBgChecked: string; formCheckboxBgCheckedHover: string; formCheckboxCheckmark: string; } | |
isDark | boolean | |
isLight | boolean | |
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; } | |
type | GrafanaThemeType |
colors property
Signature
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;
formSwitchBg: string;
formSwitchBgActive: string;
formSwitchBgActiveHover: string;
formSwitchBgHover: string;
formSwitchBgDisabled: string;
formSwitchDot: string;
formCheckboxBgChecked: string;
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
};
isDark property
Signature
isDark: boolean;
isLight property
Signature
isLight: boolean;
palette property
Signature
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 property
Signature
shadows: {
listItem: string;
};
type property
Signature
type: GrafanaThemeType;