How can I change the color used in my css files from codebehind?

Question

Many of my css files (including bootstrap) use specified colors. I want to be able to change the main colors in one central place (such as the config pages I'm adding).

I have seen that css var's might be a thing soon but are currently not well supported.

Is there a more elegant way I can do this that my current idea of using the css files as templates which I will load with the color config on page load?

Answer 1

You could use LESS instead of CSS to have a variables and much more advantages.

If you combine using LESS with themes separated to different CSS files (as @Thorarins suggested), you'll get more powerful and maintainable.

LESS features:

1) Variables

LESS

@link-color: #CC0000;

a {
    color: @link-color;
}

"compiles" to

CSS

a {
    color: #CC0000;
}

2) Nesting

LESS

.article {
   a {
     text-decoration: underline;
   }

   p {
     margin: .5ex .5em;
   }
}

"compiles" to

CSS

.article a {
  text-decoration: underline;
}

.article p {
  margin: .5ex .5em;
}

3) Mixins

LESS

.box-shadow(@style, @color)
{
  -webkit-box-shadow: @style @color;
  box-shadow:         @style @color;
}

div
{
  .box-shadow(0 0 5px, 30%);
}

"compiles" to

CSS

div {
  -webkit-box-shadow: 0 0 5px 30%;
  box-shadow: 0 0 5px 30%;
}

4) Functions

LESS

@text-color: #000;

.article {
   p {
     color: lighten(@text-color);
   }
}

"compiles" to

CSS

.article p {
  color: #4d4d4d;
}