@grafana/data#GrafanaTheme TypeScript Examples

The following examples show how to use @grafana/data#GrafanaTheme. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: DateInterval.tsx From druid-grafana with Apache License 2.0

6 votes

getStyles = stylesFactory((theme: GrafanaTheme) => {
  return {
    picker: css`
      & input {
        border: 1px solid ${theme.colors.border2};
        height: 32px;
        margin-right: 4px;
      }
    `,
  };
})

Example #2

Source File: storybookTheme.ts From grafana-chinese with Apache License 2.0

6 votes

createTheme = (theme: GrafanaTheme) => {
  return create({
    base: theme.name.includes('Light') ? 'light' : 'dark',

    colorPrimary: theme.colors.brandPrimary,
    colorSecondary: theme.colors.brandPrimary,

    // UI
    appBg: theme.colors.bodyBg,
    appContentBg: theme.colors.bodyBg,
    appBorderColor: theme.colors.pageHeaderBorder,
    appBorderRadius: 4,

    // Typography
    fontBase: ThemeCommons.typography.fontFamily.sansSerif,
    fontCode: ThemeCommons.typography.fontFamily.monospace,

    // Text colors
    textColor: theme.colors.text,
    textInverseColor: 'rgba(255,255,255,0.9)',

    // Toolbar default and active colors
    barTextColor: theme.colors.formInputBorderActive,
    barSelectedColor: theme.colors.brandPrimary,
    barBg: theme.colors.bodyBg,

    // Form colors
    inputBg: theme.colors.formInputBg,
    inputBorder: theme.colors.formInputBorder,
    inputTextColor: theme.colors.formInputText,
    inputBorderRadius: 4,

    brandTitle: 'Grafana UI',
    brandUrl: '/',
    brandImage: '/grafana_icon.svg',
  });
}

Example #3

Source File: FileUploader.tsx From grafana-s3-plugin with Apache License 2.0

6 votes

getStyles = stylesFactory((theme: GrafanaTheme, size: ComponentSize) => {
  // @ts-ignore
  const buttonFormStyle = getFormStyles(theme, { invalid: false, size }).button.button;
  return {
    fileUpload: css`
      display: none;
    `,
    button: css`
      ${buttonFormStyle}
    `,
    icon: css`
      margin-right: ${theme.spacing.xs};
    `,
  };
})

Example #4

Source File: config.ts From grafana-chinese with Apache License 2.0

5 votes

theme: GrafanaTheme;