text: export default {
  
      data() {
          return {
              system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
              userTheme: localStorage.theme,
              userHeartbeatBar: localStorage.heartbeatBarTheme,
              statusPageTheme: "light",
              path: "",
          };
      },
  
      mounted() {
          // Default Light
          if (! this.userTheme) {
              this.userTheme = "auto";
          }
  
          // Default Heartbeat Bar
          if (!this.userHeartbeatBar) {
              this.userHeartbeatBar = "normal";
          }
  
          document.body.classList.add(this.theme);
          this.updateThemeColorMeta();
      },
  
      computed: {
          theme() {
  
              // Entry no need dark
              if (this.path === "") {
                  return "light";
              }
  
              if (this.path === "/status-page") {
                  return this.statusPageTheme;
              } else {
                  if (this.userTheme === "auto") {
                      return this.system;
                  }
                  return this.userTheme;
              }
          }
      },
  
      watch: {
          "$route.fullPath"(path) {
              this.path = path;
          },
  
          userTheme(to, from) {
              localStorage.theme = to;
          },
  
          theme(to, from) {
              document.body.classList.remove(from);
              document.body.classList.add(this.theme);
              this.updateThemeColorMeta();
          },
  
          userHeartbeatBar(to, from) {
              localStorage.heartbeatBarTheme = to;
          },
  
          heartbeatBarTheme(to, from) {
              document.body.classList.remove(from);
              document.body.classList.add(this.heartbeatBarTheme);
          }
      },
  
      methods: {
          updateThemeColorMeta() {
              if (this.theme === "dark") {
                  document.querySelector("#theme-color").setAttribute("content", "#161B22");
              } else {
                  document.querySelector("#theme-color").setAttribute("content", "#5cdd8b");
              }
          }
      }
  };
  
  