theme-it: Simple theming for the web
Intro
Martin McKeaveney
Software Engineer @
Open Source Contributor
Why Theme?
Aesthetics
Accessibility
How?
Theme variables or config
A way to change them
Vanilla CSS
Vanilla JS
Not all CSS features are supported (pseudo-selectors)
Have to write your own theming logic
SASS
Requires compilation step
Duplicates compiled CSS increasing bundle size
No access to individual variables
Can't create new themes at runtime
CSS in JS
- Nice theming API's
- Configured with JS object
- Generally dependent on a framework
- Requires re-write
- "all in"
- Build tools + babel plugins
The problem
- Fast
- Simple
- Framework agnostic
- Zero dependency
- Native DOM API
- Integrate with large existing applications
- Create new themes
- Update individual variables
CSS Variables/Custom Properties
theme-it
A small (7kb minified), blazing fast theming library powered by CSS custom properties (also known as CSS4 Variables) with absolutely zero dependencies.
What does it do?
- Manage CSS Variable themes at runtime
- Get and set individual CSS variables at runtime
- Callbacks for all theming operations
- Convert your current CSS in JS theme configuration to use CSS variables
- CLI
- Brand new user created colour schemes at runtime.
Demo
theme-it object
Class based API
Manages state
Provides methods for manipulating CSS variables
Allows callbacks for all functions
mini-theme-compiler
Compiles JS object structure into CSS variable definition
Traverses the tree and flattens out nested nodes the whole way down
Spits out the resulting CSS rules as a string
Used for adding a new theme at runtime or through the CLI
Command Line Interface
Convert theme config into a CSS file in the CLI
Drop compiled css file into your application
Thanks!
Questions?