mirrors/frp
1
0
Fork 0
mirror of https://github.com/fatedier/frp.git synced 2025-07-13 01:09:25 +07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fatedier
2023-02-22 14:15:21 +08:00
committed by GitHub
parent 2f59e967a0
commit 31f40aa913
19 changed files with 224 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/frpc/components.d.ts vendored
View File

@ -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']

51
web/frpc/src/App.vue
View File

@ -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>

5
web/frpc/src/assets/dark.css Normal file
View File

@ -0,0 +1,5 @@
html.dark {
--el-bg-color: #343432;
--el-fill-color-blank: #343432;
background-color: #343432;
}

3
web/frpc/src/main.ts
View File

@ -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);

1
web/frps/components.d.ts vendored
View File

@ -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']

2
web/frps/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8">

51
web/frps/src/App.vue
View File

@ -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>

5
web/frps/src/assets/dark.css Normal file
View File

@ -0,0 +1,5 @@
html.dark {
--el-bg-color: #343432;
--el-fill-color-blank: #343432;
background-color: #343432;
}

4
web/frps/src/components/ServerOverview.vue
View File

@ -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 {

2
web/frps/src/main.ts
View File

@ -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)