+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "GrafanaTheme"
keywords = ["grafana","documentation","sdk","@grafana/data"]
type = "docs"
draft = true
+++

## GrafanaTheme interface

<b>Signature</b>

```typescript
export interface GrafanaTheme extends GrafanaThemeCommons 
```
<b>Import</b>

```typescript
import { GrafanaTheme } from '@grafana/data';
```
<b>Properties</b>

|  Property | Type | Description |
|  --- | --- | --- |
|  [background](#background-property) | <code>{</code><br/><code>        dropdown: string;</code><br/><code>        scrollbar: string;</code><br/><code>        scrollbar2: string;</code><br/><code>        pageHeader: string;</code><br/><code>    }</code> |  |
|  [colors](#colors-property) | <code>{</code><br/><code>        black: string;</code><br/><code>        white: string;</code><br/><code>        dark1: string;</code><br/><code>        dark2: string;</code><br/><code>        dark3: string;</code><br/><code>        dark4: string;</code><br/><code>        dark5: string;</code><br/><code>        dark6: string;</code><br/><code>        dark7: string;</code><br/><code>        dark8: string;</code><br/><code>        dark9: string;</code><br/><code>        dark10: string;</code><br/><code>        gray1: string;</code><br/><code>        gray2: string;</code><br/><code>        gray3: string;</code><br/><code>        gray4: string;</code><br/><code>        gray5: string;</code><br/><code>        gray6: string;</code><br/><code>        gray7: string;</code><br/><code>        gray98: string;</code><br/><code>        gray95: string;</code><br/><code>        gray85: string;</code><br/><code>        gray70: string;</code><br/><code>        gray33: string;</code><br/><code>        gray25: string;</code><br/><code>        gray15: string;</code><br/><code>        gray10: string;</code><br/><code>        gray05: string;</code><br/><code>        blue95: string;</code><br/><code>        blue85: string;</code><br/><code>        blue77: string;</code><br/><code>        red88: string;</code><br/><code>        grayBlue: string;</code><br/><code>        inputBlack: string;</code><br/><code>        blue: string;</code><br/><code>        blueBase: string;</code><br/><code>        blueShade: string;</code><br/><code>        blueLight: string;</code><br/><code>        blueFaint: string;</code><br/><code>        redBase: string;</code><br/><code>        redShade: string;</code><br/><code>        greenBase: string;</code><br/><code>        greenShade: string;</code><br/><code>        red: string;</code><br/><code>        yellow: string;</code><br/><code>        purple: string;</code><br/><code>        variable: string;</code><br/><code>        orange: string;</code><br/><code>        orangeDark: string;</code><br/><code>        queryRed: string;</code><br/><code>        queryGreen: string;</code><br/><code>        queryPurple: string;</code><br/><code>        queryKeyword: string;</code><br/><code>        queryOrange: string;</code><br/><code>        brandPrimary: string;</code><br/><code>        brandSuccess: string;</code><br/><code>        brandWarning: string;</code><br/><code>        brandDanger: string;</code><br/><code>        online: string;</code><br/><code>        warn: string;</code><br/><code>        critical: string;</code><br/><code>        link: string;</code><br/><code>        linkDisabled: string;</code><br/><code>        linkHover: string;</code><br/><code>        linkExternal: string;</code><br/><code>        body: string;</code><br/><code>        text: string;</code><br/><code>        textStrong: string;</code><br/><code>        textWeak: string;</code><br/><code>        textFaint: string;</code><br/><code>        textEmphasis: string;</code><br/><code>        panelBg: string;</code><br/><code>        bodyBg: string;</code><br/><code>        pageBg: string;</code><br/><code>        headingColor: string;</code><br/><code>        pageHeaderBorder: string;</code><br/><code>        formLabel: string;</code><br/><code>        formDescription: string;</code><br/><code>        formLegend: string;</code><br/><code>        formInputBg: string;</code><br/><code>        formInputBgDisabled: string;</code><br/><code>        formInputBorder: string;</code><br/><code>        formInputBorderHover: string;</code><br/><code>        formInputBorderActive: string;</code><br/><code>        formInputBorderInvalid: string;</code><br/><code>        formFocusOutline: string;</code><br/><code>        formInputText: string;</code><br/><code>        formInputDisabledText: string;</code><br/><code>        formInputTextStrong: string;</code><br/><code>        formInputTextWhite: string;</code><br/><code>        formValidationMessageText: string;</code><br/><code>        formValidationMessageBg: string;</code><br/><code>        formSwitchBg: string;</code><br/><code>        formSwitchBgActive: string;</code><br/><code>        formSwitchBgActiveHover: string;</code><br/><code>        formSwitchBgHover: string;</code><br/><code>        formSwitchBgDisabled: string;</code><br/><code>        formSwitchDot: string;</code><br/><code>        formCheckboxBg: string;</code><br/><code>        formCheckboxBgChecked: string;</code><br/><code>        formCheckboxBgCheckedHover: string;</code><br/><code>        formCheckboxCheckmark: string;</code><br/><code>    }</code> |  |
|  [isDark](#isdark-property) | <code>boolean</code> |  |
|  [isLight](#islight-property) | <code>boolean</code> |  |
|  [shadow](#shadow-property) | <code>{</code><br/><code>        pageHeader: string;</code><br/><code>    }</code> |  |
|  [type](#type-property) | <code>GrafanaThemeType</code> |  |

### background property

<b>Signature</b>

```typescript
background: {
        dropdown: string;
        scrollbar: string;
        scrollbar2: string;
        pageHeader: string;
    };
```

### colors property

<b>Signature</b>

```typescript
colors: {
        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;
        gray33: string;
        gray25: string;
        gray15: string;
        gray10: string;
        gray05: string;
        blue95: string;
        blue85: string;
        blue77: string;
        red88: string;
        grayBlue: string;
        inputBlack: string;
        blue: string;
        blueBase: string;
        blueShade: string;
        blueLight: string;
        blueFaint: string;
        redBase: string;
        redShade: string;
        greenBase: string;
        greenShade: string;
        red: string;
        yellow: string;
        purple: string;
        variable: string;
        orange: string;
        orangeDark: string;
        queryRed: string;
        queryGreen: string;
        queryPurple: string;
        queryKeyword: string;
        queryOrange: string;
        brandPrimary: string;
        brandSuccess: string;
        brandWarning: string;
        brandDanger: string;
        online: string;
        warn: string;
        critical: string;
        link: string;
        linkDisabled: string;
        linkHover: string;
        linkExternal: string;
        body: string;
        text: string;
        textStrong: string;
        textWeak: string;
        textFaint: string;
        textEmphasis: string;
        panelBg: string;
        bodyBg: string;
        pageBg: string;
        headingColor: string;
        pageHeaderBorder: string;
        formLabel: string;
        formDescription: string;
        formLegend: string;
        formInputBg: string;
        formInputBgDisabled: string;
        formInputBorder: string;
        formInputBorderHover: string;
        formInputBorderActive: string;
        formInputBorderInvalid: string;
        formFocusOutline: string;
        formInputText: string;
        formInputDisabledText: string;
        formInputTextStrong: string;
        formInputTextWhite: string;
        formValidationMessageText: string;
        formValidationMessageBg: string;
        formSwitchBg: string;
        formSwitchBgActive: string;
        formSwitchBgActiveHover: string;
        formSwitchBgHover: string;
        formSwitchBgDisabled: string;
        formSwitchDot: string;
        formCheckboxBg: string;
        formCheckboxBgChecked: string;
        formCheckboxBgCheckedHover: string;
        formCheckboxCheckmark: string;
    };
```

### isDark property

<b>Signature</b>

```typescript
isDark: boolean;
```

### isLight property

<b>Signature</b>

```typescript
isLight: boolean;
```

### shadow property

<b>Signature</b>

```typescript
shadow: {
        pageHeader: string;
    };
```

### type property

<b>Signature</b>

```typescript
type: GrafanaThemeType;
```