MUI Theme Collection


A collection of popular color scheme presets for Material-UI (MUI) including Dracula, Solarized, Nord, Monokai, and GitHub Dark. Seamlessly integrate beautiful, battle-tested themes into your React applications.

🎨 Available Themes

- Afterglow: A warm, retro-inspired dark theme with earthy tones.
- Atom One Dark: A dark theme based on the Atom editor's One Dark syntax theme.
- Ayu Light: The light variant of the Ayu theme with warm, earthy tones.
- Ayu Mirage: A dark theme from the Ayu color scheme family.
- Base16 Ocean: A refined dark theme from the Base16 collection with oceanic blue tones.
- Catppuccin Latte: A light theme from the Catppuccin color scheme family.
- Catppuccin Macchiato: A balanced dark variant of the Catppuccin theme with warm, comforting colors.
- Catppuccin Mocha: The darkest and richest variant of the Catppuccin theme with deep, warm colors.
- Cobalt2: A vibrant dark theme with striking blue and yellow accents.
- Darkula: IntelliJ IDEA's classic dark theme with deep blues and careful contrast ratios.
- Dracula: A dark theme with vibrant purple and pink accents.
- Dracula Soft: A softer, more muted version of the classic Dracula theme with reduced contrast.
- Everforest: A green-based warm theme inspired by lush forests and natural environments.
- GitHub Dark: A theme that mimics the GitHub Dark color scheme.
- GitHub Light: The light counterpart to GitHub Dark, providing a clean light interface.
- Gotham: A sophisticated dark theme with teal and purple accents for optimal readability.
- Gruvbox: A retro-inspired theme with a warm, cozy feel.
- Gruvbox Material: An enhanced Gruvbox theme with material design influences and improved contrast.
- High Contrast Dark: A high contrast dark theme designed for maximum accessibility and readability.
- High Contrast Light: A high contrast light theme designed for maximum accessibility and readability.
- Kanagawa Dragon: A sophisticated theme inspired by Japanese art, featuring dragon motifs and elegant color palettes.
- Kanagawa Wave: Ocean wave inspired colors with flowing, aquatic aesthetics.
- Material Light: Google's Material Design Light theme with clean surfaces and subtle shadows.
- Material Oceanic: A dark theme inspired by the Material Design color palette.
- Monokai: A classic high-contrast dark theme.
- Monokai Dimmed: A softer, more subdued version of the classic Monokai theme with reduced contrast.
- Night Owl: A dark theme for those who love to code at night.
- Nord: A clean and elegant theme with a cool, arctic-inspired color palette.
- Nord Polar Night: The darker, more intense variant of the Nord theme with deeper blues and stronger contrasts.
- Oceanic Next: A beautiful ocean-inspired color scheme with deep blues and vibrant accents.
- One Dark Pro: A popular dark theme for VS Code.
- One Light: A clean and minimal light theme with soft, neutral colors.
- Palenight: A dark Material Design theme with soothing blue-gray tones.
- Panda Syntax: A colorful and vibrant theme with high contrast and playful colors.
- Quiet Light: A subtle and calming light theme with gentle colors and excellent readability.
- Rose Pine: A warm and cozy dark theme inspired by pine forests and roses.
- Rose Pine Moon: A cooler, moonlit variant of Rose Pine with softer, more ethereal colors.
- Shades of Purple: A professional theme with a vibrant, purple-based color palette.
- Solarized Dark: A dark theme based on the popular Solarized color palette.
- Solarized Light: A light theme based on the popular Solarized color palette.
- Synthwave '84: A retro-futuristic theme inspired by the 80s.
- Tokyo Night Light: A light variant of the Tokyo Night theme with soft city-inspired colors.
- Tokyo Night Storm: A dark theme inspired by the city lights of Tokyo at night.
- Tomorrow Night: A classic dark theme with balanced contrast and comfortable colors.
- VS Code Dark: Microsoft's default dark theme for VS Code, featuring a clean and professional interface.
- VS Code Light: The light counterpart to VS Code Dark, providing a clean light interface.

