Skip to content

How to do "theming" with ACSS? #434

Answered by thierryk
thierryk asked this question in Q&A
Discussion options

You must be logged in to vote

For theming, it is best to leverage custom properties (aka CSS variables) and that's really easy to do with Atomizer.

In the config:

{
  "custom": {
    "primaryColor": "var(--primaryColor)",
    "secondaryColor": "var(--secondaryColor)"
  }
}

In the markup:

<div class="C(primaryColor) Bgc(secondaryColor)">...</div>

In a CSS file or <style> block we set default values:

:root {
  --primaryColor: teal;
  --secondaryColor: indianred;  
}

We can then use JavaScript to apply new values:

<body style="--primaryColor:aliceblue;--secondaryColor:bisque;">

Et voilà!

In short, the idea is to not set hard-coded color values through ACSS, but rather relying on (CSS) variables alone.

Replies: 2 comments 7 replies

Comment options

thierryk
Jan 25, 2021
Maintainer Author

You must be logged in to vote
6 replies
@thierryk
Comment options

thierryk Jul 14, 2022
Maintainer Author

@redonkulus
Comment options

@thierryk
Comment options

thierryk Jul 15, 2022
Maintainer Author

@redonkulus
Comment options

@redonkulus
Comment options

Answer selected by thierryk
Comment options

You must be logged in to vote
1 reply
@thierryk
Comment options

thierryk Jul 29, 2022
Maintainer Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
3 participants