2

I'm working on an application where depending on a class on the HTML element, a different color theme should be applied. We're using postCSS and need to support IE11.

I've tried two different plugins, postcss-custom-properties and postcss-css-variables, which both give similar results....

For example, when given the following input:

:root {
    --color: red;
}
:root.green {
    --color: green;
}

p {
    color: var(--color);
}

postcss-css-variables would produce the following output:

p {
    color: red;
}

But I was hoping for output like this:

p {
    color: red;
}

html.green p {
    color: green;
}

With the actual outcome, I don't think it would be possible to create a color theme that can be switched by toggling a class.

PostCSS solutions for theming seem to focus on producing a theme during build-time. In our application each user can choose its own color theme, and should be able to switch theme without refreshing the page. As such it needs to be a CSS class based solution and all color/class permutations should be in the served CSS.

Is it possible to achieve what I am looking for using postCSS?

(if only we could ditch IE11 support.... then we could just rely on css variables...)

Hendrik
  • 1,505
  • 3
  • 15
  • 20
  • Add IE11 support via a polyfill maybe? https://stackoverflow.com/q/46429937/1427878 – CBroe Jul 17 '18 at 10:30
  • I considered that, but when looking at that polyfill, I decided against it. I looked at the source code and I am convinced this would add a lot of overhead. All rules in all page stylesheets are traversed and parsed.... And we are targeting low end devices :( – Hendrik Jul 17 '18 at 10:36

1 Answers1

0

Not sure if it's a solution for you but you can do this with just css.

$(document).ready(function(){
  $('#red').on('click', function(){
    $('html').removeClass();
    $('html').addClass('red');
  });
  $('#green').on('click', function(){
    $('html').removeClass();
    $('html').addClass('green');
  });
});
html.green p {
    color: green;
}

html p,
html.red p{
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="red">Red</button>
<button id ="green">Green</button>

<p>This is my paragraph</p>
Mark Baijens
  • 13,028
  • 11
  • 47
  • 73
  • Yes I am aware of this. However, I was looking for a solution based on CSS variables. this way we could keep the color-theme css files nice and compact, only containing color definitions. What you are suggesting, is the way I am implementing it now, but it's not ideal. – Hendrik Jul 17 '18 at 10:24