src/common/custom-theme.ts

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import { createMuiTheme } from '@material-ui/core/styles';
   6 import { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
   7 import purple from '@material-ui/core/colors/purple';
   8 import blue from '@material-ui/core/colors/blue';
   9 import grey from '@material-ui/core/colors/grey';
  10 import green from '@material-ui/core/colors/green';
  11 import yellow from '@material-ui/core/colors/yellow';
  12 import red from '@material-ui/core/colors/red';
  13
  14 interface ArvadosThemeOptions extends ThemeOptions {
  15     customs: any;
  16 }
  17
  18 export interface ArvadosTheme extends Theme {
  19     customs: any;
  20 }
  21
  22 const red900 = red["900"];
  23 const yellow700 = yellow["700"];
  24 const purple800 = purple["800"];
  25 const grey200 = grey["200"];
  26 const grey300 = grey["300"];
  27 const grey500 = grey["500"];
  28 const grey600 = grey["600"];
  29 const grey700 = grey["700"];
  30 const grey900 = grey["900"];
  31
  32 const themeOptions: ArvadosThemeOptions = {
  33     customs: {
  34         colors: {
  35             green700: green["700"]
  36         }
  37     },
  38     overrides: {
  39         MuiTypography: {
  40             body1: {
  41                 fontSize: '0.8125rem'
  42             }
  43         },
  44         MuiAppBar: {
  45             colorPrimary: {
  46                 backgroundColor: purple800
  47             }
  48         },
  49         MuiTabs: {
  50             root: {
  51                 color: grey600
  52             },
  53             indicator: {
  54                 backgroundColor: purple800
  55             }
  56         },
  57         MuiTab: {
  58             selected: {
  59                 fontWeight: 700,
  60                 color: purple800
  61             }
  62         },
  63         MuiList: {
  64             root: {
  65                 color: grey900
  66             }
  67         },
  68         MuiListItemText: {
  69             root: {
  70                 padding: 0
  71             }
  72         },
  73         MuiListItemIcon: {
  74             root: {
  75                 fontSize: '1.25rem'
  76             }
  77         }
  78     },
  79     mixins: {
  80         toolbar: {
  81             minHeight: '48px'
  82         }
  83     },
  84     palette: {
  85         primary: {
  86             main: '#06C',
  87             dark: blue.A100
  88         }
  89     }
  90 };
  91
  92 export const CustomTheme = createMuiTheme(themeOptions);