Skip to content
Branch: master
Clone or download
Latest commit 6dcdd94 May 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
benchmark * Sep 15, 2018
themes Added teenage May 9, 2019
.gitignore Proposal for schema change and a couple of trivial enhancements Feb 12, 2018
PREVIEW.jpg Added preview Jan 10, 2018 Added Autograph Apr 14, 2019


This repository is for the application themes and tools used across the Hundred Rabbits Ecosystem.


Install Theme support by adding theme.js to your header.

<script type="text/javascript" src="scripts/lib/theme.js"></script>

Define Theme overrides in a dedicated theme.css by adding this line to your header.

<link rel="stylesheet" type="text/css" href="links/theme.css"/>

Initiate Theme support by adding these lines somewhere in your project. The Theme({background:#f00,..}) class takes a default theme as param, the .install(element,callback) method takes an element to append the <style> element to, and a param for a method called when the theme has been updated.

let theme = new Theme();

This will add an handler that will detect files dragged onto the project window, and append a <style> element to your document's body element with the theme overrides.

Format Specs

The Theme format holds only 9 different colors.

  • background, Application Background.
  • f_high, Foreground, high-contrast.
  • f_med, Foreground, medium-contrast.
  • f_low, Foreground, low-contrast.
  • f_inv, Foreground, inverted.
  • b_high, Background, high-contrast.
  • b_med, Background, medium-contrast.
  • b_low, Background, low-contrast.
  • b_inv, Background, inverted.

The Theme Format

The Theme file format is a SVG file. The theme.js loader will look for colors found in the element's id attributes. Save the image on your computer and drag it over the application window to install it.




<!-- Author: Unknown -->
<svg width="96px" height="64px" xmlns="" baseProfile="full" version="1.1">
  <rect width='96' height='64'  id='background' fill='#E0B1CB'></rect>
  <!-- Foreground -->
  <circle cx='24' cy='24' r='8' id='f_high' fill='#231942'></circle>
  <circle cx='40' cy='24' r='8' id='f_med' fill='#5E548E'></circle>
  <circle cx='56' cy='24' r='8' id='f_low' fill='#BE95C4'></circle>
  <circle cx='72' cy='24' r='8' id='f_inv' fill='#E0B1CB'></circle>
  <!-- Background -->
  <circle cx='24' cy='40' r='8' id='b_high' fill='#FFFFFF'></circle>
  <circle cx='40' cy='40' r='8' id='b_med' fill='#5E548E'></circle>
  <circle cx='56' cy='40' r='8' id='b_low' fill='#BE95C4'></circle>
  <circle cx='72' cy='40' r='8' id='b_inv' fill='#9F86C0'></circle>


Simply download these SVG files, and drag and drop them onto the application window, to install them.


apollo orca battlestation soyuz lotus


coal marble snow swiss tape


mahou pico8 frameio berry commodore


Included within theme.js.

noir pale

Supported Applications

This collection may also be used with:


You are welcome to submit your own themes to this collection!

You can’t perform that action at this time.