30:T4a3,rainbowifyHeaders = ({ numColors = 7, saturation = 1, value = 0.85, hueOffset = Math.random() * 360 } = {}) => { const colors = d3 .range(hueOffset, 360 + hueOffset, 360 / numColors) .map((h) => h % 360) .map((h) => culori.okhsv({ h, s: saturation, v: value })); // TODO this n^2 pattern produces a lot of CSS, especially with more colors. // Is it possible to select the headers without having to also select the cells? return htl.html` `; }31:[] 2e:{"title":"Rainbow Headers","cells":[{"id":0,"value":"# Rainbow Headers","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"Add a bit of color to your notebook by adding a global style that affects all the headers in the page. The headers will each be a rainbow color.\n\nUsage:\n\n1. Add the import\n```js\nimport { rainbowifyHeaders } from \"@mythmon/rainbow-headers\"\n```\n2. Add another cell to call the function\n```js\nrainbowifyHeaders()\n```\n\nYou can optionally customize the colors by passing an options Argument:\n\n```js\nrainbowifyHeaders({numColors: 10, value: 0.7, saturation: 0.9, hueOffset: 30})\n```\n\n- `numColors` - Number of colors that will be used before repeating. Default is 7.\n- `value` - Controls the darkness of the color. `value: 1.0` will be bright colors, `value: 0.0` will be black. Default is 0.85.\n- `saturation` - Controls the intensity of the color. `saturation : 1.0` will be fully saturated, `saturation: 0.0` will be greyscale. Default is 1.0.\n- `hueOffset` - Rotates the color space around by this many hue degrees, changing what the first color will be. Should be between 0 and 360. Defaults to a random number.","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"

Demo H1

Demo H2

Demo H3

Demo H4

Demo H5

\n${d3.range(6).map(i => htl.html`

Demo H6 ${i + 1}

`)}","pinned":false,"hidden":false,"mode":"html"},{"id":137,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"rainbowifyHeaders()","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"culori = require(\"culori\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { culoriToCss } from \"@mythmon/bonus-lib\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}