Skip to content

Commit eb52524

Browse files
committed
add custom theme doc
1 parent 427cd63 commit eb52524

File tree

9 files changed

+58
-2
lines changed

9 files changed

+58
-2
lines changed

β€ŽREADME.mdβ€Ž

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,64 @@ Just select your theme in your Home Assistant profile settings.
1414

1515
2 themes are available :
1616

17-
- [Default](docs/themes/default.md)
18-
- [Square](docs/themes/square.md)
17+
- Mushroom (default)
18+
- Mushroom square
19+
20+
## Build your own
21+
22+
You can build your own theme by using the mushroom variables.
23+
24+
```yaml
25+
Mushroom:
26+
# HA variables
27+
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
28+
ha-card-border-radius: 12px
29+
# Mushroom layout
30+
mush-spacing: 12px
31+
# Title
32+
mush-title-padding: 24px 12px 16px
33+
mush-title-spacing: 12px
34+
mush-title-font-size: 24px
35+
mush-title-font-weight: normal
36+
mush-title-line-height: 1.2
37+
mush-subtitle-font-size: 16px
38+
mush-subtitle-font-weight: normal
39+
mush-subtitle-line-height: 1.2
40+
# Card
41+
mush-icon-border-radius: 50%
42+
mush-control-border-radius: 12px
43+
# Chips
44+
mush-chip-spacing: 8px
45+
mush-chip-padding: 0 12px
46+
mush-chip-height: 36px
47+
mush-chip-border-radius: 18px
48+
# Colors
49+
mush-rgb-red: 244, 67, 54
50+
mush-rgb-pink: 233, 30, 99
51+
mush-rgb-purple: 156, 39, 176
52+
mush-rgb-deep-purple: 103, 58, 183
53+
mush-rgb-indigo: 63, 81, 181
54+
mush-rgb-blue: 33, 150, 243
55+
mush-rgb-light-blue: 3, 169, 244
56+
mush-rgb-cyan: 0, 188, 212
57+
mush-rgb-teal: 0, 150, 136
58+
mush-rgb-green: 76, 175, 80
59+
mush-rgb-light-green: 139, 195, 74
60+
mush-rgb-lime: 205, 220, 57
61+
mush-rgb-yellow: 255, 235, 59
62+
mush-rgb-amber: 255, 193, 7
63+
mush-rgb-orange: 255, 152, 0
64+
mush-rgb-deep-orange: 255, 87, 34
65+
mush-rgb-brown: 121, 85, 72
66+
mush-rgb-grey: 158, 158, 158
67+
mush-rgb-blue-grey: 96, 125, 139
68+
mush-rgb-black: 0, 0, 0
69+
mush-rgb-white: 255, 255, 255
70+
# You must keep this to support light/dark theme
71+
modes:
72+
light: {}
73+
dark: {}
74+
```
1975
2076
## Installation
2177

β€Ždocs/images/default-dark.pngβ€Ž

-145 KB
Binary file not shown.
-158 KB
Binary file not shown.

β€Ždocs/images/square-dark.pngβ€Ž

-130 KB
Binary file not shown.

β€Ždocs/images/square-light.pngβ€Ž

-131 KB
Binary file not shown.

β€Ždocs/themes/default.mdβ€Ž

Whitespace-only changes.

β€Ždocs/themes/square.mdβ€Ž

Whitespace-only changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
Β (0)