Have a new hue gradient on Logseq startup

README_Logseq_Hue_Rotate.md

Add the custom.css and custom.js in this gist to your Logseq custom files, and you should have new hue rotations each time you start Logseq

custom.css

:root {
  --html-hue-rotate: 0;
  --html-hue-rotate-img: 0;
  --background: linear-gradient(to right top,
          rgb(5.3245, 15.186, 24.709),
          rgb(12.694, 4.0962, 39.365),
          rgb(88.172, 10.433, 57.511),
          rgb(21.134, 2.2299, 74.176),
          rgb(52.124, 0, 178.34));
}

html:not(img) {
  filter: var(--html-hue-rotate);
  transition: 1500ms;
}

img {
  filter: var(--html-hue-rotate-img);
}

#app-container {
  background: var(--background);
}

custom.js

/**** getRandomNumber
 *
 * returns a floating point number.
 */
function getRandomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

/**** hueRotateCSSGlobalVariables
 *
 * Requires an arg in deg for shifting the entire html hue.
 */
function hueRotateCSSGlobalVariables(hueRotateDeg) {
  const hueRotateDegImg = 360 - hueRotateDeg;
  const hueRotateDegString = 'hue-rotate(' + hueRotateDeg + 'deg)';
  const hueRotateDegStringImg = 'hue-rotate(' + hueRotateDegImg + 'deg)';
  document.documentElement.style.setProperty('--html-hue-rotate', hueRotateDegString);
  document.documentElement.style.setProperty('--html-hue-rotate-img', hueRotateDegStringImg);
}

/**** randomHueRotateCSSGlobalVariables
 *
 * Random rotate entire html hue.
 */
function randomHueRotateCSSGlobalVariables() {
  const hueRotateDeg = getRandomNumber(0, 360);
  hueRotateCSSGlobalVariables(hueRotateDeg);
}

// Set a random hue for the app on startup.
randomHueRotateCSSGlobalVariables();

Screenshots.md

Examples