API Reference@grafana/data › GrafanaTheme

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;
gray95: 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;
        gray95: 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;