暗色主题

src/linker.doc.web/docs/2、安装运行/2.7、初始化配置2（服务端）.md

@@ -30,7 +30,9 @@ server.json
         //web端口，用于按域名穿透
         "WebPort": 0,
         //隧道端口范围，用于按端口穿透
-        "TunnelPortRange": [ 10000,60000]
+        "TunnelPortRange": [ 10000,60000],
+        //是否允许匿名穿透
+        "Anonymous":false
     },
     //登入信标密钥，默认为空，即为所有客户端均可登入本信标服务器
     "SignIn": {
@@ -48,7 +50,7 @@ server.json
         }
     },
     "Updater": {
-        "Sync2Server": false //客户端自动同步到服务器版本
+        "Sync2Server": false //本服务器所有客户端自动同步到服务器版本
     }
 
 }

src/linker.web/src/assets/style.css

@@ -173,6 +173,13 @@ html {
     /* background-color: #282c34; */
     background-color: #f4f4f4;
 }
+html.dark{
+    background-color: #282c34;
+}
+html.dark .el-switch__core .el-switch__action{
+    background-color: #ccc;
+}
+html.dark .el-dialog{border: 1px solid #575c61;}
 
 body {
     overflow: hidden;

src/linker.web/src/views/full/Head.vue

@@ -105,6 +105,9 @@
             <div class="image" v-if="globalData.isPc">
                 <Background name="full"></Background>
             </div>
+            <div class="image" v-if="globalData.isPc">
+                <Theme name="full"></Theme>
+            </div>
         </div>
     </div>
 </template>
@@ -114,11 +117,12 @@ import {Operation,ArrowDown} from '@element-plus/icons-vue'
 import { injectGlobalData } from '@/provide';
 import { computed, ref} from 'vue';
 import Background from './Background.vue';
+import Theme from './Theme.vue';
 import { LOCALE_OPTIONS } from '@/lang'
 import useLocale from '@/lang/provide'
 import { useRoute } from 'vue-router';
 export default {
-    components:{Background,Operation,ArrowDown},
+    components:{Background,Theme,Operation,ArrowDown},
     setup() {
 
         const route = useRoute();
@@ -160,6 +164,13 @@ export default {
 
 <style lang="stylus" scoped>
 #file-input{opacity :0;position absolute;z-index :-1}
+html.dark .head{background-color:#242526;border-color:#575c61;}
+html.dark .head .menu a{
+    color:#ccc;
+    &:hover,&.router-link-active{
+        background-color:rgba(0,0,0,0.5);
+    }
+}
 .head{
     background-color:#f6f8fa;
     border-bottom:1px solid #d0d7de;
@@ -226,7 +237,7 @@ body.sunny{
     background-image:url(../../../public/bg.jpg);
     background-repeat:no-repeat;
     background-size:cover;  
-    background-position:center bottom;
+    background-position:center center;
 
     position:absolute;
     left:0;
@@ -234,31 +245,34 @@ body.sunny{
     right:0;
     bottom:0;
 }
-body.sunny .app-wrap{
-    background-color:rgba(255,255,255,0.5);
-}
-body.sunny .status-wrap{
-    background-color:rgba(245,245,245,0.3);
-}
+body.sunny .app-wrap{ background-color:rgba(255,255,255,0.5);}
+html.dark body.sunny .app-wrap{ background-color:rgba(0,0,0,0.5);}
+
+body.sunny .status-wrap{ background-color:rgba(245,245,245,0.3);}
+html.dark body.sunny .status-wrap{ background-color:rgba(0,0,0,0.3);}
+html.dark body.sunny .flow-wrap{ background-color:rgba(0,0,0,0.3);}
 body.sunny .status-wrap .copy a{
     color:#333;
 }
-body.sunny .el-table{
-    background-color:rgba(255,255,255,0.5);
-}
-body.sunny .head{
-    background-color:rgba(246 248 250,0.5);
-}
-body.sunny .el-table tr{
-    background-color:rgba(246 248 250,0.2);
-}
-body.sunny .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
-    background-color:rgba(246 248 250,0.2);
-}
-body.sunny .el-pagination__sizes, .el-pagination__total{
-    color:#000;
-}
-body.sunny .status-wrap .copy a{
-    color:#000;
-}
+body.sunny .el-table{ background-color:rgba(255,255,255,0.5);}
+html.dark body.sunny .el-table{background-color:rgba(0,0,0,0.3);}
+html.dark body.sunny .el-table th.el-table__cell{background-color:rgba(0,0,0,0.3);}
+
+body.sunny .head{ background-color:rgba(246 248 250,0.5);}
+html.dark body.sunny .head{background-color:rgba(0,0,0,0.2);}
+
+body.sunny .el-table tr{ background-color:rgba(246 248 250,0.2);}
+html.dark body.sunny .el-table tr{background-color:rgba(0,0,0,0.2);}
+
+body.sunny .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background-color:rgba(246 248 250,0.2);}
+html.dark body.sunny .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background-color:rgba(0,0,0,0.1);}
+
+body.sunny .el-pagination__sizes,body.sunny  .el-pagination__total{ color:#000;}
+html.dark body.sunny .el-pagination__sizes,body.sunny  .el-pagination__total{ color:#999;}
+body.sunny .status-wrap .copy a{ color:#000;}
+
+html.dark body.sunny .el-card,
+html.dark body.sunny .el-tabs--border-card,
+html.dark body.sunny .el-tabs--border-card>.el-tabs__header,
+html.dark body.sunny .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background-color:rgba(0,0,0,0.3);}
 </style>

src/linker.web/src/views/full/Index.vue

@@ -83,4 +83,8 @@ export default {
     top:50%;
     transform:translateX(-50%) translateY(-50%);
 }
+html.dark .app-wrap{
+    background-color:#141414;
+    border-color:#575c61;
+}
 </style>

src/linker.web/src/views/full/Theme.vue

@@ -0,0 +1,45 @@
+<template>
+    <a href="javascript:;" @click="changeMode('light')" v-if="state.mode == 'dark'"><el-icon><Moon /></el-icon></a>
+    <a href="javascript:;" @click="changeMode('dark')" v-else><el-icon><Sunny /></el-icon></a>
+</template>
+
+<script>
+import {Moon,Sunny} from '@element-plus/icons-vue'
+import { onMounted, reactive } from 'vue';
+export default {
+    components:{Moon,Sunny},
+    setup () {
+
+        const isSystemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const isSystemLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+        const cacheMode = localStorage.getItem('theme-mode') || (isSystemDarkMode?'dark':'light');
+        
+        console.log(cacheMode);
+        const state = reactive({
+            mode: cacheMode,
+        });
+        const changeMode = (mode)=>{
+            state.mode = mode;
+            localStorage.setItem('theme-mode', mode);
+            setMode();
+        }
+        const setMode = ()=>{
+            document.querySelector('html').setAttribute('class', state.mode);
+        }
+
+        onMounted(()=>{
+            setMode();
+        })
+
+        return {state,changeMode}
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.el-icon{
+    font-size:1.6rem;
+    vertical-align:middle;
+    color:#555;
+}
+</style>

src/linker.web/src/views/full/devices/ConnectionShow.vue

@@ -12,7 +12,7 @@
             </template>
         </template>
         <template v-else>
-            <span class="connect-point" title="未连接" v-loading="state.connecting"></span>
+            <span class="connect-point default" title="未连接" v-loading="state.connecting"></span>
         </template>
    </div>
 </template>
@@ -90,5 +90,6 @@ span.connect-point.node {
     background-color: #09dda9;
     border: 1px solid #0cac90;
 }
+html.dark span.connect-point.default{background-color: #666;border-color:#888}
 
 </style>

src/linker.web/src/views/full/devices/Oper.vue

@@ -174,6 +174,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+
+html.dark .dropdown{border-color:#575c61;}
 .dropdown{
     border:1px solid #ddd;
     padding:.4rem;

src/linker.web/src/views/full/devices/Tunnel.vue

@@ -150,6 +150,7 @@ export default {
 
 .green{font-weight:bold;}
 
+
 img.system,span.nat{
     height:1.4rem;
     margin-right:.4rem
@@ -157,5 +158,7 @@ img.system,span.nat{
     line-height:1.4rem;
     vertical-align:middle;
 }
+html.dark img.system,html.dark span.nat{border-color:#575c61;}
+
 span.nat{display:inline-block;padding:0 .2rem;margin-right:0;font-family: fantasy;}
 </style>

src/linker.web/src/views/full/firewall/Firewall.vue

@@ -289,6 +289,7 @@ export default {
     border:1px solid #eee;
     padding:0 1rem 1rem 1rem;
 }
+html.dark .head{border-color:#575c61;}
 </style>
 <style  lang="stylus">
 .firewall.el-table {
@@ -300,8 +301,5 @@ export default {
         color: #c83f08;
     }
 }
-.el-dropdown-link{
-    font-size:1.2rem;
-    padding-top:.3rem;
-}
+
 </style>

src/linker.web/src/views/full/status/Export.vue

@@ -266,6 +266,7 @@ export default {
 }
 </script>
 <style lang="stylus" scoped>
+html.dark .status-wrap .status-export-wrap  a{color:#ccc;}
 .status-export-wrap{
     padding-right:1rem;
     a{

src/linker.web/src/views/full/status/Index.vue

@@ -48,6 +48,8 @@ export default {
 }
 </script>
 <style lang="stylus" scoped>
+html.dark .status-wrap{background-color:#242526;border-color:#575c61;}
+html.dark .status-wrap .copy a{color:#ccc;}
 .status-wrap{
     border-top:1px solid #ddd;
     background-color:#f5f5f5;

src/linker.web/src/views/full/status/server/ServerFlow.vue

@@ -183,6 +183,10 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+html.dark .flow-wrap{
+    background-color: #242526;
+    border-color: #575c61;
+}
 .flow-wrap{
     padding:.4rem;
     font-weight:bold;position:absolute;right:1rem;bottom:80%;

src/linker.web/src/views/full/wakeup/Wakeup.vue

@@ -201,6 +201,7 @@ export default {
 }
 </script>
 <style lang="stylus" scoped>
+html.dark .head{border-color:#575c61;}
 .head {
     margin-bottom: 1rem;
     color:#555;

version.txt

@@ -1,5 +1,5 @@
 v1.8.6
-2025-07-09 01:29:47
+2025-07-09 15:26:47
 1. 一些累计更新
 2. 白名单
 3. 优化防火墙