4
respostas

[Bug] Implementar tema personalizado

Não estou conseguindo implementar o tema personalizado. Fiz todas as alterações do "mão na massa", mas o visual studio retorna um erro no componente MainLayout.razor.

@inherits LayoutComponentBase

<MudThemeProvider Theme="currentTheme"/>
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Color="Color.Surface" Fixed="true" Elevation="2">
        <MudImage Src="images/screensound-logo.png"></MudImage>
    </MudAppBar>
    <MudDrawer Open="true" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu></NavMenu>
    </MudDrawer>
    <MudMainContent class="main-content pa-10">
        @Body
    </MudMainContent>
</MudLayout>

@code {
    private MudTheme currentTheme = new MudTheme()
        {
            Palette = ScreensoundPallete.CreatePallete
        };
}

A mensagem de erro diz que "MudTheme" não contém uma definição para "Palette". Testei também com a propriedade "PaletteDark" mas não houve alterações na página.

4 respostas

Consegui resolver adicionando a propriedade IsDarkMode com o valor true para o componente MudThemeProvider. Antes a página estava sendo renderizada assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Depois da alteração ficou assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O código do MainLayout:

@inherits LayoutComponentBase

<MudThemeProvider IsDarkMode="true" Theme="currentTheme"/>
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Color="Color.Surface" Fixed="true" Elevation="2">
        <MudImage Src="images/screensound-logo.png"></MudImage>
    </MudAppBar>
    <MudDrawer Open="true" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu></NavMenu>
    </MudDrawer>
    <MudMainContent class="main-content pa-10">
        @Body
    </MudMainContent>
</MudLayout>

@code {
    private MudTheme currentTheme = new MudTheme()
        {
            PaletteDark = ScreensoundPallete.CreatePallete
        };
}

Olá, Víctor. Tudo bem?

Parabéns por conseguir resolver o problema! É ótimo ver que você conseguiu ajustar o tema personalizado ao adicionar a propriedade IsDarkMode="true" e utilizar PaletteDark. Essa abordagem realmente faz a diferença na experiência do usuário ao trabalhar com temas em aplicações Blazor.

Continue assim, com essa dedicação.

Qualquer dúvida manda aqui.

Bons estudos.

Tive o mesmo problema, ok que consegui resolver mudando para o darkmode mas por q está para colocar como Pallete no MudTheme se não existe essa definição? talvez tenha mudado devido a alguma atualização, mas seria interessante avisar aos alunos.

Bom dia Victor,

Muito obrigado pela contribuição, foi de grande valia e sua dica já foi incorporada na resolução da atividade.

Continue focado e bons estudos!