mudblazor / thememanager Goto Github PK

ThemeManager built to showcase MudBlazor theming.

License: MIT License

HTML 42.58% C# 44.62% CSS 0.95% Batchfile 0.41% PowerShell 6.31% Shell 5.14%

thememanager's Introduction

Material Design components for Blazor

MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure. It is perfect for .NET developers who want to rapidly build web applications without having to struggle with CSS and Javascript. MudBlazor, being written entirely in C#, empowers you to adapt, fix or extend the framework. There are plenty of examples in the documentation, which makes understanding and learning MudBlazor very easy.

Documentation & Demo

Why is MudBlazor so successful?

Clean and aesthetic graphic design based on Material Design.
Clear and easy to understand structure.
Good documentation with many examples and source snippets.
All components are written entirely in C#, no JavaScript allowed (except where absolutely necessary).
Users can make beautiful apps without needing CSS (but they can of course use CSS too).
No dependencies on other component libraries, 100% control over components and features.
Stability! We strive for a complete test coverage.
Releases often so developers can get their PRs and fixes in a timely fashion.

Prerequisites

MudBlazor	.NET	Support
1.x.x - 2.0.x	.NET 3.1	Ended 03/2021
5.x.x	.NET 5	Ended 01/2022
6.x.x	.NET 6, .NET 7, .NET 8	✔️
7.x.x	.NET 7, .NET 8	✔️

ℹ️ Currently only interactive rendering modes are supported - Learn more.

⚠️ Blazor only supports current browser versions. To ensure a seamless experience with MudBlazor, please use an up-to-date web browser. If a browser version is no longer maintained by its publisher, we cannot guarantee compatibility with MudBlazor.

Stats

Contributing

👋 Thanks for wanting to contribute!
Contributions from the community are what makes MudBlazor successful.

If you are familiar with technologies like C#, Blazor, JavaScript, or CSS, and wish to give something back, please consider submitting a pull request! We try to merge all non-breaking bugfixes and will deliberate the value of new features for the community. Please note there is no guarantee your PR will be merged, so if you want to be sure before investing the work, feel free to contact the team first.

Check out the contribution guidelines to understand our goals and learn more about the internals of the project.

Getting Started

Full installation instructions can be found on our website.
Alternatively use one of our templates from the MudBlazor.Templates repo.

Quick Installation Guide

Install Package

dotnet add package MudBlazor

Add the following to _Imports.razor

@using MudBlazor

Add the following to the MainLayout.razor or App.razor

<MudThemeProvider/>
<MudPopoverProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

Add the following to index.html (client-side) or _Host.cshtml (server-side) in the head

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Add the following to index.html or _Host.cshtml in the body

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Add the following to the relevant sections of Program.cs

using MudBlazor.Services;

builder.Services.AddMudServices();

Usage

<MudText Typo="Typo.h6">MudBlazor is @Text</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ButtonOnClick">@ButtonText</MudButton>

@code {
  public string Text { get; set; } = "????";
  public string ButtonText { get; set; } = "Click Me";
  public int ButtonClicked { get; set; }

  void ButtonOnClick()
  {
      ButtonClicked += 1;
      Text = $"Awesome x {ButtonClicked}";
      ButtonText = "Click Me Again";
  }
}

thememanager's People

Contributors

Stargazers

Watchers

thememanager's Issues

Error compiling MudBlazor.ThemeManager.App

I get follow exception in VS 2022 what can I do?

error MSB3073: The command "sass Styles:wwwroot/ --style compressed --load-path=Styles --update" exited with code 9009.

Field Not Found

Using an out of the box barebones MudBlazor setup and following the readme for ThemeManager.

MudBlazor, Version=6.0.6.0
Installed using dotnet add package

I get the following error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Field not found: .Material.Outlined Due to: Could not parse field signature 0a000069 due to: Could not resolve type with token 01000054 from typeref (expected class 'MudBlazor.Outlined' in assembly 'MudBlazor, Version=6.0.6.0, Culture=neutral, PublicKeyToken=null') assembly:MudBlazor, Version=6.0.6.0, Culture=neutral, PublicKeyToken=null type:MudBlazor.Outlined member:(null) System.MissingFieldException: Field not found: .Material.Outlined Due to: Could not parse field signature 0a000069 due to: Could not resolve type with token 01000054 from typeref (expected class 'MudBlazor.Outlined' in assembly 'MudBlazor, Version=6.0.6.0, Culture=neutral, PublicKeyToken=null') assembly:MudBlazor, Version=6.0.6.0, Culture=neutral, PublicKeyToken=null type:MudBlazor.Outlined member:(null) at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException) window.Module.s.printErr @ blazor.webassembly.js:1 bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 ()

Background of drawer doesn't match theme

Big issue is that in a "Dark mode" the drawer background stays white and ends up hiding some of the drop downs.

Otherwise, great tool!

README.md points to the wrong file to add href attributes

In .NET 6.0 (server) HTML href attributes are no longer in _Host.cshtml, but in _Layout.cshtml.

