prefer.js

   1 function setstyle(name, state = true) {
   2         document.documentElement.classList.toggle('s-'+name, state);
   3 }
   4
   5 (function prefstyle() {
   6         const cookies = new Map(
   7                 document.cookie.split(';').map(v => v.trim().split('=', 2))
   8         );
   9         if ((pref = cookies.get('style'))) {
  10                 setstyle(pref);
  11                 return;
  12         }
  13
  14         new Map([
  15                 ['mono',   '(monochrome)'],
  16                 ['dark',   '(prefers-color-scheme: dark)'],
  17                 ['circus', '(prefers-contrast: more)'],
  18         ]).forEach((q,c) => {
  19                 if (m = window.matchMedia(q))
  20                         (m.onchange = e => setstyle(c, e.matches))(m);
  21         });
  22 })();