How do I modify the default theme of Ant Blazor?

[true-perfect-code]

There is exactly this question on the AntBlazor page and an answer to it:

How do I modify the default theme of Ant Design?
See: https://ant.design/docs/react/customize-theme .

But if you open the link, you get to the AntDesign page. The instructions there can not be applied to Blazor.

Is there another tutorial written specifically for Blazor? A tutorial that explains how to change the basic colors of controls in AntBlazor via CSS?

Thanks

[ElderJames]

Hi @true-perfect-code , you can use dark/compact/aliyun theme by change the css file ant-design-blazor.{theme}.css, or build your own css with less variable #31 (comment), or use css variable that we have supported in version 0.12.0.

[true-perfect-code]

Thanks ElderJames,

but can you please specify in which blazor file the LESS variables are located?

I know both CSS and LESS (e.g. from ShopWare E-Commerc), but as far as I can remember, LESS file was exactly specified there (in ShopWare) and you only had to open it and set the variables again. Here it is a bit confusing, because you read in many places which LESS variables you can change in Ant-Blazor, but not where the LESS file is located in Blazor.

I assume that the appearance of each ANT element can also be done via style, but it is much easier to do these style adjustments via LESS variables. Unfortunately I couldn't figure out how to do that until now and that's why I asked.

Thanks
perfect-code

[ElderJames]

Here is all the variables defined: https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/style/themes/variable.less

[true-perfect-code]

Alright, but where do I find this file in a Blazor server (or WebAssembly) project ?

For example, I looked in the wwwroot directory, but I can only find the css, images and js directories there.

I also checked all other directories but I don't find anywhere this file variable.less in my Blazor-Server project!

Finally I also searched the compiled publish directory but there I only find site.css or bootstrap (which is also strange because I would have expected a directory ANT or similar)!

Thanks
perfect-code

EDIT: Or should I generate my own file variable.less? And if so, where should I put that so that the file is read in correctly from the Blazor project and the ANT LESS is overwritten with it?

[ElderJames]

Do you mean that we need to publish the LESS file as well?

[true-perfect-code]

We probably don't understand each other, sorry.

I'll start from the beginning:
If I installed the Ant-Blazor component via NUGET, I thought that I could then do the style customization on all Ant controls (buttons, combo boxes, etc.) very easily in one central place.
Of course you can currently do this in site.css by overriding the css classes, but not for Ant-Components because of LESS variables.

The problem with Ant-Blazor is that everything goes through LESS (which is certainly much better than using CSS because you have variables). Now the question is how to change the basic styles (button colors, etc.) after the NUGET installation of Ant-Blazor quickly in one central place?

I can't find any directory in my Blazor server project that is named with Ant and where any settings or LESS file is located.

So I wonder how to proceed if I want to change the nice blue color of all controls? It must be possible to do this in a central place in my Blazor server project instead of using the style property for each button, right?

thanks
pc

[Postlagerkarte]

Isn't this related to #2730 ?

[mkalinski93]

I´ve looked into #2730, but if I was checking it correctly, then there´s no .less file on my end.

looked into bin, obj & wwwroot folder to find it somewhere, but no luck. The only path I can find it is the nuget folder.

[true-perfect-code]

What I don't understand is that nobody wants to change the default blue color of the ANT components in their own projects?

[Postlagerkarte]

Think you are mistaken - everyone wants that 😄 However, V5 no longer uses less but css-in-js. Thus, I expect this will be the way forward. Awesome guidelines on themes with V5 & React https://ant.design/docs/react/customize-theme - Maybe @ElderJames can share a bit more information about what to expect on the Blazor side?

[ElderJames]

With v5, we are looking at how to achieve this completely subversive implementation #2870 .

Until 1.0 release, we still follow the 4.x styles. The best way to custom theme is build the style by your self. Or cover the global style.
Maybe I will try to write a tutorial on our documentation.

[mkalinski93]

I´ve changed the variables.less file in my .nuget folder

