From df3906c1cc00abcc3cfec729ececf8d755add6e8 Mon Sep 17 00:00:00 2001
From: leejooy96 <leejooy96@gmail.com>
Date: Tue, 12 Jul 2022 09:24:25 +0900
Subject: [PATCH] renderer: add theme switcher, go to about page button in main
 screen

---
 src/locales/en.json                           |  5 ++
 src/locales/ko.json                           |  5 ++
 src/renderer/assets/js/utils/index.js         |  6 +++
 src/renderer/components/screen/MainScreen.vue | 46 +++++++++++++++++++
 4 files changed, 62 insertions(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index bd09c8c..49a8816 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,10 @@
 {
   "desc": {
     "welcome": "Thank you for using Vutron. This cool template makes it easy to create a variety of cross-platform applications."
+  },
+  "menu": {
+    "change-theme": "Change Theme",
+    "change-language": "Change Language",
+    "about": "About Vutron"
   }
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 8eebcb7..eafbd02 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -1,5 +1,10 @@
 {
   "desc": {
     "welcome": "Vutron을 이용해주셔서 감사드립니다. 이 멋진 템플릿을 활용하면 다양한 크로스플랫폼 애플리케이션을 손쉽게 제작할 수 있습니다."
+  },
+  "menu": {
+    "change-theme": "테마 변경",
+    "change-language": "언어 변경",
+    "about": "Vutron 정보"
   }
 }
diff --git a/src/renderer/assets/js/utils/index.js b/src/renderer/assets/js/utils/index.js
index 1e76917..be12f97 100644
--- a/src/renderer/assets/js/utils/index.js
+++ b/src/renderer/assets/js/utils/index.js
@@ -1,5 +1,11 @@
+import { shell } from 'electron'
+
 export default class Utils {
   static getCurrentLocale () {
     return navigator?.language?.split('-')[0] || 'en'
   }
+
+  static async openExternal (url) {
+    await shell.openExternal(url)
+  }
 }
diff --git a/src/renderer/components/screen/MainScreen.vue b/src/renderer/components/screen/MainScreen.vue
index 282ada0..e6f3265 100644
--- a/src/renderer/components/screen/MainScreen.vue
+++ b/src/renderer/components/screen/MainScreen.vue
@@ -1,4 +1,22 @@
 <script setup>
+// import { useI18n } from 'vue-i18n'
+import { useTheme } from 'vuetify'
+import Utils from '../../assets/js/utils'
+
+// const { locale } = useI18n()
+const theme = useTheme()
+
+const handleChangeTheme = () => {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
+
+const handleChangeLanguage = () => {
+  // locale.value = 'en' // TODO
+}
+
+const handleAbout = async () => {
+  await Utils.openExternal('https://github.com/jooy2/vutron')
+}
 </script>
 
 <template>
@@ -17,6 +35,34 @@
       <v-col cols="12">
         {{ $t('desc.welcome') }}
       </v-col>
+      <v-col cols="4">
+        <v-btn
+          block
+          color="primary"
+          @click="handleChangeTheme"
+        >
+          {{ $t('menu.change-theme') }}
+        </v-btn>
+      </v-col>
+      <v-col cols="4">
+        <v-btn
+          block
+          disabled
+          color="primary"
+          @click="handleChangeLanguage"
+        >
+          {{ $t('menu.change-language') }}
+        </v-btn>
+      </v-col>
+      <v-col cols="4">
+        <v-btn
+          block
+          color="primary"
+          @click="handleAbout"
+        >
+          {{ $t('menu.about') }}
+        </v-btn>
+      </v-col>
     </v-row>
   </v-container>
 </template>