I've seen some other posts asking about how to change the branding for individual Tenants. I'm not sure if this is the best place to post this, but over the past 2 days I have been looking into and working on changing themes for ASP.NET Core + Angular v6.5. I might have a solution that will work for some people.
I created a tool that programatically edits the Default theme's CSS files by comparing two different included themes (Default and Pink, for example) and determining which colors are shared and which colors are unique between the two. The CSS that is output works based on CSS variables (https://www.w3schools.com/css/css3_variables.asp). This means that there is a only a single place that colors are defined. With this system, Tenants can upload a CSS document that contains updated variable definitions to reflect their primary branding color. These updated variables overwrite the original variables that the tool outputs, so the web page uses the Tenant colors instead of whatever default color you use.
The tool will generate the entire theme (similar to the Metronic Theme Changer here https://github.com/aspnetzero/metronic, but it doesn't require any new scss to be compiled via Gulp. The outputed Default theme contains the variable references needed to implement branding for individual Tenants. As mentioned, Tenants can change their colors if they upload a CSS document with overriding variable definitions.
I think this is the solution I am going to use. As far as I know, the "official" method might require creating a new theme for every Tenant and baking it directly into the application by default. I could be wrong and there might be a better way to do things. Either way, this was an interesting project to work on for a few days.
You can find the source code (C#) here: https://github.com/Connor14/CSSThemeHelper. Feel free to contribute where you see fit. The tool doesn't minify the css and it doesn't output a dedicated tenant CSS document without overwriting the output files that you specify. It also doesn't consolidate the large number of colors that there are. I have found 62 colors, but I think I forgot to include a CSS file from somewhere. The Metronic Theme Changer project provided by ASP.NET Zero has 69 colors listed and the files that I am pulling from only contained 62.
I hope this helps someone!
6 Answer(s)
-
0
@cyklussoftware
I know the count of the colors are too much but since we are using Metronic, we need to do it like this.
-
0
@ismcagdas
I wasn't trying to complain about the number of colors. I was just saying that my tool doesn't consolidate colors that are very similar in color value. I played around with consolidating colors based on the HSV color space, but the version I put on GitHub doesn't do that. It is a potential improvement for my tool.
I wanted to post here to let people know that I made a tool that helped me with my Tenant Custom CSS problem. I am hoping that someone else might find it useful.
-
0
@cyklussoftware
Thanks, I think many people will find it usefuly :)
-
0
Any more updates or progress or ideas or future plans on custom branding/themes? Thanks.
-
0
@chauey We pushed custom branding futher back in our backlog, so I haven't worked on this tool for a while. I think the biggest thing it needs is a way to export a tenant-specific CSS file for them to upload.
Feel free to expand or even rewrite the existing logic.
-
0
More help/ease on tenent-specific CSS file to upload sounds nice. Maybe edit/preview in real-time like stackblitz.
