@material-ui/core#createMuiTheme TypeScript Examples

signerTheme = createMuiTheme({
  palette: {
    primary: {
      light: '#4791db',
      main: '#1976d2',
      dark: '#115293'
    },
    secondary: {
      light: '#e33371',
      main: '#dc004e',
      dark: '#9a0036'
    },
    error: {
      light: '#e57373',
      main: '#f44336',
      dark: '#d32f2f'
    },
    warning: {
      light: '#ffb74d',
      main: '#ff9800',
      dark: '#f57c00'
    },
    info: {
      light: '#64b5f6',
      main: '#2196f3',
      dark: '#1976d2'
    },
    success: {
      light: '#81c784',
      main: '#4caf50',
      dark: '#388e3c'
    }
  }
})

darkTheme = merge(
  cloneDeep(
    createMuiTheme({
      palette: {
        mode: 'dark',
        background: {
          default: '#212121',
        },
        text: { primary: 'rgba(255, 255, 255, 0.87)', secondary: 'rgba(255, 255, 255, 0.6)', disabled: 'rgba(255, 255, 255, 0.35)' },
      },
    }),
  ),
) as Theme

theme = createMuiTheme({
  palette: {
    primary: {
      main: '#e60278',
    },
    secondary: {
      main: '#0d3880',
    },
    error: {
      main: '#9556b7',
    },
  },
})

export function GUIContextProvider({ children }: GUIContextProviderProps): React.ReactElement {
  const [drawer, setDrawer] = useLocalStorage('storageDrawer');
  const [isBridged, setBridged] = useState(true);
  const [action, setAction] = useState<TransactionTypes>(TransactionTypes.TRANSFER);

  const value = { drawer, setDrawer, actions, action, setAction, isBridged, setBridged };

  useEffect(() => setBridged(true), [action]);

  return (
    <ThemeProvider theme={createMuiTheme(light)}>
      <CssBaseline />
      <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>
    </ThemeProvider>
  );
}

theme = createMuiTheme({
  palette: {
    primary: {
      light: '#676767',
      main: '#222222',
      dark: '#222222',
      contrastText: '#FFFFFF',
    },
    secondary: {
      light: '#5097AB',
      main: '#00677F',
      dark: '#003340',
      contrastText: '#FFFFFF',
    },
  },
})

theme = createMuiTheme({
	palette: {
		primary: {
			light: '#5593e6',
			main: '#0066B3',
			dark: '#003c83',
			contrastText: '#fff',
		},
		secondary: {
			light: '#ff983f',
			main: '#FF6600',
			dark: '#c43300',
			contrastText: '#fff',
		},
	},
	typography: {
		fontSize: scale(14, 11, 14),
	},
})

theme = createMuiTheme({
  palette: {
    primary: {
      main: '#07648D'
    },
    secondary: {
      main: '#28A0CB'
    },
    background: {
      default: '#EFF1F5'
    }
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1330,
      xl: 1920
    }
  }
})

