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.
- 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.
npm install mui-theme-collectionor
yarn add mui-theme-collectionimportReactfrom'react';import{ThemeProvider,createTheme}from'@mui/material/styles';importCssBaselinefrom'@mui/material/CssBaseline';import{dracula}from'mui-theme-collection';functionApp(){// Access the theme options from the .theme propertyconsttheme=createTheme(dracula.theme);return(<ThemeProvidertheme={theme}><CssBaseline/>{/* Your app components */}</ThemeProvider>);}exportdefaultApp;import{dracula,solarizedDark,nord}from'mui-theme-collection';import{allThemes}from'mui-theme-collection';// Access themes by key and get the theme options from the .theme propertyconsttheme=createTheme(allThemes.dracula.theme);importReact,{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';functionApp(){const[currentTheme,setCurrentTheme]=useState('dracula');constthemes={
dracula,
solarizedDark,
nord,
monokai,};consttheme=useMemo(// Get the theme options from the .theme property()=>createTheme(themes[currentTheme].theme),[currentTheme]);return(<ThemeProvidertheme={theme}><CssBaseline/><Boxsx={{p: 3}}><h1>Theme Switcher Demo</h1><Boxsx={{display: 'flex',gap: 1,mt: 2}}><Buttonvariant="contained"onClick={()=>setCurrentTheme('dracula')}>
Dracula
</Button><Buttonvariant="contained"onClick={()=>setCurrentTheme('solarizedDark')}>
Solarized Dark
</Button><Buttonvariant="contained"onClick={()=>setCurrentTheme('nord')}>
Nord
</Button><Buttonvariant="contained"onClick={()=>setCurrentTheme('monokai')}>
Monokai
</Button></Box></Box></ThemeProvider>);}exportdefaultApp;You can extend any preset with your own customizations:
import{createTheme}from'@mui/material/styles';import{dracula}from'mui-theme-collection';constcustomTheme=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,},},},},});importReact,{useState,useEffect,useMemo}from'react';import{ThemeProvider,createTheme}from'@mui/material/styles';import{allThemes}from'mui-theme-collection';functionApp(){const[themeName,setThemeName]=useState(localStorage.getItem('theme')||'dracula');useEffect(()=>{localStorage.setItem('theme',themeName);},[themeName]);consttheme=useMemo(// Get the theme options from the .theme property()=>createTheme(allThemes[themeName].theme),[themeName]);return(<ThemeProvidertheme={theme}>{/* Your app */}</ThemeProvider>);}Each theme object is a MuiThemePreset and contains metadata along with the MUI ThemeOptions.
interfaceMuiThemePreset{name: string;id: string;description: string;category: string;referenceUrls: string[];tags: string[];theme: ThemeOptions;// The MUI ThemeOptions object}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 MuiThemePresetconstdraculaPreset: MuiThemePreset=dracula;// Access metadataconsole.log(draculaPreset.name);// "Dracula"// To create the MUI theme, use the .theme propertyconsttheme=createTheme(draculaPreset.theme);- React 16.8+
- Material-UI (MUI) v5.0.0+
Contributions are welcome! Feel free to submit a pull request with new themes or improvements. See CONTRIBUTING.md for details.
See PUBLISHING.md for details.
See CHANGELOG.md for details.
MIT
- 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