{
  "version": 3,
  "sources": ["../../../static/script/theme.ts"],
  "sourcesContent": ["const LOCAL_STORAGE_THEME_KEY = \"THEME\";\nconst PREFERS_COLOR_SCHEME_DARK_MEDIA_QUERY = \"(prefers-color-scheme: dark)\";\n\n/**\n * All the possible states of Toggle\n */\nenum ThemeSetting {\n  // default state; the theme is automatically set given the `prefers-color-scheme` CSS media feature\n  AUTOMATIC = \"AUTOMATIC\",\n  // the user manually chose Light theme\n  MANUAL_LIGHT = \"MANUAL_LIGHT\",\n  // the user manually chose Dark theme\n  MANUAL_DARK = \"MANUAL_DARK\",\n}\n\n// initialize everything necessary to switch themes\ndocument.addEventListener(\"DOMContentLoaded\", initTheme);\n\n// initialize the Toggle Theme button\nconst toggleThemeButton: HTMLElement | null = document.getElementById(\"toggleThemeButton\");\nif (toggleThemeButton instanceof HTMLElement) {\n  toggleThemeButton.addEventListener(\"click\", toggleTheme);\n}\n\n// initialize `prefers-color-scheme` CSS media feature \"change\" listener\nconst darkModeMediaQuery: MediaQueryList = globalThis.matchMedia(PREFERS_COLOR_SCHEME_DARK_MEDIA_QUERY);\ndarkModeMediaQuery.addEventListener(\"change\", handlePrefersColorSchemeMediaQueryToggle);\n\n/**\n * Initializes a variable in Local Storage to handle automatic versus manual Light/Dark theme state.\n */\nfunction initTheme(e: Event) {\n  e.preventDefault();\n\n  const theme: string | null = localStorage.getItem(LOCAL_STORAGE_THEME_KEY);\n\n  // if the key is already set to something, don't overwrite it\n  if (theme !== null) {\n    setTheme();\n    return;\n  }\n\n  // default state should be automatic (aka defer to the `prefers-color-scheme` CSS media feature)\n  localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.AUTOMATIC);\n  setTheme();\n}\n\n/**\n * Handle the scenario that a user switches the `prefers-color-scheme` CSS media feature setting while on the page.\n */\nfunction handlePrefersColorSchemeMediaQueryToggle(e: Event) {\n  e.preventDefault();\n\n  // the user changed their stance on `prefers-color-scheme`, set it back to AUTOMATIC\n  localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.AUTOMATIC);\n  setTheme();\n}\n\n/**\n * Switches the theme from Light theme to Dark theme, and vice versa.\n */\nfunction toggleTheme(e: Event) {\n  e.preventDefault();\n\n  // get `prefers-color-scheme` CSS media feature setting\n  const prefersDarkColorSchemeCssMediaFeature: boolean =\n    globalThis.matchMedia(PREFERS_COLOR_SCHEME_DARK_MEDIA_QUERY).matches;\n\n  // determine which theme to switch to given what the previous theme was\n  const previousTheme: string | null = localStorage.getItem(LOCAL_STORAGE_THEME_KEY);\n  switch (previousTheme) {\n    case ThemeSetting.MANUAL_LIGHT: {\n      // if current value is Manual Light theme, switch to Dark theme\n      localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.MANUAL_DARK);\n\n      // if the user set `prefers-color-scheme` CSS media feature to Dark theme, then change Manual Dark to Automatic\n      if (prefersDarkColorSchemeCssMediaFeature) {\n        localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.AUTOMATIC);\n      }\n      break;\n    }\n    case ThemeSetting.MANUAL_DARK: {\n      // if current value is Manual Dark theme, switch to Light theme\n      localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.MANUAL_LIGHT);\n\n      // if the user set `prefers-color-scheme` CSS media feature to Light theme, then change Manual Light to Automatic\n      if (!prefersDarkColorSchemeCssMediaFeature) {\n        localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.AUTOMATIC);\n      }\n      break;\n    }\n    default: {\n      // if the user set `prefers-color-scheme` CSS media feature to Dark theme, then switch to Manual Light theme\n      if (prefersDarkColorSchemeCssMediaFeature) {\n        localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.MANUAL_LIGHT);\n      } else {\n        // if the user set `prefers-color-scheme` CSS media feature to Light theme, then switch to Manual Dark theme\n        localStorage.setItem(LOCAL_STORAGE_THEME_KEY, ThemeSetting.MANUAL_DARK);\n      }\n    }\n  }\n\n  setTheme();\n}\n\n/**\n * Calls the appropriate method to actually change the colors to the chosen theme.\n */\nfunction setTheme() {\n  // get `prefers-color-scheme` CSS media feature setting\n  const prefersDarkColorSchemeCssMediaFeature: boolean =\n    globalThis.matchMedia(PREFERS_COLOR_SCHEME_DARK_MEDIA_QUERY).matches;\n\n  // set the appropriate theme\n  const currentTheme: string | null = localStorage.getItem(LOCAL_STORAGE_THEME_KEY);\n  switch (currentTheme) {\n    case ThemeSetting.MANUAL_LIGHT: {\n      setLightTheme();\n      break;\n    }\n    case ThemeSetting.MANUAL_DARK: {\n      setDarkTheme();\n      break;\n    }\n    default: {\n      // default to automatic theme (via `prefers-color-scheme` CSS media feature)\n      if (prefersDarkColorSchemeCssMediaFeature) {\n        setDarkTheme();\n      } else {\n        setLightTheme();\n      }\n      break;\n    }\n  }\n}\n\n/**\n * Sets the value of all CSS color variables to the Light theme variable values.\n */\nfunction setLightTheme() {\n  // Background\n  document.documentElement.style.setProperty(\n    \"--color-background\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-background-light-theme\",\n    ),\n  );\n\n  // On Background\n  document.documentElement.style.setProperty(\n    \"--color-on-background\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-background-light-theme\",\n    ),\n  );\n\n  // Surface\n  document.documentElement.style.setProperty(\n    \"--color-surface\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-surface-light-theme\",\n    ),\n  );\n\n  // On Surface\n  document.documentElement.style.setProperty(\n    \"--color-on-surface\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-surface-light-theme\",\n    ),\n  );\n\n  // Error\n  document.documentElement.style.setProperty(\n    \"--color-error\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-error-light-theme\",\n    ),\n  );\n\n  // On Error\n  document.documentElement.style.setProperty(\n    \"--color-on-error\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-error-light-theme\",\n    ),\n  );\n\n  // Primary\n  document.documentElement.style.setProperty(\n    \"--color-primary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-primary-light-theme\",\n    ),\n  );\n\n  // Primary Variant\n  document.documentElement.style.setProperty(\n    \"--color-primary-variant\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-primary-variant-light-theme\",\n    ),\n  );\n\n  // On Primary\n  document.documentElement.style.setProperty(\n    \"--color-on-primary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-primary-light-theme\",\n    ),\n  );\n\n  // Secondary\n  document.documentElement.style.setProperty(\n    \"--color-secondary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-secondary-light-theme\",\n    ),\n  );\n\n  // Secondary Variant\n  document.documentElement.style.setProperty(\n    \"--color-secondary-variant\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-secondary-variant-light-theme\",\n    ),\n  );\n\n  // On Secondary\n  document.documentElement.style.setProperty(\n    \"--color-on-secondary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-secondary-light-theme\",\n    ),\n  );\n}\n\n/**\n * Sets the value of all CSS color variables to the Dark theme variable values.\n */\nfunction setDarkTheme() {\n  // Background\n  document.documentElement.style.setProperty(\n    \"--color-background\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-background-dark-theme\",\n    ),\n  );\n\n  // On Background\n  document.documentElement.style.setProperty(\n    \"--color-on-background\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-background-dark-theme\",\n    ),\n  );\n\n  // Surface\n  document.documentElement.style.setProperty(\n    \"--color-surface\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-surface-dark-theme\",\n    ),\n  );\n\n  // On Surface\n  document.documentElement.style.setProperty(\n    \"--color-on-surface\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-surface-dark-theme\",\n    ),\n  );\n\n  // Error\n  document.documentElement.style.setProperty(\n    \"--color-error\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-error-dark-theme\",\n    ),\n  );\n\n  // On Error\n  document.documentElement.style.setProperty(\n    \"--color-on-error\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-error-dark-theme\",\n    ),\n  );\n\n  // Primary\n  document.documentElement.style.setProperty(\n    \"--color-primary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-primary-dark-theme\",\n    ),\n  );\n\n  // Primary Variant\n  document.documentElement.style.setProperty(\n    \"--color-primary-variant\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-primary-variant-dark-theme\",\n    ),\n  );\n\n  // On Primary\n  document.documentElement.style.setProperty(\n    \"--color-on-primary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-primary-dark-theme\",\n    ),\n  );\n\n  // Secondary\n  document.documentElement.style.setProperty(\n    \"--color-secondary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-secondary-dark-theme\",\n    ),\n  );\n\n  // Secondary Variant\n  document.documentElement.style.setProperty(\n    \"--color-secondary-variant\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-secondary-variant-dark-theme\",\n    ),\n  );\n\n  // On Secondary\n  document.documentElement.style.setProperty(\n    \"--color-on-secondary\",\n    getComputedStyle(document.documentElement).getPropertyValue(\n      \"--color-on-secondary-dark-theme\",\n    ),\n  );\n}\n"],
  "mappings": "AAAA,IAAMA,EAA0B,QAC1BC,EAAwC,+BAe9C,SAAS,iBAAiB,mBAAoBC,CAAS,EAGvD,IAAMC,EAAwC,SAAS,eAAe,mBAAmB,EACrFA,aAA6B,aAC/BA,EAAkB,iBAAiB,QAASC,CAAW,EAIzD,IAAMC,EAAqC,WAAW,WAAWC,CAAqC,EACtGD,EAAmB,iBAAiB,SAAUE,CAAwC,EAKtF,SAASL,EAAUM,EAAU,CAM3B,GALAA,EAAE,eAAe,EAEY,aAAa,QAAQC,CAAuB,IAG3D,KAAM,CAClBC,EAAS,EACT,MACF,CAGA,aAAa,QAAQD,EAAyB,WAAsB,EACpEC,EAAS,CACX,CAKA,SAASH,EAAyCC,EAAU,CAC1DA,EAAE,eAAe,EAGjB,aAAa,QAAQC,EAAyB,WAAsB,EACpEC,EAAS,CACX,CAKA,SAASN,EAAYI,EAAU,CAC7BA,EAAE,eAAe,EAGjB,IAAMG,EACJ,WAAW,WAAWL,CAAqC,EAAE,QAI/D,OADqC,aAAa,QAAQG,CAAuB,EAC1D,CACrB,IAAK,eAA2B,CAE9B,aAAa,QAAQA,EAAyB,aAAwB,EAGlEE,GACF,aAAa,QAAQF,EAAyB,WAAsB,EAEtE,KACF,CACA,IAAK,cAA0B,CAE7B,aAAa,QAAQA,EAAyB,cAAyB,EAGlEE,GACH,aAAa,QAAQF,EAAyB,WAAsB,EAEtE,KACF,CACA,QAEME,EACF,aAAa,QAAQF,EAAyB,cAAyB,EAGvE,aAAa,QAAQA,EAAyB,aAAwB,CAG5E,CAEAC,EAAS,CACX,CAKA,SAASA,GAAW,CAElB,IAAMC,EACJ,WAAW,WAAWL,CAAqC,EAAE,QAI/D,OADoC,aAAa,QAAQG,CAAuB,EAC1D,CACpB,IAAK,eAA2B,CAC9BG,EAAc,EACd,KACF,CACA,IAAK,cAA0B,CAC7BC,EAAa,EACb,KACF,CACA,QAAS,CAEHF,EACFE,EAAa,EAEbD,EAAc,EAEhB,KACF,CACF,CACF,CAKA,SAASA,GAAgB,CAEvB,SAAS,gBAAgB,MAAM,YAC7B,qBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,gCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,wBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,mCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,kBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,6BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,qBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,gCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,gBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,2BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,mBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,8BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,kBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,6BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,0BACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,qCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,qBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,gCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,oBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,+BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,4BACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,uCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,uBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,kCACF,CACF,CACF,CAKA,SAASC,GAAe,CAEtB,SAAS,gBAAgB,MAAM,YAC7B,qBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,+BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,wBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,kCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,kBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,4BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,qBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,+BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,gBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,0BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,mBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,6BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,kBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,4BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,0BACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,oCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,qBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,+BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,oBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,8BACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,4BACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,sCACF,CACF,EAGA,SAAS,gBAAgB,MAAM,YAC7B,uBACA,iBAAiB,SAAS,eAAe,EAAE,iBACzC,iCACF,CACF,CACF",
  "names": ["LOCAL_STORAGE_THEME_KEY", "PREFERS_COLOR_SCHEME_DARK_MEDIA_QUERY", "initTheme", "toggleThemeButton", "toggleTheme", "darkModeMediaQuery", "PREFERS_COLOR_SCHEME_DARK_MEDIA_QUERY", "handlePrefersColorSchemeMediaQueryToggle", "e", "LOCAL_STORAGE_THEME_KEY", "setTheme", "prefersDarkColorSchemeCssMediaFeature", "setLightTheme", "setDarkTheme"]
}