I have an ASP.NET MVC web application for which I am planning to use Bootstrap (as it is part of the default MVC template). I understand that it is pretty trivial to customise bootstrap to look however I want, and how to override the theme colours by creating my own site.scss file that imports bootstrap.scss after defining overrides for the theme colors:
$theme-colors: (
primary: #123456; // whatever colour I want here
);
@import "bootstrap.scss";
This is then compiled to site.css and served to our clients.
However, our clients need to be able to define their own theme. So if they want blue buttons they get blue buttons, if they want red, they get red. Is there any supported way of doing this with Bootstrap?
I have considered creating a finite set of coloured themes that they can choose from and having a separate .scss file for each of them, then serving the appropriate .css but I would like to make use of the ASP.NET bundling feature, and this is done at application start up so I would have to also have a separate bundle per theme option.
Also, I noticed that when you compile boostrap.scss you get a list of css variables:
:root {
--blue: #007bff;
--indigo: #6610f2;
...
--primary: #123456;
}
And briefly thought that it would make use of these when applying styles throughout, and that I could therefore override from a separate style sheet to set my custom colours. Sadly throughout the rest of the .css file hex codes are used rather than the corresponding css variables. To prove a point I did a find and replace for all the colours listed as css vars and I was able to override them from a subsequent style sheet essentially providing a theme at run time. But this isn't a great solution as it requires editing the compiled css file (which will get over-written frequently during development).
Does any one have any better ideas?
I think you need to use JavaScript or jQuery. When a client changes colour assign that colour to variable and make change in css, using JavaScript or jQuery.