console.log(document.visibilityState);
// Обычно "visible" или "hidden"

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("Вкладка неактивна — ставим процесс на паузу");
    stopRendering();
  } else {
    console.log("Вкладка снова активна — продолжаем работу");
    resumeRendering();
  }
});

function onVisibilityChange(callback) {
  const handler = () => callback(!document.hidden);

  callback(!document.hidden);

  document.addEventListener("visibilitychange", handler);
  return () => document.removeEventListener("visibilitychange", handler);
}

const unsubscribe = onVisibilityChange(isVisible => {
  console.log(`Вкладка ${isVisible ? "активна" : "скрыта"}`);
});

::selection {
  background: #ffcc00;
  color: #111;
}

[data-theme="dark"] ::selection {
  background: #444;
  color: #fff;
}

input::selection,
textarea::selection {
  background: #222;
  color: #0ff;
}