diff options
| -rw-r--r-- | README.md | 49 | ||||
| -rw-r--r-- | assets/lotus.svg | 12 |
2 files changed, 33 insertions, 28 deletions
@@ -8,22 +8,15 @@ This repo documents the specs of the theme format used across the Hundred Rabbit ``` { - "meta": { - "author": "aeriform", - "version": 2, - "revision": 1 - }, - "data": { - "background": "#d4d3c0", - "b_high": "#ede6d4", - "b_med": "#534e41", - "b_low": "#dfddca", - "b_inv": "#cc295c" - "f_high": "#534e41", - "f_med": "#534e41", - "f_low": "#ede6d4", - "f_inv": "#cc295c", - } + "background": "#d4d3c0", + "b_high": "#ede6d4", + "b_med": "#534e41", + "b_low": "#dfddca", + "b_inv": "#cc295c" + "f_high": "#534e41", + "f_med": "#534e41", + "f_low": "#ede6d4", + "f_inv": "#cc295c" } ``` @@ -41,6 +34,30 @@ To implement support, you need to add the [theme.js](https://github.com/hundredr - `b_low`, Background, low-contrast. - `f_inv`, Background, inverted. +## Setup + +Install Themes support, by adding [theme.js](https://github.com/hundredrabbits/Dotgrid/blob/master/desktop/sources/scripts/lib/theme.js) to your header. + +``` +<script type="text/javascript" src="scripts/lib/theme.js"></script> +``` + +Define the overrides in a [dedicated theme.css](https://github.com/hundredrabbits/Dotgrid/blob/master/desktop/sources/links/theme.css) by adding this line to your header. + +``` +<link rel="stylesheet" type="text/css" href="links/theme.css"/> +``` + +Initiate the Theme class by adding these lines somewhere in your project. + +``` +const theme = new Theme(); +theme.install(document.body); +theme.start(); +``` + +This will add a handler that will detect files dragged onto the project, and append a `<style>` element to your document's body element with the theme overrides. + ## Supported Applications - [Marabu](https://github.com/hundredrabbits/Marabu), music tool. diff --git a/assets/lotus.svg b/assets/lotus.svg deleted file mode 100644 index 000615b..0000000 --- a/assets/lotus.svg +++ /dev/null @@ -1,12 +0,0 @@ - - <svg class="vector" width="112px" height="64px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1"> - <rect width='96' height='64' fill='#161616' rx='5' ry='5'></rect> - <circle cx='24' cy='24' r='8' fill='#f0c098'></circle> - <circle cx='40' cy='24' r='8' fill='#333333'></circle> - <circle cx='56' cy='24' r='8' fill='#555555'></circle> - <circle cx='72' cy='24' r='8' fill='#222222'></circle> - <circle cx='24' cy='40' r='8' fill='#ffffff'></circle> - <circle cx='40' cy='40' r='8' fill='#222222'></circle> - <circle cx='56' cy='40' r='8' fill='#333333'></circle> - <circle cx='72' cy='40' r='8' fill='#f0c098'></circle> - </svg>
\ No newline at end of file |
