A theme engine built in jQuery and Stylus. Try it out on this page.
Setup
JS
Include the script in your page:
<script src="assets/theemey.js"></script>
Making Your Theme
CSS
Include the Stylus mixin in your page:
theme($name, /* theme properties go here */)
/#{$name} &
//theme goes here
Only use variable properties here, otherwise you'll have redundant code.
CSS
Write the rest of your theme like normal:
body
margin 0
header
width 100%
height 64px
CSS
Call the themes on the <body> element:
body
theme(/* name */, /* properties */)
Example
HTML
Setup your HTML:
<html>
<head>
<link href="assets/style.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<header>Header</header>
<article>
<h3>Lorem Ipsum...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a dapibus mi. Donec vitae tempor magna. Vestibulum orci leo, porttitor ac nisi nec, lacinia imperdiet leo. Nam luctus, felis sed molestie pretium, turpis orci eleifend est, eget ullamcorper metus risus aliquam justo. Aenean est leo, pharetra vitae tempor ac, vestibulum non dolor. Cras vulputate sed justo nec auctor. Ut sit amet semper augue. Vivamus erat diam, iaculis eget libero at, accumsan consectetur ante. Morbi sagittis arcu sollicitudin hendrerit fermentum.</p>
</article>
<script src="assets/theemey.js"></script>
</body>
</html>
CSS
Setup your CSS:
theme($name, $background, $color, $font)
#{$name} &
background $background
color $color
font-family $font
body
margin 0
theme(default, #333, #bdbdbd, sans-serif)
theme(red, #c00, #000, serif)
header
width 100%
paddding 32px
article
width 600px
max-width 90%
margin 32px auto