Atomizer CSS
-
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.
-
|
I don't know how Tailwind does it but it's pretty straightforward using Atomizer:
Then in the markup you'd go with the variables from the config: Obviously you'd use better names than I guess we could come up with an easier way to do this through Atomizer where everything is set through the config (variables, custom properties, values, and the flag to switch between themes). It is Atomizer that would then write the 2 rulesets needed for the themes. |
Beta Was this translation helpful? Give feedback.
-
|
Here is the documentation from tailwind. It's really simple to use and even customizable to work via OS setting or manual via DOM class. You can add a modifier to your class block for when dark mode is enabled: For atomic maybe it would be some new syntax: |
Beta Was this translation helpful? Give feedback.
-
|
What's the difference (In the case of flag switching) between:
and:
no need for new syntax :) In any case, and for what it is worth, I think relying on custom properties inside a @media (prefers-color-scheme: dark) { As a side note, I Like how people used to say Atomizer was a bad idea because people had to remember a lot of classes and they also had to type a lot more inside |
Beta Was this translation helpful? Give feedback.
-
|
@thierryk Dark mode was recently added to the Atomzier site. I also have a PR open to add a "Dark Mode" guide, let me know if anything should be added or changed #509 |
Beta Was this translation helpful? Give feedback.
-
|
As for tailwind class names, they are more easily rememberable than atomic just cause they read like well. But after a while, you start to remember the syntax in both languages pretty quickly. |
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.
-
|
No, you're right we could do it that way. |
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.