小编点评

## Improved Theme Switching with Masa Blazor Here's how to achieve a more visually appealing theme switching experience in your existing Blazor project using Masa Blazor: **Step 1: Add the Masa Blazor Template:** 1. Install the `MASA.Templatedotnet` NuGet package: `dotnet add package MASA.Template` 2. Create a new Blazor project with the template: `dotnet new MasaBlazorTemplate --template BlazorTemplate` 3. Open the `Pages/_Host.cshtml` file and paste the provided code within the `` section. **Step 2: Implement the Theme Switching Logic:** 1. In `Shared/MainLayout.razor`, add the following code after the `MAppBar` and `Navigation` components: ```html ``` **Step 3: Define the Theme Transition Animation:** 1. Create a new file `Pages/_Host.cshtml` in the `Pages` folder. 2. Add the following code inside the `body` section: ```html ``` **Step 4: Apply the Animation to the View:** 1. In `Shared/MainLayout.razor`, add the following code within the `@page` directive: ```html ``` **Step 5: Define Page-Specific Styles:** 1. Define different CSS classes for the old and new views, applying appropriate styles to each. 2. You can use the `PageModeClass` variable to determine which view gets rendered based on the page tab selected. **Step 6: Implement Dark Mode Support:** 1. Since Masa Blazor doesn't natively support dark mode, you need to add additional logic to handle the dark theme. 2. Modify the `ClickSwitchTheme` method to toggle `dark` and call `MasaBlazor.ToggleTheme()` accordingly. 3. Ensure that the necessary styles for the dark theme are applied in the `Shared/MainLayout.razor` file. **Additional Tips:** * You can customize the animation speed and easing using the `transition` property within the `view` elements. * Use media queries to adjust the animation properties for different screen sizes and devices. * For a more comprehensive dark theme implementation, refer to open666.cn's demo. By implementing these steps, you can achieve a more visually appealing and responsive theme switching experience in your Blazor project, especially with the added functionality of dark mode support.

正文

如何将现有的Blazor项目的主题切换写的更好看?

在现有的系统当中，我们的主题切换会比较生硬，下面我们将基于Masa Blazor实现好看的扩散主题切换的样式效果。

安装MASA.Template

dotnet new install MASA.Template

创建Masa Blazor项目

打开vs2022

选择server app模板

打开wwwroot/css/site.css

添加一下代码，这个代码是核心样式实现。 animation: clip .5s ease-in;的.5s则是扩散时间。

::view-transition-old(root) {
    animation: none;
}
::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: clip .5s ease-in;
}

@keyframes clip {
    from {
        clip-path: circle(0% at var(--x) var(--y));
    }
    to{
        clip-path: circle(100% at var(--x) var(--y));
    }
}

打开Pages/_Host.cshtml

添加以下代码，请添加到body的内部的最尾部的位置。

    <script>
        window.switchTheme = function (dotNetHelper, x, y) {
            document.documentElement.style.setProperty('--x', x + 'px')
            document.documentElement.style.setProperty('--y', y + 'px')
            document.startViewTransition(() => {
                dotNetHelper.invokeMethodAsync('SwitchTheme');
            });
            
        }
    </script>

这个方法向window添加一个switchTheme的js方法，需要传递调用的实例，x,y则是扩散的开始位置，

然后会创建一个css的变量，这个变量对应到上面的clip里面的var(--x)和var(--y)

打开Shared\MainLayout.razor，修改成以下代码

@inherits LayoutComponentBase
@inject GlobalConfig GlobalConfig
@inject IJSRuntime JsRuntime
@inject MasaBlazor MasaBlazor

<MApp >
    <PPageTabsProvider>
        <CascadingValue Value="GlobalConfig.Culture.Name" Name="CultureName">
            <MAppBar  Elevation=0 App Height="100" Class="default-app-bar mx-6">
                 <div class="default-app-bar__actions @PageModeClass">
                     <Favorite />
                     <MSpacer />
                     <Search />
                     <MIcon Size=20 Class="ml-5" Color="neutral-lighten-3">mdi-message-processing-outline</MIcon>
                     <MIcon Size=20 Class="ml-5" Color="neutral-lighten-3" OnClick="() => _showSetting = true">mdi-cog-outline</MIcon>
                     <Language OnLanguageChanged="OnLanguageChanged" />
                     <MButton OnClick="ClickSwitchTheme">切换</MButton>
                     <Login />
                 </div>
                 <div class="default-app-bar__nav @PageModeClass">
                     @if (_pageTab == PageModes.PageTab)
                    {
                        <PageTabs @ref="_pageTabs" SelfPatterns="@s_selfPatterns" />
                    }
                    else
                    {
                        <Breadcrumb />
                    }
                </div>
            </MAppBar>

            <Navigation />

            <MMain Class="fill-lighten-1">
                <div class="pa-6">
                    @if (_pageTab == PageModes.PageTab)
                    {
                        <PPageContainer PageTabs="@_pageTabs?.PPageTabs" SelfPatterns="@s_selfPatterns">
                            @Body
                        </PPageContainer>
                    }
                    else
                    {
                        @Body
                    }
                </div>
            </MMain>
            <Settings @bind-PageModel="_pageTab" @bind-Show=_showSetting />
        </CascadingValue>
    </PPageTabsProvider>
</MApp>

@code {

    private DotNetObjectReference<MainLayout>? objRef;

    private bool dark = false;

    private static readonly string[] s_selfPatterns =
    {
        "/app/todo"
    };

    private bool? _showSetting;

    private string? _pageTab;

    private PageTabs? _pageTabs;

    private string PageModeClass => _pageTab == PageModes.PageTab ? "page-mode--tab" : "page-mode--breadcrumb";

    protected override void OnInitialized()
    {
        objRef = DotNetObjectReference.Create(this);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await GlobalConfig.InitFromStorage();
        }
    }

    void OnLanguageChanged(CultureInfo culture)
    {
        GlobalConfig.Culture = culture;
    }

    private void ClickSwitchTheme(MouseEventArgs args)
    {
        _ = JsRuntime.InvokeVoidAsync("switchTheme", objRef, args.ClientX, args.ClientY);
    }

    [JSInvokable]
    public void SwitchTheme()
    {
        dark = !dark;
        MasaBlazor.ToggleTheme();
    }

}

在这里我们提供了SwitchTheme用于提供个js调用从而切换主题。

我们在原有的基础上添加了一个按钮，并且这个按钮点击会触发ClickSwitchTheme事件，然后通过JsRuntim调用js的方法，并且将当前实例传递到js，args.ClientX,args.ClientY则是点击的位置，我们会用点击的位置作为扩散的位置。

下面是运行效果，由于Masa Pro并没有适配暗夜效果，所以看的并不明显。如果你想看到更好的效果可以查看open666.cn，

这是使用的简单Demo的效果。

技术交流群：

BlazorQQ群：452761192

来自token的分享。