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

npm install mui-theme-collection

or

yarn add mui-theme-collection

🚀 Usage

Basic Usage

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 (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* Your app components */}
    </ThemeProvider>
  );
}

export default App;

Import Specific Themes

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

Import All Themes

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);

Theme Switching Example

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 (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ p: 3 }}>
        <h1>Theme Switcher Demo</h1>
        <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
          <Button 
            variant="contained" 
            onClick={() => setCurrentTheme('dracula')}
          >
            Dracula
          </Button>
          <Button 
            variant="contained" 
            onClick={() => setCurrentTheme('solarizedDark')}
          >
            Solarized Dark
          </Button>
          <Button 
            variant="contained" 
            onClick={() => setCurrentTheme('nord')}
          >
            Nord
          </Button>
          <Button 
            variant="contained" 
            onClick={() => setCurrentTheme('monokai')}
          >
            Monokai
          </Button>
        </Box>
      </Box>
    </ThemeProvider>
  );
}

export default App;

Customizing a Theme

You can extend any preset with your own customizations:

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,
        },
      },
    },
  },
});

Persisting Theme Selection

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 (
    <ThemeProvider theme={theme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

🔩 Theme Data Structure

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

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.

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