Switch branches/tags
Nothing to show
Clone or download
Latest commit dbe7118 Dec 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
benchmark * Sep 15, 2018
themes Fixed broken theme Nov 25, 2018
.gitignore Proposal for schema change and a couple of trivial enhancements Feb 12, 2018
PREVIEW.jpg Added preview Jan 10, 2018
README.md Update README.md Dec 4, 2018

README.md

Themes

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

Setup

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();
theme.install(document.body);
theme.start();

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.

Example

apollo

Content

<!-- Author: Unknown -->
<svg width="96px" height="64px" xmlns="http://www.w3.org/2000/svg" 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>
</svg>

Collection

Simply drag and drop these images onto the application window, from your desktop, to install them.

Dark

apollo orca battlestation soyuz lotus

Light

coal marble snow swiss tape

Color

mahou pico8 frameio berry commodore

Default

Included within theme.js.

noir pale

Supported Applications

This collection may also be used with:

Extras

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