Skip to content

Commit 5c4178b

Browse files
segfault-segfault
segfault-
and
segfault
authored
MudColorProvider - custom color support (#204)
* no message * no message * add support for neutral, neutral variant, error, and custom colors --------- Co-authored-by: segfault <[email protected]>
1 parent 71dda59 commit 5c4178b

File tree

3 files changed

+375
-10
lines changed

3 files changed

+375
-10
lines changed

‎CodeBeam.MudBlazor.Extensions/Components/ColorProvider/MudColorProvider.razor‎

Lines changed: 142 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,34 @@
2626
[Category(CategoryTypes.Item.Behavior)]
2727
public string Tertiary { get; set; }
2828

29+
/// <summary>
30+
/// The hex value of neutral color.
31+
/// </summary>
32+
[Parameter]
33+
[Category(CategoryTypes.Item.Behavior)]
34+
public string Neutral { get; set; }
35+
36+
/// <summary>
37+
/// The hex value of neutral variant color.
38+
/// </summary>
39+
[Parameter]
40+
[Category(CategoryTypes.Item.Behavior)]
41+
public string NeutralVariant { get; set; }
42+
43+
/// <summary>
44+
/// The hex value of error color.
45+
/// </summary>
46+
[Parameter]
47+
[Category(CategoryTypes.Item.Behavior)]
48+
public string Error { get; set; }
49+
50+
/// <summary>
51+
/// The hex values of custom colors.
52+
/// </summary>
53+
[Parameter]
54+
[Category(CategoryTypes.Item.Behavior)]
55+
public Dictionary<string, string> CustomColors { get; set; } = new Dictionary<string, string>();
56+
2957
/// <summary>
3058
/// The color shade between 0 (black) and 100 (white). Default is 40 (20 for dark mode). If its on default, the value will change automatically for dark mode.
3159
/// </summary>
@@ -60,25 +88,77 @@
6088
@($"--mud-primary-{a}: {GetRGBString(Primary, a)};")
6189
@($"--mud-secondary-{a}: {GetRGBString(Secondary, a)};")
6290
@($"--mud-tertiary-{a}: {GetRGBString(Tertiary, a)};")
91+
@($"--mud-error-{a}: {GetRGBString(Error, a)};")
92+
@($"--mud-neutral-{a}: {GetRGBString(Neutral, a)};")
93+
@($"--mud-neutralvariant-{a}: {GetRGBString(NeutralVariant, a)};")
94+
95+
@foreach(var customColor in CustomColors)
96+
{
97+
@($"--mud-{customColor.Key}-{a}: {GetRGBString(customColor.Value, a)};")
98+
}
6399
}
64100
@($"--mud-primary-{MainTone}: {GetRGBString(Primary, MainTone)};")
65101
@($"--mud-secondary-{MainTone}: {GetRGBString(Secondary, MainTone)};")
66-
@($"--mud-tertiary-{MainTone}: {GetRGBString(Tertiary, MainTone)};")
102+
@($"--mud-tertiary-{MainTone}: {GetRGBString(Tertiary, MainTone)};")
103+
@($"--mud-neutral-{MainTone}: {GetRGBString(Neutral, MainTone)};")
104+
@($"--mud-neutralvariant-{MainTone}: {GetRGBString(NeutralVariant, MainTone)};")
105+
@($"--mud-error-{MainTone}: {GetRGBString(Error, MainTone)};")
106+
@foreach(var customColor in CustomColors)
107+
{
108+
@($"--mud-{customColor.Key}-{MainTone}: {GetRGBString(customColor.Value, MainTone)};")
109+
}
110+
67111
@($"--mud-primary-{ContainerTone}: {GetRGBString(Primary, ContainerTone)};")
68112
@($"--mud-secondary-{ContainerTone}: {GetRGBString(Secondary, ContainerTone)};")
69113
@($"--mud-tertiary-{ContainerTone}: {GetRGBString(Tertiary, ContainerTone)};")
114+
@($"--mud-neutral-{ContainerTone}: {GetRGBString(Neutral, ContainerTone)};")
115+
@($"--mud-neutralvariant-{ContainerTone}: {GetRGBString(NeutralVariant, ContainerTone)};")
116+
@($"--mud-error-{ContainerTone}: {GetRGBString(Error, ContainerTone)};")
117+
@foreach(var customColor in CustomColors)
118+
{
119+
@($"--mud-{customColor.Key}-{ContainerTone}: {GetRGBString(customColor.Value, ContainerTone)};")
120+
}
121+
70122
@($"--mud-primary-{100 - ContainerTone}: {GetRGBString(Primary, 100 - ContainerTone)};")
71123
@($"--mud-secondary-{100 - ContainerTone}: {GetRGBString(Secondary, 100 - ContainerTone)};")
72-
@($"--mud-tertiary-{100 - ContainerTone}: {GetRGBString(Tertiary, 100 - ContainerTone)};")
124+
@($"--mud-tertiary-{100 - ContainerTone}: {GetRGBString(Tertiary, 100 - ContainerTone)};")
125+
@($"--mud-neutral-{100 - ContainerTone}: {GetRGBString(Neutral, 100 - ContainerTone)};")
126+
@($"--mud-neutralvariant-{100 - ContainerTone}: {GetRGBString(NeutralVariant, 100 - ContainerTone)};")
127+
@($"--mud-error-{100 - ContainerTone}: {GetRGBString(Error, 100 - ContainerTone)};")
128+
@foreach(var customColor in CustomColors)
129+
{
130+
@($"--mud-{customColor.Key}-{100 - ContainerTone}: {GetRGBString(customColor.Value, 100 - ContainerTone)};")
131+
}
132+
73133
@($"--mud-primary-99: {GetRGBString(Primary, 99)};")
74134
@($"--mud-secondary-99: {GetRGBString(Secondary, 99)};")
75135
@($"--mud-tertiary-99: {GetRGBString(Tertiary, 99)};")
136+
@($"--mud-neutral-99: {GetRGBString(Neutral, 99)};")
137+
@($"--mud-neutralvariant-99: {GetRGBString(NeutralVariant, 99)};")
138+
@($"--mud-error-99: {GetRGBString(Error, 99)};")
139+
@foreach(var customColor in CustomColors)
140+
{
141+
@($"--mud-{customColor.Key}-99: {GetRGBString(customColor.Value, 99)};")
142+
}
143+
76144
--mud-primary-0: rgb(0, 0, 0);
77145
--mud-primary-100: rgb(255, 255, 255);
78146
--mud-secondary-0: rgb(0, 0, 0);
79147
--mud-secondary-100: rgb(255, 255, 255);
80148
--mud-tertiary-0: rgb(0, 0, 0);
81149
--mud-tertiary-100: rgb(255, 255, 255);
150+
--mud-neutral-0: rgb(0, 0, 0);
151+
--mud-neutral-100: rgb(255, 255, 255);
152+
--mud-neutralvariant-0: rgb(0, 0, 0);
153+
--mud-neutralvariant-100: rgb(255, 255, 255);
154+
--mud-error-0: rgb(0, 0, 0);
155+
--mud-error-100: rgb(255, 255, 255);
156+
@foreach(var customColor in CustomColors)
157+
{
158+
@($"--mud-{customColor.Key}-0: rgb(0, 0, 0);");
159+
@($"--mud-{customColor.Key}-100: rgb(255, 255, 255);");
160+
}
161+
82162
83163
--mud-m3-primary: var(--mud-primary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
84164
--mud-m3-onprimary: var(--mud-primary-@(DarkMode ? "20" : "100"));
@@ -95,6 +175,30 @@
95175
--mud-m3-tertiary-container: var(--mud-tertiary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
96176
--mud-m3-ontertiary-container: var(--mud-tertiary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
97177
178+
--mud-m3-neutral: var(--mud-neutral-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
179+
--mud-m3-onneutral: var(--mud-neutral-@(DarkMode ? "20" : "100"));
180+
--mud-m3-neutral-container: var(--mud-neutral-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
181+
--mud-m3-onneutral-container: var(--mud-neutral-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
182+
183+
--mud-m3-neutralvariant: var(--mud-neutralvariant-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
184+
--mud-m3-onneutralvariant: var(--mud-neutralvariant-@(DarkMode ? "20" : "100"));
185+
--mud-m3-neutralvariant-container: var(--mud-neutralvariant-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
186+
--mud-m3-onneutralvariant-container: var(--mud-neutralvariant-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
187+
188+
--mud-m3-error: var(--mud-error-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
189+
--mud-m3-onerror: var(--mud-error-@(DarkMode ? "20" : "100"));
190+
--mud-m3-error-container: var(--mud-error-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
191+
--mud-m3-onerror-container: var(--mud-error-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
192+
193+
@foreach(var customColor in CustomColors)
194+
{
195+
@($"--mud-m3-{customColor.Key}: var(--mud-{customColor.Key}-{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())});");
196+
@($"--mud-m3-on{customColor.Key}: var(--mud-{customColor.Key}-{(DarkMode ? "20" : "100")});");
197+
@($"--mud-m3-{customColor.Key}-container: var(--mud-{customColor.Key}-{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())});");
198+
@($"--mud-m3-on{customColor.Key}-container: var(--mud-{customColor.Key}-{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)});");
199+
}
200+
201+
98202
@if (Override)
99203
{
100204
<MudRender>
@@ -104,6 +208,13 @@
104208
--mud-palette-secondary-text: var(--mud-m3-secondary-container) !important;
105209
--mud-palette-tertiary: var(--mud-m3-tertiary) !important;
106210
--mud-palette-tertiary-text: var(--mud-m3-tertiary-container) !important;
211+
--mud-palette-error: var(--mud-m3-error) !important;
212+
--mud-palette-error-text: var(--mud-m3-error-container) !important;
213+
@foreach(var customColor in CustomColors)
214+
{
215+
@($"--mud-palette-{customColor.Key}: var(--mud-m3-{customColor.Key}) !important;");
216+
@($"--mud-palette-{customColor.Key}-text: var(--mud-m3-{customColor.Key}-container) !important;");
217+
}
107218
</MudRender>
108219
}
109220
}
@@ -167,4 +278,33 @@
167278
color: var(--mud-m3-tertiary-container);
168279
background-color: var(--mud-m3-ontertiary-container);
169280
}
281+
282+
.mud-m3-theme-error {
283+
color: var(--mud-m3-onerror);
284+
background-color: var(--mud-m3-error);
285+
}
286+
287+
.mud-m3-theme-error-reverse {
288+
color: var(--mud-m3-error);
289+
background-color: var(--mud-m3-onerror);
290+
}
291+
292+
.mud-m3-theme-error-container {
293+
color: var(--mud-m3-onerror-container);
294+
background-color: var(--mud-m3-error-container);
295+
}
296+
297+
.mud-m3-theme-error-container-reverse {
298+
color: var(--mud-m3-error-container);
299+
background-color: var(--mud-m3-onerror-container);
300+
}
301+
302+
@foreach(var customColor in CustomColors)
303+
{
304+
@($".mud-m3-theme-{customColor.Key} {{ color: var(--mud-m3-on{customColor.Key});background-color: var(--mud-m3-{customColor.Key});}}");
305+
@($".mud-m3-theme-{customColor.Key}-reverse {{ color: var(--mud-m3-{customColor.Key});background-color: var(--mud-m3-on{customColor.Key});}}");
306+
@($".mud-m3-theme-{customColor.Key}-container {{ color: var(--mud-m3-on{customColor.Key}-container);background-color: var(--mud-m3-{customColor.Key}-container);}}");
307+
@($".mud-m3-theme-{customColor.Key}-container-reverse {{ color: var(--mud-m3-{customColor.Key}-container);background-color: var(--mud-m3-on{customColor.Key}-container);}}");
308+
}
309+
170310
</style>

‎CodeBeam.MudBlazor.Extensions/Components/ColorProvider/MudColorProvider.razor.cs‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
using System;
2-
using System.Collections.Generic;
3-
using System.Linq;
4-
using System.Text;
5-
using System.Threading.Tasks;
6-
using MudBlazor;
1+
using MudBlazor;
72

83
namespace MudExtensions
94
{

0 commit comments

Comments
 (0)