Create Multiple Theme and Use as per user requirement

Hi Team, how can we create multiple predefined theme and can load in theme manager when user select in dropdwown or their profile?

Is ThemeManager Broken in version 7? MissingMethodException: Method not found: 'MudBlazor.Palette MudBlazor.MudTheme.get_Palette()'.

I'm using

MudBlazor v7 preview 4
MudBlazor.ThemeManager1.1.0

When running my application I recieve the following exception.

MissingMethodException: Method not found: 'MudBlazor.Palette MudBlazor.MudTheme.get_Palette()'.

Question
Is this a problem with version 7 where they changed "Palette" to "LightPallet" to match the "DarkPallet" naming scheme?

Thanks In Advance

Save theme

When I have created a theme with the ThemeManager, how can I save it to?
add it as a MudTheme in my project?

best regards Ingo

add new css root variable as mud attribute

Hi i'm going to add some property attributes to mud palette so I created new class as you can see in the picture:

and then I used that in PresetThemes.cs class like this

Now as a result I can see my property in c# code but I can't use it as a CSS variable like this var(--mud-palette-ForegroundColor).
How can i solve this problem?

Dark Mode

Hi! This is a really helpful productivity component, thank you!

I was looking for a way to use this component for configuring the DarkPalette of the theme as well.
Perhaps it's already supported and I just didn't see it, but if it's not implemented yet, perhaps there's a way for the component to automatically update its color controls based on the theme manager's IsDarkMode value?

When first opening the project getting an error about NPM

When i try to open project after than build the library project, i'm getting about like this
"sass Styles:wwwroot/ --style compressed --load-path=Styles --update" exited with code 9009

You can fix it with install sass with npm following steps

run following command in your ThemeManager folder (not ThemeManager.App)
npm install -g sass

Instructions to get started don't work.

Add the components in your MainLayout.razor and inside

    <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
    <MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />

The components can't be found.

Error when upgrade MudBlazor to v 5.1.0

Using MudBlazor.MudThemeManager 1.0.3 when upgrade MudBlazor from 5.0.15 to v 5.1.0

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Method not found: string MudBlazor.Palette.get_Primary()
System.MissingMethodException: Method not found: string MudBlazor.Palette.get_Primary()
at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at MudBlazor.MudExpansionPanel.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

MudBlazorThemeManager.css is overriding the color and the background-color of all .mud-input elements

MudBlazor.ThemeManager version: 1.0.7

The staticwebassets/MudBlazorThemeManager.css that is packaged in the MudBlazor.ThemeManager Nuget package version 1.0.7 contains the following rule which is applied to all the .mud-input elements.

.mud-thememanager-color-picker .mud-paper, .mud-input {
    color: #424242;
    background-color: #FFFFFF;
}

Source: https://nuget.info/packages/MudBlazor.ThemeManager/1.0.7

However, I think the intent is to only apply it to descendants of .mud-thememanager-color-picker elements.

I believe that it's the CSS that is packaged in the Nuget package that is wrong; because when I locally build the ThemeManager, sass generates the correct CSS:

.mud-theme-manager-color-picker .mud-paper, .mud-theme-manager-color-picker .mud-input {
    color: #424242;
    background-color: #fff
}

Any input while in dark mode UI breaks when autofilled

Basically, when you autofill an input it will change the background to white for that input while in dark mode.

I added the following code to my style.css and it fixed the issue, but just wanted to share. I am not sure if I used the right variables, but it was tested with default theme and dark theme.

Keep in mind this will only fix single line autocomplete, since I am using 50px. Also, maybe use a different color so the user knows what fields were autofilled.

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px var(--mud-palette-surface) inset;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
}

//*** Credit to the original author who suggested that using the box shadow would fix the problem.
https://stackoverflow.com/questions/58263122/google-chrome-autofill-background-color-change

Color pickers not working

When i try to change colors in color pickers or change the RGB textbox, It doesn't change the color, Other settings work except colors.
My NuGet versions :

Color picker keep show up

The color picker not hidden after color selected: (.Net 8)

@using MudBlazor.ThemeManager
@inherits LayoutComponentBase

<MudThemeProvider Theme="_themeManager.Theme" />
<MudDialogProvider />
<MudSnackbarProvider />
<MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
<MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />
<MudDrawer @bind-Open="_themeManagerOpen" ClipMode="_themeManager.DrawerClipMode" Elevation="_themeManager.DrawerElevation"></MudDrawer>

<MudLayout>
    <MudAppBar Elevation="_themeManager.AppBarElevation">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="mt-16 pa-4">
        @Body
    </MudMainContent>
</MudLayout>



@code {

    private ThemeManagerTheme _themeManager = new ThemeManagerTheme();
    public bool _themeManagerOpen = false;

    void OpenThemeManager(bool value)
    {
        _themeManagerOpen = value;
    }

    void UpdateTheme(ThemeManagerTheme value)
    {
        _themeManager = value;
        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        StateHasChanged();
    }

    private bool _drawerOpen = true;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}