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
Our apps use this module to add this dynamic CSS to a
<style> tag in the
<head> of the document.