leftyer/MASA.Blazor
1
0
Fork 0
mirror of https://gitee.com/blazorcomponent/MASA.Blazor.git synced 2025-12-06 10:19:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Theme): update default color for light and dark themes (#2481)

Browse Source 
* 🆕 feat(Theme): update default color for light and dark themes

* 📝 docs(Theme): add support for copying css variables and names

* missing a file
This commit is contained in:
capdiem
2025-07-05 11:33:47 +08:00
committed by GitHub
parent 33ad5cb4ec
commit 0c09e5e3df
6 changed files with 245 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
docs/Masa.Blazor.Docs/Examples/features/theme/Specification.razor
View File

@@ -1,7 +1,7 @@
@inject IJSRuntime JSRuntime
@inject MasaBlazor MasaBlazor
@inject MasaBlazor MasaBlazor
@inject IJSRuntime JSRuntime
<MButtonGroup @bind-Value="@_themeName" @bind-Value:after="OnThemeChanged" Mandatory Color="primary" Class="mb-4" >
<MButtonGroup @bind-Value="@_themeName" @bind-Value:after="OnThemeChanged" Mandatory Color="primary" Class="mb-4">
@foreach (var item in MasaBlazor.Theme.Themes.GetAll())
{
<MButton Value="@item.Key" Class="text-none">@item.Key</MButton>
@@ -12,59 +12,92 @@
<MRow Dense Class="pa-4 ma-0" Style="background:rgba(var(--m-theme-primary), 0.3)">
<MCol Cols="3">
<MCard Tile Elevation="0">
@GenBase("primary", _currentThemeOptions?.Primary)
@GenBaseText("primary", _currentThemeOptions?.OnPrimary)
@GenBg("primary",
_currentThemeOptions?.Primary,
"--m-theme-primary",
"primary")
@GenText("primary", _currentThemeOptions?.OnPrimary, "--m-theme-on-primary", "primary--text")
</MCard>
</MCol>
<MCol Cols="3">
<MCard Tile Elevation="0">
@GenBase("secondary", _currentThemeOptions?.Secondary)
@GenBaseText("secondary", _currentThemeOptions?.OnSecondary)
@GenBg("secondary", _currentThemeOptions?.Secondary,
"--m-theme-secondary",
"secondary")
@GenText("secondary", _currentThemeOptions?.OnSecondary,
"--m-theme-on-secondary",
"secondary--text")
</MCard>
</MCol>
<MCol Cols="3">
<MCard Tile Elevation="0">
@GenBase("accent", _currentThemeOptions?.Accent)
@GenBaseText("accent", _currentThemeOptions?.OnAccent)
@GenBg("accent", _currentThemeOptions?.Accent,
"--m-theme-accent",
"accent")
@GenText("accent", _currentThemeOptions?.OnAccent,
"--m-theme-on-accent",
"accent--text")
</MCard>
</MCol>
<MCol Cols="3">
<MCard Tile Elevation="0">
@GenBase("error", _currentThemeOptions?.Error)
@GenBaseText("error", _currentThemeOptions?.OnError)
@GenBg("error", _currentThemeOptions?.Error,
"--m-theme-error",
"error")
@GenText("error", _currentThemeOptions?.OnError,
"--m-theme-on-error",
"error--text")
</MCard>
</MCol>
<MCol Cols="9">
<MRow Dense>
<MCol Cols="4">
<MCard Tile Elevation="0">
@GenBase("surface-dim", _currentThemeOptions?.SurfaceDim)
@GenBg("surface-dim", _currentThemeOptions?.SurfaceDim,
"--m-theme-surface-dim",
"surface-dim")
</MCard>
</MCol>
<MCol Cols="4">
<MCard Tile Elevation="0">
@GenBase("surface", _currentThemeOptions?.Surface)
@GenBg("surface", _currentThemeOptions?.Surface,
"--m-theme-surface",
"surface")
</MCard>
</MCol>
<MCol Cols="4">
<MCard Tile Elevation="0">
@GenBase("surface-bright", _currentThemeOptions?.SurfaceBright)
@GenBg("surface-bright", _currentThemeOptions?.SurfaceBright,
"--m-theme-surface-bright",
"surface-bright")
</MCard>
</MCol>
<MCol Cols="12">
<MCard Tile Elevation="0" Class="d-flex">
@GenBase("surface-container-lowest", _currentThemeOptions?.SurfaceContainerLowest)
@GenBase("surface-container-low", _currentThemeOptions?.SurfaceContainerLow)
@GenBase("surface-container", _currentThemeOptions?.SurfaceContainer)
@GenBase("surface-container-high", _currentThemeOptions?.SurfaceContainerHigh)
@GenBase("surface-container-highest", _currentThemeOptions?.SurfaceContainerHighest)
@GenBg("surface-container-lowest", _currentThemeOptions?.SurfaceContainerLowest,
"--m-theme-surface-container-lowest",
"surface-container-lowest")
@GenBg("surface-container-low", _currentThemeOptions?.SurfaceContainerLow,
"--m-theme-surface-container-low",
"surface-container-low")
@GenBg("surface-container", _currentThemeOptions?.SurfaceContainer,
"--m-theme-surface-container",
"surface-container")
@GenBg("surface-container-high", _currentThemeOptions?.SurfaceContainerHigh,
"--m-theme-surface-container-high",
"surface-container-high")
@GenBg("surface-container-highest", _currentThemeOptions?.SurfaceContainerHighest,
"--m-theme-surface-container-highest",
"surface-container-highest")
</MCard>
</MCol>
<MCol Cols="12">
<MCard Tile Elevation="0" Class="d-flex">
@GenItem(css: null, style: "background: rgba(var(--m-theme-on-surface)); color: rgba(var(--m-theme-surface));", "On Surface", 40, _currentThemeOptions?.OnSurface)
@GenStyle("outline", color: null)
@GenStyle("outline-variant", color: null)
@GenBase(css: null, style: "background: rgba(var(--m-theme-on-surface)); color: rgba(var(--m-theme-surface));", "On Surface", 40, _currentThemeOptions?.OnSurface,
variableToCopy: "--m-theme-on-surface",
cssToCopy: null)
@GenStyle("outline", color: null, "--m-theme-outline", "outline")
@GenStyle("outline-variant", color: null, "--m-theme-outline-variant", "outline-variant")
</MCard>
</MCol>
</MRow>
@@ -73,9 +106,11 @@
<MRow Dense>
<MCol Cols="12">
<MCard Tile Elevation="0">
@GenItem(css: "inverse-surface", style: null, text: "Inverse Surface", height: 40, color: _currentThemeOptions?.InverseSurface)
@GenStyle("inverse-on-surface", _currentThemeOptions?.InverseOnSurface)
@GenStyle("inverse-primary", _currentThemeOptions?.InversePrimary)
@GenBase(css: "inverse-surface", style: null, text: "Inverse Surface", height: 40, color: _currentThemeOptions?.InverseSurface,
"--m-theme-inverse-surface",
cssToCopy: "inverse-surface")
@GenStyle("inverse-on-surface", _currentThemeOptions?.InverseOnSurface, "--m-theme-inverse-on-surface", "inverse-on-surface")
@GenStyle("inverse-primary", _currentThemeOptions?.InversePrimary, "--m-theme-inverse-primary", null)
</MCard>
</MCol>
</MRow>
@@ -87,6 +122,7 @@
private StringNumber _themeName = "light";
private ThemeOptions? _currentThemeOptions;
private (string Role, string Color)? _currentColorRole;
protected override void OnInitialized()
{
@@ -100,50 +136,64 @@
_currentThemeOptions = MasaBlazor.Theme.Themes[_themeName.ToString()!];
}
private RenderFragment GenBase(string role, string? color) => GenItem(
private RenderFragment GenBg(string role, string? color, string variableToCopy, string cssToCopy) => GenBase(
css: role,
style: null,
text: role,
height: 78,
color);
color,
variableToCopy,
cssToCopy);
private RenderFragment GenBaseText(string role, string? color) => GenItem(
private RenderFragment GenText(string role, string? color, string variableToCopy, string cssToCopy) => GenBase(
css: null,
style: $"background: rgba(var(--m-theme-on-{role})); color: rgba(var(--m-theme-{role}-text));",
text: "on " + role,
height: 40,
color);
color,
variableToCopy,
cssToCopy);
private RenderFragment GenStyle(string role, string? color) => GenItem(
private RenderFragment GenStyle(string role, string? color, string variableToCopy, string? cssToCopy) => GenBase(
css: null,
style: $"background: rgba(var(--m-theme-{role})); color: rgba(var(--m-theme-{role}-text));",
text: role,
height: 40,
color);
color,
variableToCopy,
cssToCopy);
private RenderFragment GenItem(string? css, string? style, string text, int height, string? color) => __builder =>
private RenderFragment GenBase(string? css, string? style, string text, int height, string? color, string? variableToCopy = null, string? cssToCopy = null) => __builder =>
{
<MHover Disabled="@(color is null)">
<div class="px-4 pt-2 text-capitalize flex-grow-1 rounded-0 text-body-2 @css"
style="@style position: relative; height: @($"{height}px")"
@attributes="@context.Attrs">
@text.Replace("-", " ")
<Transition Name="fade-transition">
<MButton IconName="$copy" Show="@context.Hover" Absolute Small
Style="color: inherit; right: 6px; bottom: 6px;"
OnClick="@(() => CopyText(color))">
<MTooltip Activator="parent" Text="@color" Left></MTooltip>
</MButton>
</Transition>
<div class="px-4 pt-2 text-capitalize flex-grow-1 rounded-0 text-body-2 @css"
style="@style position: relative; height: @($"{height}px")">
@text.Replace("-", " ")
<div style="position: absolute; right: 6px; bottom: 6px; left: 0;"
class="d-flex align-center justify-end">
@GenBtn("mdi-eyedropper", color)
@if (variableToCopy is not null)
{
@GenBtn("mdi-variable", $"rgba(var({variableToCopy}))")
}
@GenBtn("$css", cssToCopy)
</div>
</MHover>
</div>
};
void CopyText(string? t)
private RenderFragment GenBtn(string icon, string? copyText) => __builder =>
{
@if (copyText is not null)
{
if (string.IsNullOrEmpty(t))
return;
<MButton IconName="@icon" Small OnClick="@CopyText">
<MTooltip Activator="parent" Text="@copyText"></MTooltip>
</MButton>
}
JSRuntime.InvokeVoidAsync(JsInteropConstants.CopyText, t).ConfigureAwait(false);
void CopyText()
{
JSRuntime.InvokeVoidAsync(JsInteropConstants.CopyText, copyText).ConfigureAwait(false);
}
};

2
docs/Masa.Docs.Shared/ServiceCollectionExtensions.cs
View File

@@ -152,6 +152,8 @@ public static class ServiceCollectionExtensions
"M17.67 21.633a3.995 3.995 0 1 1 0-7.99 3.995 3.995 0 0 1 0 7.99m-7.969-9.157a2.497 2.497 0 1 1 0-4.994 2.497 2.497 0 0 1 0 4.994m8.145-7.795h-6.667a6.156 6.156 0 0 0-6.154 6.155v6.667a6.154 6.154 0 0 0 6.154 6.154h6.667A6.154 6.154 0 0 0 24 17.503v-6.667a6.155 6.155 0 0 0-6.154-6.155M3.995 2.339a1.998 1.998 0 1 1-3.996 0 1.998 1.998 0 0 1 3.996 0");
aliases.UserDefined["materialDesign"] = new SvgPath(
"M21,12C21,9.97 20.33,8.09 19,6.38V17.63C20.33,15.97 21,14.09 21,12M17.63,19H6.38C7.06,19.55 7.95,20 9.05,20.41C10.14,20.8 11.13,21 12,21C12.88,21 13.86,20.8 14.95,20.41C16.05,20 16.94,19.55 17.63,19M11,17L7,9V17H11M17,9L13,17H17V9M12,14.53L15.75,7H8.25L12,14.53M17.63,5C15.97,3.67 14.09,3 12,3C9.91,3 8.03,3.67 6.38,5H17.63M5,17.63V6.38C3.67,8.09 3,9.97 3,12C3,14.09 3.67,15.97 5,17.63M23,12C23,15.03 21.94,17.63 19.78,19.78C17.63,21.94 15.03,23 12,23C8.97,23 6.38,21.94 4.22,19.78C2.06,17.63 1,15.03 1,12C1,8.97 2.06,6.38 4.22,4.22C6.38,2.06 8.97,1 12,1C15.03,1 17.63,2.06 19.78,4.22C21.94,6.38 23,8.97 23,12Z");
aliases.UserDefined["css"] = new SvgPath(
"M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z");
});
});