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; } |
|
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 |
|
visualization | ThemeVisualizationColors |
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;
};
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;
visualization property
Signature
visualization: ThemeVisualizationColors;
Related Grafana resources
Opening keynote: What's new in Grafana 9?
Raj Dutt, Myrle Krantz, and Torkel Ödegaard unveil what's new in Grafana 9. Watch the opening keynote presentation from GrafanaCONline 2022. On-demand.
Unify your data with Grafana plugins: Splunk, MongoDB, Datadog, and more
Show how Grafana can be used to take data from multiple different sources and unify it, without disrupting the investments that are working today.
Getting started with Grafana Enterprise and observability
Join the Grafana Labs team for a 30-minute demo of how to get started with the Grafana Stack, so you can go from zero to observability in just a few minutes.