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

mumu · Feb 22, 2023 · 31f40aa · 31f40aa
1 parent 2f59e96
commit 31f40aa
Show file tree

Hide file tree

Showing 19 changed files with 224 additions and 127 deletions.
diff --git a/assets/frpc/static/index-26827c97.css b/assets/frpc/static/index-26827c97.css
diff --git a/assets/frpc/static/index-a2ed7ed4.js b/assets/frpc/static/index-a2ed7ed4.js
diff --git a/assets/frpc/static/index-aa3c7267.css b/assets/frpc/static/index-aa3c7267.css
diff --git a/assets/frpc/static/index-fec891f3.js b/assets/frpc/static/index-fec891f3.js
diff --git a/assets/frpc/static/index.html b/assets/frpc/static/index.html
@@ -4,8 +4,8 @@
 <head>
     <meta charset="utf-8">
     <title>frp client admin UI</title>
-  <script type="module" crossorigin src="./index-fec891f3.js"></script>
-  <link rel="stylesheet" href="./index-26827c97.css">
+  <script type="module" crossorigin src="./index-a2ed7ed4.js"></script>
+  <link rel="stylesheet" href="./index-aa3c7267.css">
 </head>
 
 <body>

diff --git a/assets/frps/static/index-2a8cf2f5.js b/assets/frps/static/index-2a8cf2f5.js
diff --git a/assets/frps/static/index-4ce77078.css → assets/frps/static/index-7b4711f8.css b/assets/frps/static/index-4ce77078.css → assets/frps/static/index-7b4711f8.css
diff --git a/assets/frps/static/index-b8250b3f.js b/assets/frps/static/index-b8250b3f.js
diff --git a/assets/frps/static/index.html b/assets/frps/static/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 
 <head>
     <meta charset="utf-8">
     <title>frps dashboard</title>
-  <script type="module" crossorigin src="./index-2a8cf2f5.js"></script>
-  <link rel="stylesheet" href="./index-4ce77078.css">
+  <script type="module" crossorigin src="./index-b8250b3f.js"></script>
+  <link rel="stylesheet" href="./index-7b4711f8.css">
 </head>
 
 <body>

diff --git a/web/frpc/components.d.ts b/web/frpc/components.d.ts
@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Overview: typeof import('./src/components/Overview.vue')['default']

diff --git a/web/frpc/src/App.vue b/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>
diff --git a/web/frpc/src/assets/dark.css b/web/frpc/src/assets/dark.css
@@ -0,0 +1,5 @@
+html.dark {
+  --el-bg-color: #343432;
+  --el-fill-color-blank: #343432;
+  background-color: #343432;
+}
diff --git a/web/frpc/src/main.ts b/web/frpc/src/main.ts
@@ -1,9 +1,10 @@
 import { createApp } from "vue";
 import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
 import App from "./App.vue";
 import router from "./router";
 
-// import './assets/custom.css'
+import "./assets/dark.css";
 
 const app = createApp(App);
 

diff --git a/web/frps/components.d.ts b/web/frps/components.d.ts
@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

diff --git a/web/frps/index.html b/web/frps/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 
 <head>
     <meta charset="utf-8">

diff --git a/web/frps/src/App.vue b/web/frps/src/App.vue
@@ -1,9 +1,24 @@
 <template>
   <div id="app">
     <header class="grid-content header-color">
-      <el-row>
-        <a class="brand" href="#">frp</a>
-      </el-row>
+      <div class="header-content">
+        <div class="brand">
+          <a href="#">frp</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>
@@ -43,6 +58,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')
@@ -52,7 +74,6 @@ const handleSelect = (key: string) => {
 
 <style>
 body {
-  background-color: #fafafa;
   margin: 0px;
   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
 }
@@ -66,20 +87,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>
diff --git a/web/frps/src/assets/dark.css b/web/frps/src/assets/dark.css
@@ -0,0 +1,5 @@
+html.dark {
+  --el-bg-color: #343432;
+  --el-fill-color-blank: #343432;
+  background-color: #343432;
+}
diff --git a/web/frps/src/components/ServerOverview.vue b/web/frps/src/components/ServerOverview.vue
@@ -173,10 +173,10 @@ fetchData()
 
 <style>
 .source {
-  border: 1px solid #eaeefb;
   border-radius: 4px;
   transition: 0.2s;
-  padding: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 .server_info {

diff --git a/web/frps/src/main.ts b/web/frps/src/main.ts
@@ -1,9 +1,11 @@
 import { createApp } from 'vue'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import App from './App.vue'
 import router from './router'
 
 import './assets/custom.css'
+import './assets/dark.css'
 
 const app = createApp(App)