mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-05 21:15:38 -05:00
support for custom themes
This commit is contained in:
bbedward
127
docs/CUSTOM_THEMES.md
Normal file
127
docs/CUSTOM_THEMES.md
Normal file
@@ -0,0 +1,127 @@
|
||||
# Custom Themes
|
||||
|
||||
This guide covers creating custom themes for DankMaterialShell. You can define your own color schemes by creating theme files that the shell can load.
|
||||
|
||||
## Theme Structure
|
||||
|
||||
Themes are defined using the same structure as the built-in themes. Each theme must specify a complete set of Material Design 3 colors that work together harmoniously.
|
||||
|
||||
### Required Core Colors
|
||||
|
||||
These are the essential colors that define your theme's appearance:
|
||||
|
||||
```json
|
||||
{
|
||||
"dark": {
|
||||
"name": "Cyberpunk Electric Dark",
|
||||
"primary": "#00FFCC",
|
||||
"primaryText": "#000000",
|
||||
"primaryContainer": "#00CC99",
|
||||
"secondary": "#FF4DFF",
|
||||
"surface": "#0F0F0F",
|
||||
"surfaceText": "#E0FFE0",
|
||||
"surfaceVariant": "#1F2F1F",
|
||||
"surfaceVariantText": "#CCFFCC",
|
||||
"surfaceTint": "#00FFCC",
|
||||
"background": "#000000",
|
||||
"backgroundText": "#F0FFF0",
|
||||
"outline": "#80FF80",
|
||||
"surfaceContainer": "#1A2B1A",
|
||||
"surfaceContainerHigh": "#264026",
|
||||
"error": "#FF0066",
|
||||
"warning": "#CCFF00",
|
||||
"info": "#00FFCC"
|
||||
},
|
||||
"light": {
|
||||
"name": "Cyberpunk Electric Light",
|
||||
"primary": "#00B899",
|
||||
"primaryText": "#FFFFFF",
|
||||
"primaryContainer": "#66FFDD",
|
||||
"secondary": "#CC00CC",
|
||||
"surface": "#F0FFF0",
|
||||
"surfaceText": "#1F2F1F",
|
||||
"surfaceVariant": "#E6FFE6",
|
||||
"surfaceVariantText": "#2D4D2D",
|
||||
"surfaceTint": "#00B899",
|
||||
"background": "#FFFFFF",
|
||||
"backgroundText": "#000000",
|
||||
"outline": "#4DCC4D",
|
||||
"surfaceContainer": "#F5FFF5",
|
||||
"surfaceContainerHigh": "#EBFFEB",
|
||||
"error": "#B3004D",
|
||||
"warning": "#99CC00",
|
||||
"info": "#00B899"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can the colors at the top level if you do not want "dark" and "light" variants.
|
||||
|
||||
## Example Themes
|
||||
|
||||
There are example themes you can start from:
|
||||
|
||||
- [Cyberpunk Electric](theme_cyberpunk_electric.json) - Neon green and magenta cyberpunk aesthetic
|
||||
- [Hotline Miami](theme_hotline_miami.json) - Retro 80s inspired hot pink and blue
|
||||
- [Miami Vice](theme_miami_vice.json) - Classic teal and pink vice aesthetic
|
||||
- [Synthwave Electric](theme_synthwave_electric.json) - Electric purple and cyan synthwave vibes
|
||||
|
||||
### Color Definitions
|
||||
|
||||
**Primary Colors**
|
||||
- `primary` - Main accent color used for buttons, highlights, and active states
|
||||
- `primaryText` - Text color that contrasts well with primary background
|
||||
- `primaryContainer` - Darker/lighter variant of primary for containers
|
||||
|
||||
**Secondary Colors**
|
||||
- `secondary` - Supporting accent color for variety and hierarchy
|
||||
- `surfaceTint` - Tint color applied to surfaces, usually derived from primary
|
||||
|
||||
**Surface Colors**
|
||||
- `surface` - Default surface color for cards, panels, etc.
|
||||
- `surfaceText` - Primary text color on surface backgrounds
|
||||
- `surfaceVariant` - Alternate surface color for subtle differentiation
|
||||
- `surfaceVariantText` - Text color for surfaceVariant backgrounds
|
||||
- `surfaceContainer` - Container surface color, slightly different from surface
|
||||
- `surfaceContainerHigh` - Elevated container color for layered interfaces
|
||||
|
||||
**Background Colors**
|
||||
- `background` - Main background color for the entire interface
|
||||
- `backgroundText` - Text color for background areas
|
||||
|
||||
**Outline Colors**
|
||||
- `outline` - Border and divider color for subtle boundaries
|
||||
|
||||
## Optional Properties
|
||||
|
||||
While the core colors above are required, you can also customize these optional properties:
|
||||
|
||||
### Semantic Colors
|
||||
```json
|
||||
{
|
||||
"error": "#f44336",
|
||||
"warning": "#ff9800",
|
||||
"info": "#2196f3"
|
||||
}
|
||||
```
|
||||
|
||||
- `error` - Used for error states, delete buttons, and critical warnings
|
||||
- `warning` - Used for warning states and caution indicators
|
||||
- `info` - Used for informational states and neutral indicators
|
||||
|
||||
## Setting Custom Theme
|
||||
|
||||
In settings -> Theme & Colors you can choose "Custom" to choose a path to your theme.
|
||||
|
||||
You can also edit `~/.config/DankMaterialShell/settings.json` manually
|
||||
|
||||
```json
|
||||
{
|
||||
"currentThemeName": "custom",
|
||||
"customThemeFile": "/path/to/mytheme.json"
|
||||
}
|
||||
```
|
||||
|
||||
### Reactivity
|
||||
|
||||
Editing the custom theme file will auto-update the shell if it's the current theme.
|
||||
42
docs/theme_cyberpunk_electric.json
Normal file
42
docs/theme_cyberpunk_electric.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"dark": {
|
||||
"name": "Cyberpunk Electric Dark",
|
||||
"primary": "#00FFCC",
|
||||
"primaryText": "#000000",
|
||||
"primaryContainer": "#00CC99",
|
||||
"secondary": "#FF4DFF",
|
||||
"surface": "#0F0F0F",
|
||||
"surfaceText": "#E0FFE0",
|
||||
"surfaceVariant": "#1F2F1F",
|
||||
"surfaceVariantText": "#CCFFCC",
|
||||
"surfaceTint": "#00FFCC",
|
||||
"background": "#000000",
|
||||
"backgroundText": "#F0FFF0",
|
||||
"outline": "#80FF80",
|
||||
"surfaceContainer": "#1A2B1A",
|
||||
"surfaceContainerHigh": "#264026",
|
||||
"error": "#FF0066",
|
||||
"warning": "#CCFF00",
|
||||
"info": "#00FFCC"
|
||||
},
|
||||
"light": {
|
||||
"name": "Cyberpunk Electric Light",
|
||||
"primary": "#00B899",
|
||||
"primaryText": "#FFFFFF",
|
||||
"primaryContainer": "#66FFDD",
|
||||
"secondary": "#CC00CC",
|
||||
"surface": "#F0FFF0",
|
||||
"surfaceText": "#1F2F1F",
|
||||
"surfaceVariant": "#E6FFE6",
|
||||
"surfaceVariantText": "#2D4D2D",
|
||||
"surfaceTint": "#00B899",
|
||||
"background": "#FFFFFF",
|
||||
"backgroundText": "#000000",
|
||||
"outline": "#4DCC4D",
|
||||
"surfaceContainer": "#F5FFF5",
|
||||
"surfaceContainerHigh": "#EBFFEB",
|
||||
"error": "#B3004D",
|
||||
"warning": "#99CC00",
|
||||
"info": "#00B899"
|
||||
}
|
||||
}
|
||||
42
docs/theme_hotline_miami.json
Normal file
42
docs/theme_hotline_miami.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"dark": {
|
||||
"name": "Hotline Miami Dark",
|
||||
"primary": "#FF0080",
|
||||
"primaryText": "#FFFFFF",
|
||||
"primaryContainer": "#CC0066",
|
||||
"secondary": "#00FF80",
|
||||
"surface": "#0D0D0D",
|
||||
"surfaceText": "#F0F0F0",
|
||||
"surfaceVariant": "#1A0F1A",
|
||||
"surfaceVariantText": "#E0E0E0",
|
||||
"surfaceTint": "#FF0080",
|
||||
"background": "#000000",
|
||||
"backgroundText": "#FFFFFF",
|
||||
"outline": "#8000FF",
|
||||
"surfaceContainer": "#1A0D1A",
|
||||
"surfaceContainerHigh": "#260F26",
|
||||
"error": "#FF4080",
|
||||
"warning": "#FFFF00",
|
||||
"info": "#00FF80"
|
||||
},
|
||||
"light": {
|
||||
"name": "Hotline Miami Light",
|
||||
"primary": "#CC0066",
|
||||
"primaryText": "#FFFFFF",
|
||||
"primaryContainer": "#FF80B3",
|
||||
"secondary": "#00CC66",
|
||||
"surface": "#FFF0FF",
|
||||
"surfaceText": "#1A0F1A",
|
||||
"surfaceVariant": "#F0E6F0",
|
||||
"surfaceVariantText": "#2D1A2D",
|
||||
"surfaceTint": "#CC0066",
|
||||
"background": "#FFFFFF",
|
||||
"backgroundText": "#0D0D0D",
|
||||
"outline": "#6600CC",
|
||||
"surfaceContainer": "#F5F0F5",
|
||||
"surfaceContainerHigh": "#EBE0EB",
|
||||
"error": "#B30040",
|
||||
"warning": "#B3B300",
|
||||
"info": "#00B359"
|
||||
}
|
||||
}
|
||||
42
docs/theme_miami_vice.json
Normal file
42
docs/theme_miami_vice.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"dark": {
|
||||
"name": "Miami Vice Dark",
|
||||
"primary": "#00FFFF",
|
||||
"primaryText": "#000000",
|
||||
"primaryContainer": "#00CCCC",
|
||||
"secondary": "#FF1493",
|
||||
"surface": "#0A0A0F",
|
||||
"surfaceText": "#E0E0FF",
|
||||
"surfaceVariant": "#1A1A2E",
|
||||
"surfaceVariantText": "#C0C0FF",
|
||||
"surfaceTint": "#00FFFF",
|
||||
"background": "#000008",
|
||||
"backgroundText": "#F0F0FF",
|
||||
"outline": "#4040FF",
|
||||
"surfaceContainer": "#131325",
|
||||
"surfaceContainerHigh": "#1F1F40",
|
||||
"error": "#FF0080",
|
||||
"warning": "#FFFF00",
|
||||
"info": "#00FFFF"
|
||||
},
|
||||
"light": {
|
||||
"name": "Miami Vice Light",
|
||||
"primary": "#0099CC",
|
||||
"primaryText": "#FFFFFF",
|
||||
"primaryContainer": "#00CCFF",
|
||||
"secondary": "#CC0066",
|
||||
"surface": "#F8F8FF",
|
||||
"surfaceText": "#1A1A2E",
|
||||
"surfaceVariant": "#E8E8FF",
|
||||
"surfaceVariantText": "#2A2A4E",
|
||||
"surfaceTint": "#0099CC",
|
||||
"background": "#FFFFFF",
|
||||
"backgroundText": "#0A0A2E",
|
||||
"outline": "#6666CC",
|
||||
"surfaceContainer": "#F0F0FF",
|
||||
"surfaceContainerHigh": "#E0E0FF",
|
||||
"error": "#CC0055",
|
||||
"warning": "#CC9900",
|
||||
"info": "#0099CC"
|
||||
}
|
||||
}
|
||||
42
docs/theme_synthwave_electric.json
Normal file
42
docs/theme_synthwave_electric.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"dark": {
|
||||
"name": "Synthwave Electric Dark",
|
||||
"primary": "#FF6600",
|
||||
"primaryText": "#000000",
|
||||
"primaryContainer": "#CC5200",
|
||||
"secondary": "#0080FF",
|
||||
"surface": "#0A0A15",
|
||||
"surfaceText": "#E6F0FF",
|
||||
"surfaceVariant": "#1A1A33",
|
||||
"surfaceVariantText": "#CCE0FF",
|
||||
"surfaceTint": "#FF6600",
|
||||
"background": "#000008",
|
||||
"backgroundText": "#F0F8FF",
|
||||
"outline": "#4D80FF",
|
||||
"surfaceContainer": "#151529",
|
||||
"surfaceContainerHigh": "#212147",
|
||||
"error": "#FF3366",
|
||||
"warning": "#FFCC00",
|
||||
"info": "#0080FF"
|
||||
},
|
||||
"light": {
|
||||
"name": "Synthwave Electric Light",
|
||||
"primary": "#CC5200",
|
||||
"primaryText": "#FFFFFF",
|
||||
"primaryContainer": "#FF9966",
|
||||
"secondary": "#0066CC",
|
||||
"surface": "#FFF8F0",
|
||||
"surfaceText": "#1A1A33",
|
||||
"surfaceVariant": "#F0F0FF",
|
||||
"surfaceVariantText": "#333366",
|
||||
"surfaceTint": "#CC5200",
|
||||
"background": "#FFFFFF",
|
||||
"backgroundText": "#000008",
|
||||
"outline": "#3366CC",
|
||||
"surfaceContainer": "#F5F5FF",
|
||||
"surfaceContainerHigh": "#EBEBFF",
|
||||
"error": "#CC1A40",
|
||||
"warning": "#CC9900",
|
||||
"info": "#0066CC"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user