You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
neauoire b1d3e322cb * 6 months ago
editor * 2 years ago
links Updated themeJS 1 year ago
scripts Updated themeJS 1 year ago
themes * 6 months ago
tools Improved C tool 7 months ago
.gitignore Improved C tool 7 months ago
.nojekyll Create .nojekyll 2 years ago
PREVIEW.jpg Added preview 3 years ago Fixed 404 in readme 7 months ago
index.html Updated themeJS 1 year ago


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 .install(element) method takes an element to append the <style> tag to.

const theme = new Theme();

Trigger a function once a new theme has been loaded:

theme.onLoad = callback

The callback will fire when a new theme has loaded, perfect to connect a refresh method and update your application with the new colors.

Format Specs

The Theme format holds 9 different colors, including 4 foreground colors, 4 background colors, and a global background color. Each foreground color should be readable on every background color, with the exception of the inv types, which are designed to be used in warnings or modals and should only overlap each other.

A variable's contrast should be seen as an offset to the global background color, so instance, f_high represents a high contrast color against the global background, and so does b_high, representing a highly contrasted color against the global background.

You can test your themes online with the Theme Benchmark.

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

The Theme Format

The Theme file format is a simple 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 teenage tape


mahou pico8 frameio berry roguelight

See the full collection here.

Generate themes with pywal

Themes can be generated from your wallpaper’s colors with pywal.

Add pywal.svg to ~/.config/wal/templates and run wal. The generated theme will be located in ~/.cache/wal/.

Supported Applications

This collection may also be used with:


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