<label>Lightness<input type="range" min="0" max="100" value="20"></label>

<p>Sequi nesciunt error explicabo nulla aut ab voluptatem minus. Voluptates adipisci inventore sit sed. Voluptas dicta animi itaque libero ducimus deleniti illo explicabo. Dicta quos fuga ad quia pariatur qui vel. Commodi vel minima sapiente officiis molestias cupiditate.

Voluptates sequi suscipit unde id enim odit. Rerum quis eligendi iure nihil enim. Commodi illum quia omnis. Quasi hic eligendi voluptatem. Quia quibusdam voluptates omnis. Aspernatur voluptatum animi quasi.</p>

body {
  --theme-hue: 210deg;
  --theme-sat: 30%;
  --theme-lit: 20%;
  --theme-font-threshold: 51%;
  
  --background-color: hsl(
    var(--theme-hue),
    var(--theme-sat),
    var(--theme-lit)
  );

  --font-color: hsl( var(--theme-hue), var(--theme-sat), clamp(10%, calc(100% - (var(--theme-lit) - var(--theme-font-threshold)) * 1000), 95%) );
  
  background-color: var(--background-color);
  color: var(--font-color);
  font-family: sans-serif;
}

label {
  display: grid;
  place-items: center;
  margin: auto;
}

const input = document.querySelector("input")
input.addEventListener("input", () => {
  document.body.style.setProperty('--theme-lit', `${input.value}%`);
})