theme = createMuiTheme({
  palette: {
    primary: {
      main: "#556cd6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  },
})

theme = createMuiTheme({
  palette: {
    primary: {
      main: '#fea201',
    },
    secondary: {
      main: '#3686FF',
    },
  },
})

export default function ThemeProvider({ children }: any) {

  const [name, setName] = useState<'dark' | 'light'>(defaultTheme?.length ? defaultTheme : 'dark');
  const theme = useMemo(() => createMuiTheme({
    palette: {
      type: name
    }
  }), [name]);

  const onChange = useCallback(() => {
    setName(prevName => prevName === 'dark' ? 'light' : 'dark')
  }, []);

  useEffect(() => {
    if (name?.length) {
      // Use indexed-db in the future for async storage.
      localStorage.setItem(storageName, name)
    }
  }, [name]);

  return <ThemeContext.Provider value={{ name, onChange }}>
    <MuiThemeProvider theme={theme}>
      {children}
    </MuiThemeProvider>
  </ThemeContext.Provider>
}

theme = createMuiTheme({})

provide(): Theme {
        return createMuiTheme({ ...this.themeOptions2, ...this.themeOptions });
    }

constructor(props) {
    super(props);

    this.theme = createMuiTheme({
      palette: {
        // type: 'dark',
        background: {
          // This is a very contested line, whether to have this white or transparent...
          // Transparent is useful in PostStatus that allows transparency through an IFrame
          // Everywhere else, it's more useful to have a solid color in order to cover up shadows and other things.
          default: windowIso.location?.pathname.startsWith('/embed-status')
            ? 'rgba(255,255,255,0)'
            : '#fff',
          paper: '#fff',
        },
        primary: {
          main: '#218774',
        },
        secondary: {
          main: '#2dbaa1',
        },
      },
      typography: {
        /* If changed, change in index.html, AppThemeProvider.tsx */
        fontFamily: 'Inter, -apple-system-body, BlinkMacSystemFont, SFUI, HelveticaNeue, Helvetica, Arial, sans-serif',
        fontSize: 14,
      },
      overrides: {
        MuiAppBar: {
          colorDefault: {
            backgroundColor: '#fff',
          },
        },
      },
      props: {
        ...ComponentPropsOverrides,
      },
      vh,
    });

    trackingBlock(() => {
      try {
        ReactGA.initialize('UA-127162051-3', {
          gaOptions: {}
        });
        ReactGA.set({
          anonymizeIp: true,
          forceSSL: true
        });
        ReactGA.pageview(windowIso.location.pathname + windowIso.location.search);
        LinkedInTag.init('3564876', 'dc', false);
      } catch (e) { }
    });
  }

theme = createMuiTheme({
  palette: {
    primary: { main: teal[500] },
    secondary: { main: yellow[600] },
  },
})

defaultTheme = createMuiTheme()

Theme = createMuiTheme({
  palette: {
    primary: {
      main: '#607d8b',
    },
    secondary: {
      main: '#d32f2f',
    },
    text: {
      primary: 'rgba(0,0,0,0.87)',
      secondary: 'rgba(0,0,0,0.76)',
    },
  },
  overrides: {
    MuiTab: {
      wrapper: {
        color: 'rgba(0,0,0,0.54)',
        '&$selected': {
          color: '#607d8b',
        },
      },
    },
  },
  /*
  custom: {
    button: {
      bgColor: {
        main: '#313131',
        hover: '#616161',
      },
      color: {
        menu: '#1bb76e',
        upload: '#1bb76e',
        delete: '#ff5d5a',
        locate: '#ffca31',

        mapControl: '#555',
      },
    },
  },
  */
})

theme = createMuiTheme({
  palette: {
    secondary: {
      main: "#fff",
    },
  },
})

export default function ({
    children,
    location,
}: {
    children: NonNullable<React.ReactNode>
    location: any
}): React.ReactElement {
    const [theme, setTheme] = useState<'light' | 'dark'>('light')
    const path: string = location.pathname

    useEffect(() => {
        if (isTouchDevice()) document.documentElement.classList.add('touch')
    }, [])

    const muiTheme = createMuiTheme({
        palette: {
            type: theme,
            primary:
                theme === 'dark'
                    ? {
                          main: blue[300],
                      }
                    : undefined,
            secondary: {
                main: blue[800],
            },
        },
    })

    const isDesktop = useMediaQuery(muiTheme.breakpoints.up('sm'))

    return (
        <>
            <Helmet
                titleTemplate="%s | TL Reference"
                defaultTitle="TL Reference"
            />
            <MuiThemeProvider theme={muiTheme}>
                <>
                    <AppBar position="static" color="secondary">
                        <Toolbar>
                            {isDesktop ? (
                                <DesktopNavigation path={path} />
                            ) : (
                                <MobileNavigation path={path} />
                            )}
                            <GlobalSearchField isMobile={!isDesktop} />
                            <Tooltip title="Toggle dark theme">
                                <IconButton
                                    color="inherit"
                                    onClick={() =>
                                        setTheme(
                                            theme === 'dark' ? 'light' : 'dark'
                                        )
                                    }
                                >
                                    {theme === 'light' ? (
                                        <NightsStayIcon />
                                    ) : (
                                        <Brightness7Icon />
                                    )}
                                </IconButton>
                            </Tooltip>
                        </Toolbar>
                    </AppBar>
                    {children}
                </>
            </MuiThemeProvider>
        </>
    )
}

function App() {
    const dispatch = useDispatch();
    const theme = createMuiTheme({
        palette: {
            type: "dark"
        }
    });

    useEffect(() => {
        dispatch(normalizeConversations());
    });

    useHotkeys('ctrl+enter,cmd+enter', () => {
        dispatch(fetchForCurrentTab());
    }, {filter: () => true});
    useHotkeys('ctrl+1', () => {
        dispatch(updateTabIndex(0));
    });
    useHotkeys('ctrl+2', () => {
        dispatch(updateTabIndex(1));
    });
    useHotkeys('ctrl+3', () => {
        dispatch(updateTabIndex(2));
    });
    useHotkeys('ctrl+4', () => {
        dispatch(updateTabIndex(3));
    });

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline/>

            <ApiKeyDialog/>
            <TemplateDialog/>

            <Header/>

            <Container maxWidth={"lg"}>
                <Box mt={2}>
                    <PromptEditor/>
                </Box>
                {/*<Box mt={2}>
                    <ModeTabs/>
                </Box>*/}
                <Box mt={2}>
                    <Typography>
                        Not affiliated with OpenAI. Feedback: [email protected].</Typography>
                </Box>
            </Container>
        </ThemeProvider>
    );
}

lightTheme = merge(cloneDeep(createMuiTheme())) as Theme

constructor({ name, muiThemeOptions }: CrossnoteThemeProps) {
    this.name = name;
    this.muiTheme = createMuiTheme(muiThemeOptions);
  }

render() {
    var expressionGrayscale: number | undefined = undefined;
    switch (this.props.config && this.props.config.style.palette.expressionColor) {
      case Client.PaletteExpressionColorEnum.Gray:
        expressionGrayscale = 100;
        break;
      case Client.PaletteExpressionColorEnum.Washed:
        expressionGrayscale = 50;
        break;
    }
    var breakpoints;
    if (this.props.forceBreakpoint) {
      breakpoints = {};
      var bpSeen;
      ['xs', 'sm', 'md', 'lg', 'xl'].forEach(bp => {
        breakpoints[bp] = !bpSeen ? 0 : 10000;
        if (!bpSeen && bp === this.props.forceBreakpoint) {
          bpSeen = true;
        };
      })
    }
    var theme: Theme | undefined;
    if (this.props.config) {
      theme = createMuiTheme({
        disableTransitions: !this.props.config.style.animation.enableTransitions,
        funding: this.props.config.style.palette.funding
          || this.props.config.style.palette.primary,
        // Optional green color
        // || ( this.props.config.style.palette.darkMode ? '#6ca869' : '#89c586' ),
        isInsideContainer: !!this.props.isInsideContainer,
        expressionGrayscale: expressionGrayscale,
        explorerExpandTimeout: 500,
        vh,
        palette: {
          type: this.props.config.style.palette.darkMode ? 'dark' : 'light',
          primary: {
            main: this.props.config.style.palette.primary
              || (this.props.config.style.palette.darkMode ? '#2dbaa1' : '#218774'),
          },
          secondary: {
            main: this.props.config.style.palette.primary
              || (this.props.config.style.palette.darkMode ? '#2dbaa1' : '#218774'),
          },
          ...(this.props.config.style.palette.text ? {
            text: {
              primary: this.props.config.style.palette.text,
            }
          } : {}),
          background: {
            ...(this.props.config.style.palette.background ? { default: this.props.config.style.palette.background } : {}),
            ...(this.props.config.style.palette.backgroundPaper ? { paper: this.props.config.style.palette.backgroundPaper } : {}),
          },
        },
        typography: {
          // TODO sanitize input, currently you can inject custom css with "; inject: me"
          /* If changed, change in index.html, Main.tsx */
          fontFamily: this.props.config.style.typography.fontFamily || '"Inter", -apple-system-body, BlinkMacSystemFont, SFUI, HelveticaNeue, Helvetica, Arial, sans-serif',
          fontSize: this.props.config.style.typography.fontSize || 14,
        },
        transitions: {
          ...(this.props.config.style.animation.enableTransitions ? {} : {
            create: () => 'none',
            duration: {
              shortest: 0,
              shorter: 0,
              short: 0,
              standard: 0,
              complex: 0,
              enteringScreen: 0,
              leavingScreen: 0,
            },
          }),
        },
        breakpoints: {
          ...(breakpoints ? {
            values: breakpoints,
          } : {}),
        },
        props: {
          ...ComponentPropsOverrides,
          MuiDialog: {
            ...(!windowIso.isSsr ? {
              container: () => document.getElementById(this.props.appRootId)!,
            } : {}),
            ...(this.props.isInsideContainer ? {
              style: { position: 'absolute' },
              BackdropProps: { style: { position: 'absolute' } },
            } : {}),
          },
          MuiButtonBase: {
            ...(!this.props.config.style.animation.enableTransitions ? {
              disableRipple: true,
            } : {}),
          },
        },
      })
    } else {
      theme = createMuiTheme();
    }

    return (
      <StylesProvider injectFirst>
        <MuiThemeProvider theme={theme}>
          {!this.props.supressCssBaseline && (<CssBaseline />)}
          <div style={{
            height: '100%',
            ...(this.props.containerStyle?.(theme) || {}),
            background: theme.palette.background.default,
            color: theme.palette.text.primary,
          }}>
            {this.props.children}
          </div>
        </MuiThemeProvider>
      </StylesProvider>
    );
  }

DxcDateInput = React.forwardRef<RefType, DateInputPropsType>(
  (
    {
      label,
      name,
      defaultValue = "",
      value,
      format = "dd-MM-yyyy",
      helperText,
      placeholder = false,
      clearable,
      disabled,
      optional,
      onChange,
      onBlur,
      error,
      autocomplete,
      margin,
      size,
      tabIndex,
    },
    ref
  ) => {
    const [innerValue, setInnerValue] = useState(defaultValue);
    const [isOpen, setIsOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);

    const colorsTheme = useTheme();
    const translatedLabels = useTranslatedLabels();
    const refDate = ref || useRef(null);

    const handleCalendarOnKeyDown = (event) => {
      switch (event.keyCode) {
        case 27: // Esc
          event.preventDefault();
          setIsOpen(false);
          break;
      }
    };
    const handleCalendarOnClick = (newDate) => {
      const newValue = dayjs(newDate).format(format.toUpperCase());
      value ?? setInnerValue(newValue);
      newDate?.toJSON()
        ? onChange?.({
            value: newValue,
            date: newDate,
          })
        : onChange?.({
            value: newValue,
          });
    };
    const handleIOnChange = ({ value: newValue, error: inputError }) => {
      value ?? setInnerValue(newValue);
      const dayjsDate = dayjs(newValue, format.toUpperCase(), true);
      const invalidDateMessage =
        newValue !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
      const callbackParams =
        inputError || invalidDateMessage
          ? { value: newValue, error: inputError || invalidDateMessage }
          : { value: newValue };
      dayjsDate.isValid()
        ? onChange?.({
            ...callbackParams,
            date: dayjsDate.toDate(),
          })
        : onChange?.(callbackParams);
    };
    const handleIOnBlur = ({ value, error: inputError }) => {
      const dayjsDate = dayjs(value, format.toUpperCase(), true);
      const invalidDateMessage =
        value !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
      const callbackParams =
        inputError || invalidDateMessage ? { value, error: inputError || invalidDateMessage } : { value };
      dayjsDate.isValid()
        ? onBlur?.({
            ...callbackParams,
            date: dayjsDate.toDate(),
          })
        : onBlur?.(callbackParams);
    };

    const openCalendar = () => {
      const dateBtn = refDate.current.getElementsByTagName("button")[0];
      setIsOpen(!isOpen);
      setAnchorEl(dateBtn);
    };
    const closeCalendar = () => {
      setIsOpen(false);
    };

    const calendarAction = {
      onClick: openCalendar,
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
          <path d="M0 0h24v24H0z" fill="none" />
          <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
        </svg>
      ),
    };

    const dateTheme = createMuiTheme({
      overrides: {
        MuiTypography: {
          root: {
            fontFamily: `${colorsTheme.dateInput.pickerFontFamily} !important`,
          },
        },
        MuiPickersYearSelection: {
          container: {
            color: colorsTheme.dateInput.pickerYearFontColor,
            "&::-webkit-scrollbar": {
              width: "3px",
            },

            "&::-webkit-scrollbar-track": {
              backgroundColor: "#D9D9D9",
              borderRadius: "3px",
            },

            "&::-webkit-scrollbar-thumb": {
              backgroundColor: "#666666",
              borderRadius: "3px",
            },
          },
        },
        MuiPickersToolbar: {
          toolbar: {
            backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
            color: colorsTheme.dateInput.pickerDayFontColor,
          },
        },
        MuiIconButton: {
          root: {
            height: "36px",
            width: "36px",
            padding: "0px",
          },
        },
        MuiTouchRipple: {
          child: {
            opacity: "0",
          },
        },
        MuiButtonBase: {
          root: {
            "&:focus": {
              outline: colorsTheme.dateInput.pickerFocusColor + " solid 2px",
            },
          },
        },
        MuiPickersBasePicker: {
          pickerView: {
            minWidth: "unset",
            maxWidth: "unset",
            minHeight: "unset",
            padding: "0px 10px",
            height: colorsTheme.dateInput.pickerHeight,
            width: colorsTheme.dateInput.pickerWidth,
            backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
            fontFamily: colorsTheme.dateInput.pickerFontFamily,
          },
        },
        MuiPickersToolbarText: {
          toolbarTxt: {
            color: colorsTheme.dateInput.pickerActualDateFontColor,
            fontFamily: colorsTheme.dateInput.pickerFontFamily,
            fontSize: "2rem",
          },
          toolbarBtnSelected: {
            color: colorsTheme.dateInput.pickerActualDateFontColor,
          },
        },
        MuiPickersCalendarHeader: {
          transitionContainer: {
            color: colorsTheme.dateInput.pickerMonthFontColor,
          },
          dayLabel: {
            color: colorsTheme.dateInput.pickerWeekFontColor,
            fontFamily: colorsTheme.dateInput.pickerFontFamily,
          },
          switchHeader: {
            backgroundColor: "#ffffff",
            color: colorsTheme.dateInput.pickerDayFontColor,
          },
          iconButton: {
            backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
            "&:hover": {
              backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
            },
          },
        },
        MuiPickersCalendar: {
          week: {
            marginBottom: "2px",
          },
        },
        MuiPickersDay: {
          current: {
            color: colorsTheme.dateInput.pickerDayFontColor,
          },
          day: {
            fontFamily: colorsTheme.dateInput.pickerFontFamily,
            color: colorsTheme.dateInput.pickerDayFontColor,
            "&:hover": {
              backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
              color: colorsTheme.dateInput.pickerHoverDateFontColor,
            },
          },
          daySelected: {
            backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
            color: colorsTheme.dateInput.pickerSelectedDateColor,
            "&:hover": {
              backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
              color: colorsTheme.dateInput.pickerSelectedDateColor,
              opacity: "1",
            },
          },
        },
        MuiPickersYear: {
          yearSelected: {
            color: colorsTheme.dateInput.pickerSelectedDateColor,
            backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
            margin: "0px 100px",
            borderRadius: "20px",
          },
          root: {
            "&:focus": {
              color: colorsTheme.dateInput.pickerHoverDateFontColor,
              backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
            },
          },
        },
        MuiPickersModal: {
          dialogAction: {
            color: "pink",
          },
        },
      },
    });

    return (
      <ThemeProvider theme={colorsTheme}>
        <MuiThemeProvider theme={dateTheme}>
          <MuiPickersUtilsProvider utils={DayjsUtils}>
            <StyledDPicker>
              <DxcTextInput
                label={label}
                name={name}
                defaultValue={defaultValue}
                value={value ?? innerValue}
                helperText={helperText}
                placeholder={placeholder ? format.toUpperCase() : null}
                action={calendarAction}
                clearable={clearable}
                disabled={disabled}
                optional={optional}
                onChange={handleIOnChange}
                onBlur={handleIOnBlur}
                error={error}
                autocomplete={autocomplete}
                margin={margin}
                size={size}
                tabIndex={tabIndex}
                ref={refDate}
              />
              <Popover
                onKeyDown={handleCalendarOnKeyDown}
                open={isOpen}
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: "bottom",
                  horizontal: "left",
                }}
                transformOrigin={{
                  vertical: "top",
                  horizontal: "center",
                }}
                PaperProps={{
                  style: {
                    marginTop: "10px",
                  },
                }}
              >
                <ClickAwayListener onClickAway={closeCalendar}>
                  <Paper role="dialog" aria-modal="true">
                    <DatePicker
                      variant="static"
                      value={getValueForPicker(value ?? innerValue, format)}
                      onChange={(date) => handleCalendarOnClick(date)}
                      format={format}
                      disabled={disabled}
                    />
                  </Paper>
                </ClickAwayListener>
              </Popover>
            </StyledDPicker>
          </MuiPickersUtilsProvider>
        </MuiThemeProvider>
      </ThemeProvider>
    );
  }
)