Dark Mode

[michele-bettin]

Guys, I'm trying to implement the dark mode on my web app with blazorise and it is such a pain...
For example I'm trying to implement it in a Datagrid component with popup and certain part seems impossible to change the color...
For example the one highlighted

and the modal background and the input of the modal

Another point I would like to discuss is: for implementing dark mode is it a correct approach to create a dropdown on the top menu for light mode and dark mode and manually modify the theme color with two method like this:

async Task LightMode()
{
    if (Theme != null &&
        JSRuntime != null)
    {
        Theme.ColorOptions.Primary = "#0288D1";
        Theme.ColorOptions.Secondary = "#A65529";
        Theme.ColorOptions.Success = "#23C02E";
        Theme.ColorOptions.Info = "#9BD8FE";
        Theme.ColorOptions.Warning = "#F8B86C";
        Theme.ColorOptions.Danger = "#F95741";
        Theme.ColorOptions.Light = "#F0F0F0";
        Theme.ColorOptions.Dark = "#535353";


        Theme.BackgroundOptions.Primary = "#0288D1";
        Theme.BackgroundOptions.Secondary = "#A65529";
        Theme.BackgroundOptions.Success = "#23C02E";
        Theme.BackgroundOptions.Info = "#9BD8FE";
        Theme.BackgroundOptions.Warning = "#F8B86C";
        Theme.BackgroundOptions.Danger = "#F95741";
        Theme.BackgroundOptions.Light = "#F0F0F0";
        Theme.BackgroundOptions.Dark = "#535353";

        Theme.InputOptions.CheckColor = "#0288D1";

        Theme.TextColorOptions.Dark = "#3f4d62";
        Theme.BackgroundOptions.Body = "#FFFFFF";

        FunzioniStaticheDiUtility.ImpostaTemaChiaro(JSRuntime);
        await InvokeAsync(Theme.ThemeHasChanged);
    }


}

/// <summary>
/// 
/// </summary>
async Task DarkMode()
{
    if (Theme != null &&
        JSRuntime != null)
    {
        Theme.ColorOptions.Primary = "#01579B";
        Theme.ColorOptions.Secondary = "#a3a3a3";
        Theme.ColorOptions.Success = "#1CAE24";
        Theme.ColorOptions.Info = "#6A93C8";
        Theme.ColorOptions.Warning = "#DAA739";
        Theme.ColorOptions.Danger = "#D2321C";
        Theme.ColorOptions.Light = "#F0F0F0"; // Testo chiaro
        Theme.ColorOptions.Dark = "#000000";  // Sfondo nero

        Theme.BackgroundOptions.Primary = "#000000";  // Sfondo nero
        Theme.BackgroundOptions.Secondary = "#7a7a7a";
        Theme.BackgroundOptions.Success = "#1CAE24";
        Theme.BackgroundOptions.Info = "#6A93C8";
        Theme.BackgroundOptions.Warning = "#DAA739";
        Theme.BackgroundOptions.Danger = "#D2321C";
        Theme.BackgroundOptions.Light = "#949292"; // Per header card
        Theme.BackgroundOptions.Dark = "#000000";  // Sfondo nero

        Theme.InputOptions.CheckColor = "#01579B";

        Theme.TextColorOptions.Secondary = "#FFFFFF";
        Theme.TextColorOptions.Dark = "#FFFFFF";
        Theme.BackgroundOptions.Body = "#3e3d3d";

        Theme.BodyOptions.BackgroundColor = "3e3d3d";
        Theme.InputOptions.

        FunzioniStaticheDiUtility.ImpostaTemaScuro(JSRuntime);
        await InvokeAsync(Theme.ThemeHasChanged);
    }

}

Thanks in advance for anyone who replies to me <3. @David-Moreira @stsrki

[stsrki]

With our current Blazorise theming system, we're mostly doing the color variants of the component, like primary, secondary, danger, etc. TO be able to support we would have to introduce some more Theme options for Background and TextColors. And they would have to be defined on Modal, Body, Input, and other options. YOu can open a new issue so we can start planning it for the future milestone.

In the meantime, it's best to just implement custom CSS in places where darker backgrounds is needed.

[michele-bettin]

@stsrki how can I implement custom CSS for dark mode that render only if the user choose the dark mode?? Please suggest me a way of working because I don't get it...
For example it would be sufficient to be able to add bg-dark bootstrap class to the elements that have the class modal-header, modal-body, modal-footer...

[michele-bettin]

@stsrki

You says: > YOu can open a new issue so we can start planning it for the future milestone
Is there a way where I can freely contribute to Blazorise and propose my changes or It is a project where only few people work with?

[stsrki]

Is there a way where I can freely contribute to Blazorise and propose my changes or It is a project where only few people work with?

We're always open for contribution. But if you feel the task is too much for, just open the new issue and we can proceed.

how can I implement custom CSS for dark mode that render only if the user choose the dark mode?? Please suggest me a way of working because I don't get it...
For example it would be sufficient to be able to add bg-dark bootstrap class to the elements that have the class modal-header, modal-body, modal-footer...

🤔 You could toggle class name on <body> element. eg, <body class="dark-theme">. Then you could use it to specifically target dark theme colors

.dark-theme .modal-content{
  background-color: #2c2c2c;
  color: white;
}

[michele-bettin]

@stsrki I don't get it... If a put a dark-theme class on my body component... Then how can I modify the background color of every element on html that has the class modal-content?
I need something like this:

.dark-theme .modal-content{
  background-color: #2c2c2c;
  color: white;
}

but also be able to remove the .dark-theme class when the user is in light mode...
Excuse me for my not understanding...