mui-x/docs/data/date-pickers/custom-components/getDensePickerTheme.ts at 87c7df13f2bea8aba0b5a87582cc2f0611e51da9 · mui/mui-x · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
'use client';
import { ThemeOptions } from '@mui/material/styles';
import type {} from '@mui/x-data-grid/themeAugmentation';

export const gray = {
  50: 'hsl(220, 60%, 99%)',
  100: 'hsl(220, 35%, 94%)',
  200: 'hsl(220, 35%, 88%)',
  300: 'hsl(220, 25%, 80%)',
  400: 'hsl(220, 20%, 65%)',
  500: 'hsl(220, 20%, 42%)',
  600: 'hsl(220, 25%, 35%)',
  700: 'hsl(220, 25%, 25%)',
  800: 'hsl(220, 25%, 10%)',
  900: 'hsl(220, 30%, 5%)',
};

type PaletteMode = 'light' | 'dark';

export const getDensePickerTheme = (mode: PaletteMode): ThemeOptions => ({
  palette: {
    mode,

    primary: {
      light: 'hsl(240, 83%, 88%)',
      main: 'hsl(240, 83%, 65%)',
      dark: 'hsl(240, 78%, 43%)',
      contrastText: '#fff',
      ...(mode === 'dark' && {
        contrastText: 'hsl(240, 82%, 97%)',
        light: 'hsl(240, 83%, 80%)',
        main: 'hsl(240, 83%, 70%)',
        dark: 'hsl(240, 78%, 35%)',
      }),
    },
  },
  typography: {
    fontFamily: ['"Inter", "sans-serif"'].join(','),
    fontSize: 13,
  },
  components: {
    MuiDateRangePickerDay: {
      styleOverrides: {
        root: {
          '--PickerDay-horizontalMargin': '8px',
          '--PickerDay-size': '24px',
          borderRadius: '4px',
        },
        insidePreviewing: {
          '::after': {
            borderColor: 'transparent',
            backgroundColor: gray[200],
            opacity: 0.2,
            ...(mode === 'dark' && {
              backgroundColor: gray[600],
            }),
          },
        },
        previewStart: {
          '::after': {
            borderColor: 'transparent',
            backgroundColor: gray[200],
            opacity: 0.2,
            ...(mode === 'dark' && {
              backgroundColor: gray[600],
            }),
          },
        },
        previewEnd: {
          '::after': {
            borderColor: 'transparent',
            backgroundColor: gray[200],
            opacity: 0.2,
            ...(mode === 'dark' && {
              backgroundColor: gray[600],
            }),
          },
        },
      },
    },
  },
});