-
How to do "theming" with ACSS?Question from @jitendravyas via GitterAtomizer config is not able to do this: {
"custom": {
"Color-red": "#FF0000",
"Danger": "Color-red"
}
} I think real time themeable website is not possible with Atomizer. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
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 :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. |
Beta Was this translation helpful? Give feedback.
-
Is there any benefit in defining custom color vars twice? we could simply use the css var in atomic.
|
Beta Was this translation helpful? Give feedback.
For theming, it is best to leverage custom properties (aka CSS variables) and that's really easy to do with Atomizer.
In the config:
In the markup:
In a CSS file or
<style>
block we set default values:We can then use JavaScript to apply new values:
Et voilà!
In short, the idea is to not set hard-coded color values through ACSS, but rather relying on (CSS) variables alone.