theme-it: Simple theming for the web

Intro

 

 

 

 

 

 

Martin McKeaveney

 

Software Engineer @

 

     Open Source Contributor

Why Theme?

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?