📦 Installation

``bash
npm install mui-theme-collection
`

or

`bash
yarn add mui-theme-collection
`

🚀 Usage

$3

`jsx
import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { dracula } from 'mui-theme-collection';

function App() {
// Access the theme options from the .theme property
const theme = createTheme(dracula.theme);

return (


{/ Your app components /}

);
}

export default App;
`

$3

`jsx
import { dracula, solarizedDark, nord } from 'mui-theme-collection';
`

$3

`jsx
import { allThemes } from 'mui-theme-collection';

// Access themes by key and get the theme options from the .theme property
const theme = createTheme(allThemes.dracula.theme);
`

$3

`jsx
import React, { useState, useMemo } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { CssBaseline, Button, Box } from '@mui/material';
import { dracula, solarizedDark, nord, monokai } from 'mui-theme-collection';

function App() {
const [currentTheme, setCurrentTheme] = useState('dracula');

const themes = {
dracula,
solarizedDark,
nord,
monokai,
};

const theme = useMemo(
// Get the theme options from the .theme property
() => createTheme(themes[currentTheme].theme),
[currentTheme]
);

return (





Theme Switcher Demo

export default App;
`

$3

You can extend any preset with your own customizations:

`jsx
import { createTheme } from '@mui/material/styles';
import { dracula } from 'mui-theme-collection';

const customTheme = createTheme({
// Spread the theme options from the .theme property
...dracula.theme,
typography: {
...dracula.theme.typography,
fontFamily: '"Fira Code", monospace',
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: 8,
},
},
},
},
});
`

$3

`jsx
import React, { useState, useEffect, useMemo } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { allThemes } from 'mui-theme-collection';

function App() {
const [themeName, setThemeName] = useState(
localStorage.getItem('theme') || 'dracula'
);

useEffect(() => {
localStorage.setItem('theme', themeName);
}, [themeName]);

const theme = useMemo(
// Get the theme options from the .theme property
() => createTheme(allThemes[themeName].theme),
[themeName]
);

return (

{/ Your app /}

);
}
`

🔩 Theme Data Structure

Each theme object is a MuiThemePreset and contains metadata along with the MUI ThemeOptions.

`typescript
interface MuiThemePreset {
name: string;
id: string;
description: string;
category: string;
referenceUrls: string[];
tags: string[];
theme: ThemeOptions; // The MUI ThemeOptions object
}
`

🎯 TypeScript Support

This package includes TypeScript definitions out of the box. Each theme is typed as MuiThemePreset.

To create a theme, you must now access the theme property of the theme object.

`typescript
import { createTheme, ThemeOptions } from '@mui/material/styles';
import { dracula, MuiThemePreset } from 'mui-theme-collection';

// The entire object is a MuiThemePreset
const draculaPreset: MuiThemePreset = dracula;

// Access metadata
console.log(draculaPreset.name); // "Dracula"

// To create the MUI theme, use the .theme property
const theme = createTheme(draculaPreset.theme);
``

📋 Requirements

- React 16.8+
- Material-UI (MUI) v5.0.0+

🤝 Contributing

Contributions are welcome! Feel free to submit a pull request with new themes or improvements.
See CONTRIBUTING.md for details.

📦 Publishing

See PUBLISHING.md for details.

📚 Changelog

See CHANGELOG.md for details.

📄 License

MIT

🙏 Credits

- Afterglow
- Atom One Dark
- Ayu
- Base16 Ocean
- Catppuccin
- Cobalt2
- Darkula
- Dracula
- Everforest
- GitHub Dark
- GitHub Light
- Gotham
- Gruvbox
- Gruvbox Material
- High Contrast Dark/Light
- Kanagawa
- Material
- Monokai
- Night Owl
- Nord
- Oceanic Next
- One Dark Pro
- One Light
- Palenight
- Panda Syntax
- Quiet Light
- Rose Pine
- Shades of Purple
- Solarized
- Synthwave '84
- Tokyo Night
- Tomorrow Night
- VS Code Dark
- VS Code Light