Utilize .NET MAUI Blazor's customizable light and dark themes by loading unique stylesheets through the headcontent feature

Question

Utilize .NET MAUI Blazor's customizable light and dark themes by loading unique stylesheets through the headcontent feature

I am currently working on a .net MAUI Blazor Hybrid app and I am looking to create both a dark and light theme using CSS stylesheets, without relying on MudBlazor.

My approach involves using two separate CSS files, lightMode.css and darkMode.css, each containing the appropriate color schemes for their respective themes. The goal is to have the MainLayout, and subsequently all pages, switch to using the darkMode.css when dark mode is activated.

For example, within MainLayout.razor:


<HeadContent>
    @if (isDark)
    {
        <link href="css/darkMode.css" rel="stylesheet"/>
    }
    else
    {
        <link href="css/lightMode.css" rel="stylesheet"/>
    }   
</HeadContent>

// HTML and C# code here

However, I am facing an issue where the HeadContent is not being placed within the head tag of the page. Even when directly added to the index.html page, only the last stylesheet mentioned seems to take effect.

I have searched for alternative solutions, but most do not mention how to achieve this using CSS, unlike the approach I am trying to implement. References like the following post have not provided the specific guidance I need: Light and dark theme for my Maui Blazor app

Any advice on how I can successfully implement a dark/light theme switch using CSS? I am open to other ideas as well, though this method seems the most straightforward to me.

Thank you in advance for your help.

css .net-core blazor maui maui-blazor

Answer 1

Answer №1

My approach ended up being slightly different since I faced issues with HeadContent not functioning properly after removing the Bootstrap components to customize the styling completely.

Instead, I decided to follow a revised version of another solution provided by @benjamin on Stack Overflow: . I opted not to manipulate the HTML elements by adding or removing classes.

My method involved directly accessing the <head> element and the stylesheet <link> containing the theme CSS file using HTML and JavaScript manipulators to switch between light and dark themes based on the toggle.

Allow me to elaborate further on the implementation:

Here's a snippet of my code: In the MainLayour.razor class, I included this simple line to handle the theme switching:

<ElementManipulator IsDarkTheme="_isDark"></ElementManipulator>

The _isDark variable is determined by a basic toggle button.

The functionality is contained within the ElementManipulator.razor class:

@inject IJSRuntime JSRuntime

@code {

    protected override async Task OnParametersSetAsync()
    {
        if (IsDarkTheme is not null)
            await JSRuntime.InvokeVoidAsync("toggleThemeStyleSheet", IsDarkTheme);
    }

    [Parameter]
    public bool? IsDarkTheme { get; set; }
}

This code triggers the toggleThemeStyleSheet function in the JavaScript file ElementManipulator.js:

var getHeadElement = function () {
    return document.getElementsByTagName("head")[0];
};

var toggleThemeStyleSheet = function (isDarkTheme) {
    let themeLink = getHeadElement().getElementsByClassName("theme")[0];
    let theme = isDarkTheme ? "darkTheme.css" : "lightTheme.css";
    themeLink.href = "_content/MyProject.UI/css/" + theme;
};

This setup facilitates the seamless swap between the lightTheme.css and darkTheme.css stylesheets.

Answer 2

My approach ended up being slightly different since I faced issues with HeadContent not functioning properly after removing the Bootstrap components to customize the styling completely.

Instead, I decided to follow a revised version of another solution provided by @benjamin on Stack Overflow: . I opted not to manipulate the HTML elements by adding or removing classes.

My method involved directly accessing the <head> element and the stylesheet <link> containing the theme CSS file using HTML and JavaScript manipulators to switch between light and dark themes based on the toggle.

Allow me to elaborate further on the implementation:

Here's a snippet of my code: In the MainLayour.razor class, I included this simple line to handle the theme switching:

<ElementManipulator IsDarkTheme="_isDark"></ElementManipulator>

The _isDark variable is determined by a basic toggle button.

The functionality is contained within the ElementManipulator.razor class:

@inject IJSRuntime JSRuntime

@code {

    protected override async Task OnParametersSetAsync()
    {
        if (IsDarkTheme is not null)
            await JSRuntime.InvokeVoidAsync("toggleThemeStyleSheet", IsDarkTheme);
    }

    [Parameter]
    public bool? IsDarkTheme { get; set; }
}

This code triggers the toggleThemeStyleSheet function in the JavaScript file ElementManipulator.js:

var getHeadElement = function () {
    return document.getElementsByTagName("head")[0];
};

var toggleThemeStyleSheet = function (isDarkTheme) {
    let themeLink = getHeadElement().getElementsByClassName("theme")[0];
    let theme = isDarkTheme ? "darkTheme.css" : "lightTheme.css";
    themeLink.href = "_content/MyProject.UI/css/" + theme;
};

This setup facilitates the seamless swap between the lightTheme.css and darkTheme.css stylesheets.

Utilize .NET MAUI Blazor's customizable light and dark themes by loading unique stylesheets through the headcontent feature

Answer №1

Similar questions

jQuery width property does not seem to be functional on menus that do not contain any dropdown

Switch picture when hovering over button image

Exploring the growth of CSS offsetting alongside with AngularJS

Implementing a Radial Cursor with a Custom Background Image in JavaScript

Enhance the aesthetics of placeholder text in Semantic UI React using CSS styling

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Position the two input boxes next to each other

Bootstrap 4's Img-fluid class fails to properly resize images

Adjust the size of the input field as text is being typed in

Footer div is being covered by the page

Adjusting Screen Size for Lottie Animation in React.js

Data displayed in a table-like format

The code functions perfectly on JSfiddle, but for some reason it halts when implemented on

Tips for handling the !important declaration when creating a customized bootstrap theme

Lines that are next to each other within an svg path and have a stroke

Ensure that the width of the inner table matches the width of its contents within an overflowing div

What causes the empty gap between the accordion title and its content in Bootstrap?

Keep moving the box back and forth by pressing the left and right buttons continuously

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?