src/shared/utils/app/set-theme.ts

   1 import { fetchThemeList } from "@utils/app";
   2 import { isBrowser, loadCss } from "@utils/browser";
   3
   4 export default async function setTheme(theme: string, forceReload = false) {
   5   if (!isBrowser()) {
   6     return;
   7   }
   8   if (theme === "browser" && !forceReload) {
   9     return;
  10   }
  11   // This is only run on a force reload
  12   if (theme == "browser") {
  13     theme = "darkly";
  14   }
  15
  16   const themeList = await fetchThemeList();
  17
  18   // Unload all the other themes
  19   for (var i = 0; i < themeList.length; i++) {
  20     const styleSheet = document.getElementById(themeList[i]);
  21     if (styleSheet) {
  22       styleSheet.setAttribute("disabled", "disabled");
  23     }
  24   }
  25
  26   document
  27     .getElementById("default-light")
  28     ?.setAttribute("disabled", "disabled");
  29   document.getElementById("default-dark")?.setAttribute("disabled", "disabled");
  30
  31   // Load the theme dynamically
  32   const cssLoc = `/css/themes/${theme}.css`;
  33
  34   loadCss(theme, cssLoc);
  35   document.getElementById(theme)?.removeAttribute("disabled");
  36 }