-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How do I modify the default theme of Ant Blazor? #2641
Comments
Hi @true-perfect-code , you can use dark/compact/aliyun theme by change the css file |
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 |
Here is all the variables defined: https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/style/themes/variable.less |
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 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? |
Do you mean that we need to publish the LESS file as well? |
We probably don't understand each other, sorry. I'll start from the beginning: 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 |
Isn't this related to #2730 ? |
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. |
What I don't understand is that nobody wants to change the default blue color of the ANT components in their own projects? |
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? |
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. |
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. @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. |
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 { .ant-btn-primary:hover { I know this is bit clumsy idea, but at-least you have the control over it |
Before the v5 is ready (#3574), also need to link the ant-design-blazor.variables.css and change the css variables. |
@ksrajath7 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 |
Hi @ksrajath7 I only have a few ant components in this example, but you can of course extend them here. I proceed as follows:
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.
|
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
The text was updated successfully, but these errors were encountered: