Xray-docs-next/docs/.vuepress/theme/components/ThemeToggle.vue

<template>
  <nav v-if="enable" class="navbar-links toggle-bar">
    <div class="navbar-links-item">
      <a class="nav-link" @click.prevent="toggleTheme">{{ text }}</a>
    </div>
  </nav>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useThemeLocaleData } from "@vuepress/plugin-theme-data/lib/client";
import { ToggleOptions } from "../types";

export default defineComponent({
  computed: {
    enable: function (): Boolean {
      const option = useThemeLocaleData<ToggleOptions>();
      return option.value.enableToggle;
    },
    text: function (): String {
      const option = useThemeLocaleData<ToggleOptions>();
      return option.value.ToggleText;
    },
  },
  methods: {
    toggleTheme() {
      const html = document.getElementsByTagName("html")[0];

      let theme = html.getAttribute("theme");
      if (theme == "light") {
        html.setAttribute("theme", "dark");
      } else if (theme == "dark") {
        html.setAttribute("theme", "light");
      } else {
        html.setAttribute("theme", "light");
      }
    },
  },
});
</script>

<style lang="scss" scoped>
.toggle-bar {
  margin-left: 1.5rem;
}
</style>