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 |
|
v2 | GrafanaThemeV2 |
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;
v2 property
Signature
v2: GrafanaThemeV2;
Related Grafana video resources
Getting started with Grafana
Take a guided tour of Grafana and learn how to monitor a web service using Prometheus and Loki in this beginner-friendly webinar.
All about Grafana plugins: Visualizing disparate data sources in one place
Grafana Enterprise plugins are integrations with other commercial monitoring tools (such as Datadog, Splunk, New Relic, ServiceNow, Oracle, and Dynatrace) that are created, maintained, and supported by the Grafana Labs team.
Demo: 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.