{"version":3,"sources":["script.js"],"names":["darkButton","document","getElementById","lightButton","setDarkMode","querySelector","classList","localStorage","setItem","setLightMode","colorModeFromLocalStorage","getItem","colorModeFromPreferences","window","matchMedia","matches","loadAndUpdateColor","click","radioButtons","querySelectorAll","forEach","button","addEventListener","event","checked"],"mappings":"AAAA,aAYA,IAAMA,WAAaC,SAASC,eAAe,QACrCC,YAAcF,SAASC,eAAe,SAEtCE,YAAc,WAClBH,SAASI,cAAc,QAAQC,UAAY,OAC3CC,aAAaC,QAAQ,YAAa,SAG9BC,aAAe,WACnBR,SAASI,cAAc,QAAQC,UAAY,QAC3CC,aAAaC,QAAQ,YAAa,UAG9BE,0BAA4B,WAChC,OAAOH,aAAaI,QAAQ,cAGxBC,yBAA2B,WAC/B,OAAOC,OAAOC,WAAW,gCAAgCC,QAC3C,OACA,SAGVC,mBAAqB,WAGhB,SADKN,6BAA+BE,4BAC3BZ,WAAWiB,QAAUd,YAAYc,SAI/CC,aAAejB,SAASkB,iBAAiB,0BAC/CD,aAAaE,SAAQ,SAAAC,GACnBA,EAAOC,iBAAiB,SAAS,SAACC,GAChCvB,WAAWwB,QAAUpB,cAAgBK,qBAMzCI,OAAOC,WAAW,gCACXQ,iBAAiB,UAAU,SAACC,GAC3BA,EAAMR,QAAUf,WAAWiB,QAAUd,YAAYc,WAIzDD","file":"script.js","sourcesContent":["\n/* \nThe first time the page is loaded, the color mode set on the preference \nis used and set as 'default' in the local storage. \nChanging the default preferences works the same way as changing the \ncolor mode using the buttons, if the page is loaded.\nWhen the page is reloaded, whatever is the value set on the local storage\nhas precedence over the values in the preference. If the preference\nchanged after the page was visited - and the page is not loaded - \nthe last value saved on the local storage is loaded. \n*/\n\nconst darkButton = document.getElementById('dark');\nconst lightButton = document.getElementById('light');\n\nconst setDarkMode = () => {\n  document.querySelector('body').classList = 'dark';\n  localStorage.setItem('colorMode', 'dark');\n};\n\nconst setLightMode = () => {\n  document.querySelector('body').classList = 'light';\n  localStorage.setItem('colorMode', 'light');\n};\n\nconst colorModeFromLocalStorage = () => {\n  return localStorage.getItem('colorMode');\n};\n\nconst colorModeFromPreferences = () => {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches \n              ? 'dark'\n              : 'light' // If preference is set or does not match anything (light is default)\n};\n\nconst loadAndUpdateColor = () => {\n  // local storage has precendence over the prefers-color-scheme\n  const color = colorModeFromLocalStorage() || colorModeFromPreferences();\n  color == 'dark' ? darkButton.click() : lightButton.click();\n};\n\n// when the inputs are clicked, check which radio button is checked and change the color\nconst radioButtons = document.querySelectorAll('.toggle__wrapper input');\nradioButtons.forEach(button => {\n  button.addEventListener('click', (event) => {\n    darkButton.checked ? setDarkMode() : setLightMode();\n  });\n});\n\n// when the prefers-color-scheme changes, this event will be emitted\n// event reflects the media query, if it matches, the new color is dark, else it is light\nwindow.matchMedia('(prefers-color-scheme: dark)')\n      .addEventListener('change', (event) => {\n        event.matches ? darkButton.click() : lightButton.click();\n      });\n      \n// Load the right color on startup - localStorage has precedence\nloadAndUpdateColor();"]}