Honeycomb MUI theme

This package contains a Material UI theme that implements Redgate's design system, Honeycomb.

Installation

npm

npm install @redgate/honeycomb-mui-theme

yarn

yarn add @redgate/honeycomb-mui-theme

Usage

The theme comes in two parts, lightTheme and darkTheme. Ideally, you should provide the user of your application the capability to switch between themes. You should manage which theme is active via React state or similar.

Whichever theme is active, you need to initialise it using createTheme before it can be used. The theme can then be applied to your application using the ThemeProvider component.

This component must be a parent to all areas of the application you wish to theme. Therefore, we suggest using the ThemeProvider near the root of the component hierarchy.

In greenfield projects, we suggest using the CssBaseline component to normalize cross-browser inconsistencies. You may not wish to do this if you are already using another set of base styles (such as Tailwind Preflight).

import { createRoot } from "react-dom/client";
import { FunctionComponent, StrictMode, useState } from "react";
import { darkTheme, lightTheme } from "@redgate/honeycomb-mui-theme";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

const App: FunctionComponent = () => {
  const [mode, setMode] = useState<"light" | "dark">("light");
  const activeTheme = createTheme(mode === "light" ? lightTheme : darkTheme);

  return (
    <ThemeProvider theme={activeTheme}>
      <CssBaseline />
      {/* Your application here */}
    </ThemeProvider>
  );
};

createRoot(document.getElementById("root") as HTMLElement).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Customization

It is possible to customize the themes using provided function customiseThemes. It takes a ThemeOptions, which will be applied on top of the existing customisations to MUI the base theme applies.

import { createRoot } from "react-dom/client";
import { FunctionComponent, StrictMode, useState } from "react";
import { colors, customizeThemes } from "@redgate/honeycomb-mui-theme";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

// if your product's htmlFontSize is different from the default 16px
const htmlFontSize = 14;

const App: FunctionComponent = () => {
  const [mode, setMode] = useState<"light" | "dark">("light");

  const customizations = { palette: { primary: { main: colors.red[6] } } };

  const { darkTheme, lightTheme } = customizeThemes({
    generalCustomizations: customisations,
    htmlFontSize,
  });

  const activeTheme = createTheme(mode === "light" ? lightTheme : darkTheme);

  return (
    <ThemeProvider theme={activeTheme}>
      <CssBaseline />
      {/* Your application here */}
    </ThemeProvider>
  );
};

createRoot(document.getElementById("root") as HTMLElement).render(
  <StrictMode>
    <App />
  </StrictMode>,
);