Repository files navigation

This repository is for the application themes and tools used across theHundred RabbitsEcosystem.

Install Theme support by addingtheme.js to your header.

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

Define Theme overrides in a dedicatedtheme.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();theme.install(document.body);theme.start();

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.

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 theinv 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 globalbackground, and so doesb_high, representing a highly contrasted color against the globalbackground.

You can test your themes online with theTheme 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 file format is a simple SVG file. Thetheme.js loader will look for colors found in the element'sid 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="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>

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

See the full collectionhere.

Themes can be generated from your wallpaper’s colors withpywal.

Addpywal.svg to~/.config/wal/templates and runwal. The generated theme will be located in~/.cache/wal/.

• Dotgrid, vector tool.
• Ronin, pixel tool.
• Orca, programing language.
• Left, writing tool.
• Nasu, spritesheet editor.
• Marabu, music tool.
• Donsol, card game.
• Paradise, IF playground.
• Pilot, synthetiser.
• Verreciel, space game.

This collection may also be used with:

• Tape by Aeriform.
• Memex by Kormyen.
• Autograph by James Chip
• Dot Matrix by Lains
• Pixelful by Jacob Unknown

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