A script to make your site rainbow-coloured on keypress

Webweaving
1

Ages ago, I wrote a little script to change the page background to a shifting rainbow pattern when a visitor presses B on their keyboard; I finally got around to adding a localstorage function to it, so the settings sticks from page to page until the visitor hits B again. You can see it in action here. Thought it may be of interest to someone, so:

contents of rb.js:

window.addEventListener("keydown", key, false);
let rbset = localStorage.getItem("rbmode");

const enablerb = () => {
document.body.classList.add("rb");
localStorage.setItem("rbmode", "enabled");
};

const disablerb = () => {
document.body.classList.remove("rb");
localStorage.setItem("rbmode", "disabled");
};

if (rbset === "enabled") {
enablerb();
};

function key(e){if ((e.code == "KeyB")
&& (e.target.nodeName != 'INPUT')
&& (e.target.nodeName != 'TEXTAREA')){
rbset = localStorage.getItem("rbmode");
if (rbset === "disabled"){
enablerb();
} else {
disablerb();
}}}

in the <body> of your pages, place

<script src="your/path/to/rb.js"></script>

and in CSS, make a class rb like so:

.rb{
 background: linear-gradient(to bottom, #E40303, #FF8C00, #FFED00, #008026, #24408E, #732982, #FFF, #FFAFC8, #74D7EE, #613915, #222, #E40303);
 animation: prog 10s linear infinite;
 background-size: 100% 5000px;
}
6 Likes
2

Very spiffy! :shocked: Love some local storage. Thank you for sharing.

3

This is very cool, love it!

+1 for using Local Storage as well!

I hope you don’t mind some unsolicited thoughts on the construction of the gradient.

There are some new-ish data types that can be passed into some CSS colour functions like linear-gradient(): color interpolation method and hue interpolation method.

In short, color interpolation method gives you control over the colour space used to interpolate between colours (e.g. sRGB, HSL, OKLCH, etc.), and hue interpolation method specifies how the midpoint between the hues of colours is calculated.

The hue part is pretty slick. If we imagine a colour wheel, and we wanted to create a gradient from red to red, well, we would get a solid colour as the output, i.e. the hue wouldn’t change from one end of the gradient to the other.

But by dictating a hue interpolation method of longer hue, the midpoint will be on the opposite side of red on the colour wheel, which results in the gradient sweeping through the entire colour wheel to get from red all the way to red again.

This means you can create gradients with a lot less code, e.g.

background-image: linear-gradient(in hsl longer hue, red, red);

(Here’s a CodePen to play with these values.)

Unfortunately, this doesn’t give as fine-grained control over the exact colours to interpolate between in a gradient, but it does take away the work of finding equidistant points along a gradient to interpolate between to avoid sharp changes and/or banding in a gradient—the browser does that work for you instead.

1 Like
4

Bookmarking this for when Firefox and Vivaldi add support for it! Always enjoy condensing code, even if it’s only a few bits.

Now I’m thinking about a way to add mobile support. Can’t press B on a smartphone, so maybe I’ll turn the B in the title banner into a secret button - not sure yet.

1 Like
5

adding this to the resources list!!! <3

1 Like