web/frpc&frps: support dark mode (#3327)

web/frpc/src/App.vue

@@ -1,9 +1,24 @@
 <template>
   <div id="app">
     <header class="grid-content header-color">
-      <el-row>
-        <a class="brand" href="#">frp client</a>
-      </el-row>
+      <div class="header-content">
+        <div class="brand">
+          <a href="#">frp client</a>
+        </div>
+        <div class="dark-switch">
+          <el-switch
+            v-model="darkmodeSwitch"
+            inline-prompt
+            active-text="Dark"
+            inactive-text="Light"
+            @change="toggleDark"
+            style="
+              --el-switch-on-color: #444452;
+              --el-switch-off-color: #589ef8;
+            "
+          />
+        </div>
+      </div>
     </header>
     <section>
       <el-row>
@@ -33,6 +48,13 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+import { useDark, useToggle } from "@vueuse/core";
+
+const isDark = useDark();
+const darkmodeSwitch = ref(isDark);
+const toggleDark = useToggle(isDark);
+
 const handleSelect = (key: string) => {
   if (key == "") {
     window.open("https://github.com/fatedier/frp");
@@ -42,7 +64,6 @@ const handleSelect = (key: string) => {
 
 <style>
 body {
-  background-color: #fafafa;
   margin: 0px;
   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
 }
@@ -56,20 +77,40 @@ header {
   background: #58b7ff;
 }
 
+html.dark .header-color {
+  background: #395c74;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+}
+
 #content {
   margin-top: 20px;
   padding-right: 40px;
 }
 
 .brand {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.brand a {
   color: #fff;
   background-color: transparent;
   margin-left: 20px;
-  float: left;
   line-height: 25px;
   font-size: 25px;
   padding: 15px 15px;
   height: 30px;
   text-decoration: none;
 }
+
+.dark-switch {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  padding-right: 40px;
+}
 </style>