material-theme.js

material-theme.js

import blue from "@material-ui/core/colors/blue";
import grey from "@material-ui/core/colors/grey";
import lightGreen from "@material-ui/core/colors/lightGreen";
import { createMuiTheme } from "@material-ui/core/styles";

const background = {
  dark: {
    paper: '#282C34',
    default: '#1c2025'
  },
  light: {
    paper: 'white',
    default: '#f4f6f8',
  }
}

const theme = (type = 'dark') => {
  const breakpoints = {
    values: {
      xs: 0,
        sm: 800,
        md: 1020,
        lg: 1280,
        xl: 1700,
    },
  };
  
  const defaultTheme = createMuiTheme({
    palette: {type},
    breakpoints,
  });
  
  console.warn('defaultTheme.palette', defaultTheme.palette);
  
  return {
    palette: {
      type,
      primary: {
        main: blue[500],
      },
      secondary: {
        main: lightGreen['A700'],
      },
      background: background[type],
    },
    breakpoints,
    overrides: {
      MuiCssBaseline: {
        '@global': {
          '::-webkit-scrollbar': {
            width: 10,
            height: 10,
          },
          '::-webkit-scrollbar-track': {
            backgroundColor: type === 'dark' ? grey[600] : grey[200],
          },
          '::-webkit-scrollbar-thumb': {
            backgroundColor: type === 'dark' ? grey[300] : grey[500],
            borderRadius: 2,
          },
          [defaultTheme.breakpoints.down('xs')]: {
            '::-webkit-scrollbar': {
              width: 5,
              height: 5,
            },
          }
        },
      },
      MuiTableRow: {
        root: {
          "& td": {
            wordBreak: 'break-word',
            hyphens: 'auto',
          },
        }
      },
      MuiListItemIcon: {
        root: {
          '& > .material-icons': {
            fontSize: '1.3rem',
          }
        },
      }
    },
  }
}

export default theme