feat: add toast

open-isle-cli/src/assets/global.css

@@ -7,6 +7,7 @@
   --header-border-color: lightgray;
   --header-text-color: black;
   --menu-background-color: white;
+  --background-color: white;
   --menu-border-color: lightgray;
   --menu-selected-background-color: rgba(208, 250, 255, 0.659);
   --menu-text-color: black;
@@ -22,6 +23,7 @@
   --header-border-color: #555;
   --header-text-color: white;
   --menu-background-color: #333;
+  --background-color: #121212;
   --menu-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
   --menu-text-color: white;

open-isle-cli/src/utils/theme.js

@@ -1,4 +1,5 @@
 import { reactive } from 'vue'
+import { toast } from '../main'
 
 export const ThemeMode = {
   SYSTEM: 'system',
@@ -40,6 +41,13 @@ export function cycleTheme() {
   const modes = [ThemeMode.SYSTEM, ThemeMode.LIGHT, ThemeMode.DARK]
   const index = modes.indexOf(themeState.mode)
   const next = modes[(index + 1) % modes.length]
+  if (next === ThemeMode.SYSTEM) {
+    toast.success('💻 已经切换到系统主题')
+  } else if (next === ThemeMode.LIGHT) {
+    toast.success('🌞 已经切换到明亮主题')
+  } else {
+    toast.success('🌙 已经切换到暗色主题')
+  }
   setTheme(next)
 }
 

open-isle-cli/src/views/HomePageView.vue

@@ -153,6 +153,7 @@ export default {
 
 <style scoped>
 .home-page {
+  background-color: var(--background-color);
   height: calc(100vh - var(--header-height));
   display: flex;
   flex-direction: column;

open-isle-cli/src/views/PostPageView.vue

@@ -244,6 +244,7 @@ export default {
 </script>
 <style>
 .post-page-container {
+  background-color: var(--background-color);
   display: flex;
   flex-direction: row;
   height: calc(100vh - var(--header-height));