My team and I have been working on a new internal component library to share across a few Ember apps. The library is an Ember addon in a private github repo. So far, so good. The off-the-beaten-path part of our requirements is that the components need to be themeable. Specifically, we support a color and a "light" or "dark" aesthetic.
We want a great developer experience for creating and updating these components, so we used ember-freestyle as a devDependency of the library to create a living style guide. We added some UI to allow theme switching and even a checkbox to switch themes every second (thanks ember-concurrency!).
The thing that gave us the biggest challenge was figuring out how to author and apply the styles that were necessarily dynamic. Specifically, the css rules that used the dynamic color.
We decided to organize our styles like so:
app/styles/components/
my-component/
style.scss
theme.css
The style.scss file is processed by ember-cli-sass and becomes part of the app bundle. It contains all styles that can be calculated at build-time and shipped to users as static CSS.
The theme.css file contains css with ${primaryColor}
as needed and is processed by some custom broccoli code that concatenates the rules and builds them into a Javascript function receives a color and returns a string of the CSS with the color interpolated in.
Our apps use this module to add this dynamic CSS to a <style>
tag in the <head>
of the document.