@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/navbar/ThemeMode.vue

@@ -1,120 +1,136 @@
-<template>
-  <li class="mt-10 b-t-1 pt-10">
-    <ul class="ac-vscrollbar">
-      <li>
-        <div class="ac-menu-contentt theme-choicee">
-          <ul class="is-flex is-flex-direction-row is-justify-content-center">
-            <li
-              v-for="theme of Object.keys(themeModes)"
-              :title="themeModes[theme].displayName"
-              @click="themeMode = theme"
-              class="p-10 pl-30 pr-30 is-flex-grow-1 has-text-centered"
-              :class="{ 'is-active': themeMode === theme }"
-              :key="theme"
-            >
-              <i :class="['fa', themeModes[theme].iconClass]" />
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-  </li>
-</template>
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  data() {
-    return {
-      themeMode: "",
-      themeModes: {
-        light: {
-          displayName: "Light Theme",
-          iconClass: "fa-sun-o",
-        },
-        dark: {
-          displayName: "Dark Theme",
-          iconClass: "fa-moon-o",
-        },
-        system: {
-          displayName: "System Theme",
-          iconClass: "fa-desktop",
-        },
-      },
-    };
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import type { ThemeModes } from "../../types/theme";
+
+const themeMode = ref("");
+const themeModes = ref<ThemeModes>({
+  light: {
+    displayName: "Light Theme",
+    iconClass: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+</svg>
+`,
+  },
+  dark: {
+    displayName: "Dark Theme",
+    iconClass: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+</svg>
+`,
   },
+  system: {
+    displayName: "System Theme",
+    iconClass: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+</svg>
+`,
+  },
+});
 
-  emits: ["set:theme"],
+const emit = defineEmits(["set:theme"]);
 
-  mounted() {
-    // get theme mode from localStorage or set default one
-    this.themeMode = localStorage.getItem("themeMode") || "light";
-  },
+onMounted(() => {
+  // get theme mode from localStorage or set default one
+  themeMode.value = localStorage.getItem("themeMode") || "light";
+});
 
-  unmounted() {
-    this.removeColorSchemeEventListener();
-  },
+onUnmounted(() => {
+  removeColorSchemeEventListener();
+});
 
-  watch: {
-    themeMode: {
-      handler(n) {
-        this.onThemeModeChange(n);
-      },
-    },
-  },
+const onThemeModeChange = (n: string) => {
+  localStorage.setItem("themeMode", n);
 
-  methods: {
-    // handle theme mode button click
-    toggleTheme() {
-      if (this.themeMode === "light") this.themeMode = "dark";
-      else if (this.themeMode === "dark") this.themeMode = "system";
-      else if (this.themeMode === "system") this.themeMode = "light";
-    },
-
-    // triggered when theme mode is updated
-    onThemeModeChange(n) {
-      localStorage.setItem("themeMode", n);
-
-      let theme = n;
-      if (n === "system") {
-        const isDarkMode =
-          window.matchMedia &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches;
-        this.addColorSchemeEventListener();
-        theme = isDarkMode ? "dark" : "light";
-      } else {
-        this.removeColorSchemeEventListener();
-      }
-      this.$emit("set:theme", theme);
-      this.handleDarkThemeClass(theme);
-    },
-
-    // add proper css class to update the ui theme
-    handleDarkThemeClass(currentTheme) {
-      if (currentTheme === "light") {
-        document.documentElement.classList.remove("is-dark-theme");
-      } else {
-        document.documentElement.classList.add("is-dark-theme");
-      }
-    },
-
-    // add system theme listener event
-    addColorSchemeEventListener() {
-      window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", this.handleSystemThemeChange);
-    },
-
-    // remove system theme listener event
-    removeColorSchemeEventListener() {
-      window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .removeEventListener("change", this.handleSystemThemeChange);
-    },
-
-    handleSystemThemeChange() {
-      this.onThemeModeChange(this.themeMode);
-    },
-  },
+  let theme = n;
+  if (n === "system") {
+    const isDarkMode =
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+    addColorSchemeEventListener();
+    theme = isDarkMode ? "dark" : "light";
+  } else {
+    removeColorSchemeEventListener();
+  }
+  emit("set:theme", theme);
+  handleDarkThemeClass(theme);
+};
+
+const handleDarkThemeClass = (currentTheme: string) => {
+  if (currentTheme === "light") {
+    document.documentElement.classList.remove("is-dark-theme");
+  } else {
+    document.documentElement.classList.add("is-dark-theme");
+  }
+};
+
+const addColorSchemeEventListener = () => {
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", handleSystemThemeChange);
+};
+
+const handleSystemThemeChange = () => {
+  onThemeModeChange(themeMode.value);
+};
+
+const removeColorSchemeEventListener = () => {
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .removeEventListener("change", handleSystemThemeChange);
+};
+
+watch(themeMode, (n) => {
+  onThemeModeChange(n);
 });
 </script>
+
+<template>
+  <div class="theme-choicee is-flex">
+    <li
+      v-for="theme of Object.keys(themeModes)"
+      :title="themeModes[theme as keyof ThemeModes].displayName"
+      @click="themeMode = theme"
+      class="is-flex-grow-1 has-text-centered"
+      :class="[
+        themeMode === theme ? 'is-active' : '',
+        theme === 'dark' ? 'b-l-1 b-r-1' : '',
+      ]"
+      :key="theme"
+    >
+      <span
+        class="icon"
+        v-html="themeModes[theme as keyof ThemeModes].iconClass"
+      ></span>
+    </li>
+  </div>
+</template>
+
+<style lang="scss">
+.theme-choicee {
+  border-top: 1px solid $primary-90;
+
+  li {
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $primary-20;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background: $primary-95;
+    }
+
+    &.is-active {
+      background: $primary-90;
+      color: $primary;
+    }
+  }
+}
+</style>