2b:null 2c:["$","title",null,{"children":"Rainbow Headers | Michael Cooper | Observable"}] 31: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` `; }32:[] 2f:{"id":"55ef71f3d294bc0f","slug":"rainbow-headers","title":"Rainbow Headers","thumbnail":"ae1ca746ed609ce58fc52c89757f90517c5739b1b3fb56bd10c7840dd3d23266","access_level":"public","create_time":"$D2022-06-04T14:26:59.190Z","update_time":"$D2022-06-06T16:12:44.877Z","view_time":null,"first_public_time":"$D2022-06-04T15:13:15.528Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"3a9cb3bb8fb63f67","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":"starter_2024"},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2ae65df1901fe65","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":null}],"members":[{"type":"individual","id":"b2ae65df1901fe65","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rainbow Headers","cells":[{"id":0,"value":"# Rainbow Headers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":137,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"rainbowifyHeaders()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"culori = require(\"culori\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"import { culoriToCss } from \"@mythmon/bonus-lib\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"