@{html-selector} {
  @base-primary: @red-6;

  // ========= Primary Color =========
  --@{ant-prefix}-primary-color: @base-primary;
  --@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `);
  --@{ant-prefix}-primary-color-active: color(~`colorPalette('@{base-primary}', 7) `);
  --@{ant-prefix}-primary-color-outline: fade(@base-primary, @outline-fade);

instead of blue-6, I changed it to red-6.
I´ve rebuilded, used nuget restore and uninstalled/reinstalled the nuget package, but I was not able to change the theme style to the red-6 color.

@ElderJames can you please give me a hint how to change the primary color?

Also, I´ve tried the AntBlazor.Pro Layout, but it seems that it also doesn´t append the selected color in the appsettings.
Although it highlights the selected color in the theme designer, but still, the color remains default until you select the color again.

[ksrajath7]

Hi @true-perfect-code I understand your sentiment. I have encountered situations similar to the one you find yourself in right now. What I have done is that I simply override the class names with my own custom CSS design, and it works for me.

For e.g.: for overriding the primary button style I use:

.ant-btn-primary {
background: red;
border-radius: 100px;
}

.ant-btn-primary:hover {
background: brown;
border-radius: 100px;
}

I know this is bit clumsy idea, but at-least you have the control over it

[ElderJames]

Before the v5 is ready (#3574), also need to link the ant-design-blazor.variables.css and change the css variables.

[true-perfect-code]

@ksrajath7
This is in no way a "clumsy idea", that's how I do it now at the end. But I have done the whole thing a little differently by creating a less file in VS2022. This allows me to change the whole style in my Blazor + MAUI Blazor very quickly and easily.

Thanks in any case for the suggestion

[ksrajath7]

@ksrajath7 This is in no way a "clumsy idea", that's how I do it now at the end. But I have done the whole thing a little differently by creating a less file in VS2022. This allows me to change the whole style in my Blazor + MAUI Blazor very quickly and easily.

Thanks in any case for the suggestion

@true-perfect-code Do you have any examples of the code you done in this case, I would love to take a look at your implementation and do same for my use cases as well. Thanks in advance

[true-perfect-code]

Hi @ksrajath7

I only have a few ant components in this example, but you can of course extend them here.

I proceed as follows:

1. first I determine a colour palette
2. then I add the colours to the LESS file
3. then I convert them to CSS
4. ...and insert them into e.g. site.css under wwwroot.

The advantage here is that you can quickly change the colours from project to project (but also within a project). Of course, you have to update the LESS file, otherwise it won't work.

There are still ways to use LESS directly via Nuget, but I got away from it for several reasons, because I also use MAUI Blazor together with Blazor Web via RCL.

Hope this helps you.
pc

/* https://lesscss.org/less-preview */
/* https://www.w3schools.com/colors/colors_monochromatic.asp */

// Color variables (appears count calculates by raw css)
@color0: #1c1e26; // Dunkel
@color1: #445279; // Medium
@color2: #ffffff; //
@color3: #65759F; // Hell
@radius: 30px;


.ant-switch-checked {
    background-color: @color0 !important;

    &:focus {
        box-shadow: 0 0 0 2px @color3 !important;
    }
}

.ant-modal-content {
    border-radius: @radius !important;
}

.ant-modal-header {
    border-radius: @radius !important;
}

.ant-btn {
    border-radius: @radius !important;

    &:active {
        border-radius: @radius !important;
    }

    &:focus {
        background: @color1 !important;
        border-color: @color1 !important;
        border-radius: @radius !important;
        color: @color2 !important;
    }

    &:hover {
        background: @color1 !important;
        border-color: @color1 !important;
        color: @color2 !important;
    }
}

a {
    &:hover {
        color: @color3 !important;
    }
}

.ant-btn-link {
    &:hover {
        background: transparent !important;
    }
}

.ant-checkbox-checked {
    .ant-checkbox-inner {
        background-color: @color0 !important;
        border-color: @color0 !important;
    }
}

.ant-form-item {
    margin-bottom: 10px !important;
}

.ant-picker {
    margin-bottom: 10px !important;
}

.ant-input {
    &:hover {
        border-color: @color0 !important;
    }
}

.ant-radio-button-wrapper-checked {
    &:not(.ant-radio-button-wrapper-disabled) {
        color: @color3 !important;

        first-child {
            border-color: @color0 !important;
            border: 2px solid @color0 !important;
        }
    }
}

.ant-modal-close {
    display: none !important;
}

.ant-radio-button-wrapper {
    &:first-child {
        last-child {
            border-radius: @radius !important;
        }
    }
}

.ant-btn-primary {
    background: @color0 !important;
    border-color: @color0 !important;
    border-radius: @radius !important;
    color: @color2 !important;

    &:hover {
        background: @color1 !important;
        border-color: @color1 !important;
    }

    &:focus {
        background: @color1 !important;
        border-color: @color1 !important;
    }
}

.ant-select {
    &:not(.ant-select-disabled) {
        hover {
            .ant-select-selector {
                border-color: @color0 !important;
            }
        }
    }

    &:not(.ant-select-customize-input) {
        .ant-select-selector {
            border-color: @color0 !important;
            border-radius: @radius !important;
            border: 1px solid @color0 !important;
        }
    }
}

.ant-select-item-option-selected {
    &:not(.ant-select-item-option-disabled) {
        background-color: @color0 !important;
        color: @color2 !important;
    }
}

.ant-select-focused {
    &:not(.ant-select-disabled) {
        .ant-select {
            &:not(.ant-select-customize-input) {
                .ant-select-selector {
                    border-color: @color0 !important;
                }
            }
        }
    }
}