#B0BEC5
Primary Main
#E0F7FA
Primary Light
#62757F
Primary Dark
#000000
On Primary
#D7D9D9
Secondary Main
#F0F0F0
Secondary Light
#8A8B8C
Secondary Dark
#000000
On Secondary
#FF80AB
Divider / Accent Main
#000000
On Accent
#121212
Background Paper
#1E1E1E
Background Default
#EF5350
Error Main
#FFCDD2
Error Light
#D32F2F
Error Dark
#FFFFFF
On Error
#4CAF50
Success Main
#81C784
Success Light
#388E3C
Success Dark
#FFFFFF
On Success
#FFEB3B
Warning Main
#FFF176
Warning Light
#FBC02D
Warning Dark
#000000
On Warning
#42A5F5
Info Main
#90CAF9
Info Light
#1976D2
Info Dark
#FFFFFF
On Info
#FFFFFF
Text Primary
#B0BEC5
Text Secondary
#7B7B7B
Text Disabled
#000000
Common Black
#FFFFFF
Common White
Palette Description
For a dark theme based on your existing Material UI 2 palette, I will adjust the colors to create a more suitable contrast for a dark environment. Here’s the suggested dark theme color palette:
- Primary Colors: Darkened variants that maintain contrast against a dark background.
- Secondary Colors: Adjusted to ensure visibility and aesthetics.
- Error, Success, Warning, and Info: Colors that stand out against dark backgrounds.
- Background: A dark shade for the overall background and a slightly lighter shade for surfaces.
- Text Colors: Light colors to ensure readability.
Here’s the dark theme color palette in JSON format:
json
{
"palette_name": "Material UI 2 Dark Theme",
"colors": [
{
"name": "Primary Main",
"hex_code": "
#B0BEC5
"
},
{
"name": "Primary Light",
"hex_code": "
#E0F7FA
"
},
{
"name": "Primary Dark",
"hex_code": "
#62757F
"
},
{
"name": "On Primary",
"hex_code": "
#000000
"
},
{
"name": "Secondary Main",
"hex_code": "
#D7D9D9
"
},
{
"name": "Secondary Light",
"hex_code": "
#F0F0F0
"
},
{
"name": "Secondary Dark",
"hex_code": "
#8A8B8C
"
},
{
"name": "On Secondary",
"hex_code": "
#000000
"
},
{
"name": "Divider / Accent Main",
"hex_code": "
#FF80AB
"
},
{
"name": "On Accent",
"hex_code": "
#000000
"
},
{
"name": "Background Paper",
"hex_code": "
#121212
"
},
{
"name": "Background Default",
"hex_code": "
#1E1E1E
"
},
{
"name": "Error Main",
"hex_code": "
#EF5350
"
},
{
"name": "Error Light",
"hex_code": "
#FFCDD2
"
},
{
"name": "Error Dark",
"hex_code": "
#D32F2F
"
},
{
"name": "On Error",
"hex_code": "
#FFFFFF
"
},
{
"name": "Success Main",
"hex_code": "
#4CAF50
"
},
{
"name": "Success Light",
"hex_code": "
#81C784
"
},
{
"name": "Success Dark",
"hex_code": "
#388E3C
"
},
{
"name": "On Success",
"hex_code": "
#FFFFFF
"
},
{
"name": "Warning Main",
"hex_code": "
#FFEB3B
"
},
{
"name": "Warning Light",
"hex_code": "
#FFF176
"
},
{
"name": "Warning Dark",
"hex_code": "
#FBC02D
"
},
{
"name": "On Warning",
"hex_code": "
#000000
"
},
{
"name": "Info Main",
"hex_code": "
#42A5F5
"
},
{
"name": "Info Light",
"hex_code": "
#90CAF9
"
},
{
"name": "Info Dark",
"hex_code": "
#1976D2
"
},
{
"name": "On Info",
"hex_code": "
#FFFFFF
"
},
{
"name": "Text Primary",
"hex_code": "
#FFFFFF
"
},
{
"name": "Text Secondary",
"hex_code": "
#B0BEC5
"
},
{
"name": "Text Disabled",
"hex_code": "
#7B7B7B
"
},
{
"name": "Common Black",
"hex_code": "
#000000
"
},
{
"name": "Common White",
"hex_code": "
#FFFFFF
"
}
]
}
Palette Description:
- Primary Colors: Lightened to maintain visibility against the dark background while retaining the brand identity.
- Secondary Colors: Adjusted to be neutral and still provide contrast.
- Background Colors: Dark shades (
#121212for paper and#1E1E1Efor default) to reduce eye strain and enhance visual comfort. - Text Colors: Light colors to ensure legibility against the dark backdrop.
Would you like any further adjustments or additional components for your dark theme?