mui-theme

Reusable MUI (Material UI) themes: dark (muted rose-gold, dusty mauve, warm charcoal) and light (warm coral-pink, lavender-blue).

Compatibility

Tested with Material UI v9. Peer dependencies also allow MUI v5, v6, and v7 (there is no Material UI v8).

npm install @grantler-instruments/mui-theme @mui/material@9 @emotion/react @emotion/styled

The included example app runs on MUI v9.

Install

From npm (recommended):

npm install @grantler-instruments/mui-theme @mui/material@9 @emotion/react @emotion/styled

From GitHub (same scoped package name, use any of these):

npm install github:grantler-instruments/muiTheme @mui/material @emotion/react @emotion/styled

Or with SSH:

npm install git+ssh://[email protected]:grantler-instruments/muiTheme.git @mui/material @emotion/react @emotion/styled

Your app must also have @mui/material, @emotion/react, and @emotion/styled installed (they are peer dependencies). If you only add mui-theme, install them:

npm install @mui/material@9 @emotion/react @emotion/styled

If you see Operation not permitted on .git/hooks/ (e.g. in Cursor’s sandbox): run npm install in a normal terminal, or install from a tarball so npm doesn’t clone via git:

npm install https://github.com/grantler-instruments/muiTheme/archive/refs/heads/main.tar.gz

(Use main or your branch name in the URL.) In all cases you still import from @grantler-instruments/mui-theme.

Usage

import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import { darkTheme, lightTheme } from "@grantler-instruments/mui-theme";

// Dark theme
<ThemeProvider theme={darkTheme}>
  <CssBaseline />
  <App />
</ThemeProvider>

// Light theme
<ThemeProvider theme={lightTheme}>
  <CssBaseline />
  <App />
</ThemeProvider>

// Toggle by preference (e.g. from state or system)
const theme = prefersDark ? darkTheme : lightTheme;
<ThemeProvider theme={theme}>
  <CssBaseline />
  <App />
</ThemeProvider>

Exports

• darkTheme – Dark palette: muted rose-gold primary, dusty mauve secondary, warm charcoal backgrounds.
• lightTheme – Light palette: warm coral-pink primary, lavender-blue secondary, soft backgrounds.
• Knob – MUI-themed rotary control (drag, wheel, keyboard).
• WorkInProgressBanner – Corner ribbon banner.

Example (MUI v9)

cd example
npm install
npm run dev

License

MIT