Give your site a random background color from the official Bad Idea Factory brand guidelines.
NOTE: these are not the same colors from the actual Bad Idea Factory website, which does not use the same colors from the official Bad Idea Factory brand guidelines
Compatibility: IE9+
Installation:
npm install @biffud/random-bg-colorScript:
// ES6+
import { setRandomBgColor } from '@biffud/random-bg-color'
// ES5 / AMD / CommonJS
var setRandomBgColor = require('@biffud/random-bg-color')<!-- usage with CDN -->
<!-- exported on the BIFFUD global object -->
<script src="https://unpkg.com/@biffud/[email protected]/src/index.js"></script>
<script>
BIFFUD.setRandomBgColor()
</script>// Give it a valid CSS selector
setRandomBgColor('h1')
// Complex selectors work too; anything that document.querySelectorAll() accepts
setRandomBgColor('.some-element > p.nested-child:first-child')
// You can also pass in a reference to an element directly
const el = document.createElement('div')
setRandomBgColor(el)Pass in an object to the second argument like this:
setRandomBgColor(null, { disallowTransition: true })By default we don't adjust text color of the element. This is because you might have child elements that contain different types of content and you might want finer-grained control. To help you do this, we add the data-dark-mode data attribute to the element. It looks like this:
<body style="transition: background-color 120ms ease 0s; background-color: rgb(0, 156, 155);" data-dark-mode="true">You can then style it like this:
body[data-dark-mode="true"] {
color: white;
}If you want us to do this automatically, there is an option that will add the color style as well.
setRandomBgColor(null, { autoTextContrast: true })The behavior of this is to set the color style of the same element where the background-color is changing. It will assume white on dark colors and black on light colors. f you use this option you may want to set the color: inherit CSS property of child elements to make sure that they pick up changes to the text color.
This isn't a setting. Change it via CSS instead.
body {
transition: background-color 500ms ease-in-out !important;
}