How to create a CSS color theme solution based on HTML class using postCSS

Question

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...)

Add IE11 support via a polyfill maybe? stackoverflow.com/q/46429937/1427878 — C3roe
– C3roe, Commented Jul 17, 2018 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
– Hendrik, Commented Jul 17, 2018 at 10:36

Mark Baijens · Accepted Answer · 2018-07-17 10:49:41Z

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>

edited Jul 17, 2018 at 10:49

answered Jul 17, 2018 at 10:20

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hendrik Over a year ago

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.

Collectives™ on Stack Overflow

How to create a CSS color theme solution based on HTML class using postCSS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related