The current `skin="foo"` style theming solution doesn't scale. In the future we want anyone to be able to create a theme.css file and for that theme to style any components within the app. This is exciting because users with even very basic CSS knowledge will be able to customise the entire OS by creating their own theme file. This is something not currently possible with iOS or Android. Themes will be driven primarily from CSS 'Custom Properties' (or variables). A theme file will simply be a list of variables. Components wishing to be theme-able will use these dynamic variables to style parts of their components instead of hard coding colors, fonts, box-shadows etc. The less hard coded properties, the more theme-able and extensible a component is. A theme file might look something like: [theme="comms"] { --main-color: #00adad; --color-2: #00adad; --text-color: #fff; --text-color-hard: ...; --text-color-soft: ...; --background-texture: ...; --border: ...; --box-shadow: ...; --font: ...; } I'll need help from others to make sure we get this variable list right, as this is our theme's standard that must be conformed to by theme and component authors. Most of our existing building-blocks use PNGs for icons and backgrounds, we'll need to migrate these components to pure CSS and icon-fonts to make them dynamic and theme-able. Let's get more discussion around this :)

By using attributes to define the 'theme-root' users can have multiple themes active on the same page by defining themes at different scopes/depths of the DOM tree. This is an important requirement. As a user I may wish to see <gaia-header> in the 'organic' theme, but <gaia-subheader> in the 'dark' theme.

Attached WIP to share where I've got with this so far.

Accessibility must be taken into account as well here. For a general overview and some common solution patterns to icon font accessibility, read here[1]. Since we'll be dealing with the possibility to invert colors (bug 1016539) and potentially two speech synthesizers for the screen reader, boht missing speech as well as overspeaking must be tested and dealt with. And yes, this is as much a note to myself as it is to anyone involved. Also CC'ing Eitan. [1] http://filamentgroup.com/lab/bulletproof_icon_fonts.html

I've run some promising tests with grunt-webfont [1]. It basically takes a directory of SVGs and spits out all the relevant font files and CSS we need. I'm pretty hopeful this will give us a sane workflow. We probably shouldn't run this step on every build, but instead whenever a designer/dev makes a change to and SVG, they will have to run the Grunt task locally before committing. The grunt task requires that font-forge is installed locally, which is easily done with Homebrew. [1] https://github.com/sapegin/grunt-webfont

Created gaia-theme repo https://github.com/gaia-components/gaia-theme

Closing this as all newly created components for 2.2 will be themeable.