适配深色模式

ljxi · Oct 23, 2023 · f8d8f81 · f8d8f81
1 parent a8618b2
commit f8d8f81
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <meta name="description" content="在线流量消耗器，测试您的网速，多地测试您的网络环境">
     <meta name="keywords" content="网络面板,ljxnet,Whoami,流量消耗器，流量消耗">
     <meta name="author" content="Whoami">
+    <meta name="color-scheme" content="light dark">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
@@ -23,6 +24,17 @@
             margin: 0;
             font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
         }
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: rgb(33,34,37);
+            }
+            :root{
+                --el-color-white: rgb(18,18,18);
+            }
+            .el-loading-mask {
+                --el-mask-color: rgb(20,20,20);
+            }
+        }
         ::-webkit-scrollbar {
             display: none; /* Chrome Safari */
           }
@@ -60,6 +72,14 @@
                 }
             )
         }
+        const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const classVal = document.getElementsByTagName('html')[0].classList;
+        if (darkModeQuery.matches) {
+            classVal.add("dark");
+        }
+        darkModeQuery.addEventListener("change", (e) => {
+            e.matches ? classVal.add("dark") : classVal.remove("dark")
+        });
     </script>
 </body>
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,36 @@
 <template>
-  <el-container >
-    <el-header style="height: fit-content;padding-bottom: 12px;background-color: #ffffff;">
+  <el-container>
+    <el-header class="header">
       <div style="margin-top: 15px;">
         <div style="width: fit-content;float: left;">
-          <svg style="display:inline-block;vertical-align: -12px;width: 40px;height: 40px;" t="1690001220506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501" width="30" height="30"><path d="M484.266667 718.933333c-27.733333 0-53.333333-10.666667-74.666667-29.866666-21.333333-19.2-32-46.933333-32-74.666667 0-27.733333 10.666667-55.466667 29.866667-76.8 34.133333-36.266667 198.4-102.4 232.533333-115.2 8.533333-2.133333 17.066667-2.133333 23.466667 4.266667 6.4 6.4 8.533333 14.933333 4.266666 23.466666-12.8 34.133333-72.533333 200.533333-106.666666 236.8-21.333333 19.2-46.933333 32-76.8 32z m125.866666-236.8c-70.4 29.866667-155.733333 68.266667-172.8 85.333334-12.8 12.8-19.2 27.733333-17.066666 44.8 0 17.066667 6.4 32 19.2 44.8 12.8 12.8 27.733333 17.066667 44.8 17.066666s32-6.4 44.8-19.2c17.066667-17.066667 53.333333-102.4 81.066666-172.8z" fill="#05f0f9" p-id="2502"></path><path d="M196.266667 891.733333c-6.4 0-10.666667-2.133333-14.933334-6.4C91.733333 797.866667 42.666667 680.533333 42.666667 554.666667 42.666667 296.533333 253.866667 85.333333 512 85.333333s469.333333 211.2 469.333333 469.333334c0 125.866667-49.066667 243.2-136.533333 332.8-8.533333 8.533333-21.333333 8.533333-29.866667 0s-8.533333-21.333333 0-29.866667C893.866667 776.533333 938.666667 667.733333 938.666667 554.666667c0-234.666667-192-426.666667-426.666667-426.666667S85.333333 320 85.333333 554.666667c0 113.066667 44.8 221.866667 125.866667 300.8 8.533333 8.533333 8.533333 21.333333 0 29.866666-4.266667 6.4-10.666667 6.4-14.933333 6.4z" fill="#05f0f9" p-id="2503"></path><path d="M512 234.666667c-12.8 0-21.333333-8.533333-21.333333-21.333334V128c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333v85.333333c0 12.8-8.533333 21.333333-21.333333 21.333334zM761.6 356.266667c-6.4 0-12.8-2.133333-17.066667-8.533334-6.4-8.533333-6.4-23.466667 2.133334-29.866666l66.133333-53.333334c8.533333-6.4 23.466667-6.4 29.866667 2.133334 6.4 8.533333 6.4 23.466667-2.133334 29.866666l-66.133333 53.333334c-2.133333 4.266667-6.4 6.4-12.8 6.4zM906.666667 644.266667h-4.266667l-83.2-19.2c-10.666667-2.133333-19.2-14.933333-17.066667-25.6 2.133333-10.666667 14.933333-19.2 25.6-17.066667l83.2 19.2c10.666667 2.133333 19.2 14.933333 17.066667 25.6-2.133333 10.666667-10.666667 17.066667-21.333333 17.066667zM117.333333 644.266667c-10.666667 0-19.2-6.4-21.333333-17.066667-2.133333-10.666667 4.266667-23.466667 14.933333-25.6l83.2-19.2c10.666667-2.133333 23.466667 4.266667 25.6 17.066667 2.133333 10.666667-4.266667 23.466667-14.933333 25.6l-83.2 19.2h-4.266667zM262.4 356.266667c-4.266667 0-8.533333-2.133333-12.8-4.266667L183.466667 298.666667c-8.533333-6.4-10.666667-21.333333-2.133334-29.866667 6.4-8.533333 21.333333-10.666667 29.866667-2.133333L277.333333 320c8.533333 6.4 10.666667 21.333333 2.133334 29.866667-6.4 2.133333-10.666667 6.4-17.066667 6.4z" fill="#05f0f9" p-id="2504"></path></svg>
-          <span style="color: #526484;font-size: 20px;font-weight: bolder;"> 网络面板 </span>
+          <svg style="display:inline-block;vertical-align: -12px;width: 40px;height: 40px;" t="1690001220506" class="icon"
+            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501" width="30" height="30">
+            <path
+              d="M484.266667 718.933333c-27.733333 0-53.333333-10.666667-74.666667-29.866666-21.333333-19.2-32-46.933333-32-74.666667 0-27.733333 10.666667-55.466667 29.866667-76.8 34.133333-36.266667 198.4-102.4 232.533333-115.2 8.533333-2.133333 17.066667-2.133333 23.466667 4.266667 6.4 6.4 8.533333 14.933333 4.266666 23.466666-12.8 34.133333-72.533333 200.533333-106.666666 236.8-21.333333 19.2-46.933333 32-76.8 32z m125.866666-236.8c-70.4 29.866667-155.733333 68.266667-172.8 85.333334-12.8 12.8-19.2 27.733333-17.066666 44.8 0 17.066667 6.4 32 19.2 44.8 12.8 12.8 27.733333 17.066667 44.8 17.066666s32-6.4 44.8-19.2c17.066667-17.066667 53.333333-102.4 81.066666-172.8z"
+              fill="#05f0f9" p-id="2502"></path>
+            <path
+              d="M196.266667 891.733333c-6.4 0-10.666667-2.133333-14.933334-6.4C91.733333 797.866667 42.666667 680.533333 42.666667 554.666667 42.666667 296.533333 253.866667 85.333333 512 85.333333s469.333333 211.2 469.333333 469.333334c0 125.866667-49.066667 243.2-136.533333 332.8-8.533333 8.533333-21.333333 8.533333-29.866667 0s-8.533333-21.333333 0-29.866667C893.866667 776.533333 938.666667 667.733333 938.666667 554.666667c0-234.666667-192-426.666667-426.666667-426.666667S85.333333 320 85.333333 554.666667c0 113.066667 44.8 221.866667 125.866667 300.8 8.533333 8.533333 8.533333 21.333333 0 29.866666-4.266667 6.4-10.666667 6.4-14.933333 6.4z"
+              fill="#05f0f9" p-id="2503"></path>
+            <path
+              d="M512 234.666667c-12.8 0-21.333333-8.533333-21.333333-21.333334V128c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333v85.333333c0 12.8-8.533333 21.333333-21.333333 21.333334zM761.6 356.266667c-6.4 0-12.8-2.133333-17.066667-8.533334-6.4-8.533333-6.4-23.466667 2.133334-29.866666l66.133333-53.333334c8.533333-6.4 23.466667-6.4 29.866667 2.133334 6.4 8.533333 6.4 23.466667-2.133334 29.866666l-66.133333 53.333334c-2.133333 4.266667-6.4 6.4-12.8 6.4zM906.666667 644.266667h-4.266667l-83.2-19.2c-10.666667-2.133333-19.2-14.933333-17.066667-25.6 2.133333-10.666667 14.933333-19.2 25.6-17.066667l83.2 19.2c10.666667 2.133333 19.2 14.933333 17.066667 25.6-2.133333 10.666667-10.666667 17.066667-21.333333 17.066667zM117.333333 644.266667c-10.666667 0-19.2-6.4-21.333333-17.066667-2.133333-10.666667 4.266667-23.466667 14.933333-25.6l83.2-19.2c10.666667-2.133333 23.466667 4.266667 25.6 17.066667 2.133333 10.666667-4.266667 23.466667-14.933333 25.6l-83.2 19.2h-4.266667zM262.4 356.266667c-4.266667 0-8.533333-2.133333-12.8-4.266667L183.466667 298.666667c-8.533333-6.4-10.666667-21.333333-2.133334-29.866667 6.4-8.533333 21.333333-10.666667 29.866667-2.133333L277.333333 320c8.533333 6.4 10.666667 21.333333 2.133334 29.866667-6.4 2.133333-10.666667 6.4-17.066667 6.4z"
+              fill="#05f0f9" p-id="2504"></path>
+          </svg>
+          <span class="title"> 网络面板 </span>
         </div>
         <div style="float: right;">
-          <el-button style="color: #526484;font-size: 12px;" @click="GoToHomePage" round>Q群</el-button>
+          <el-button class="home" @click="GoToHomePage" round>Q群</el-button>
         </div>
       </div>
     </el-header>
     <el-main>
-      <MainUI :isVisible="isVisible" :IPinfo="IPinfo"/>
+      <MainUI :isVisible="isVisible" :IPinfo="IPinfo" />
       <br>
-      <IPinfoUI :isVisible="isVisible" :IPinfo="IPinfo"/>
+      <IPinfoUI :isVisible="isVisible" :IPinfo="IPinfo" />
     </el-main>
     <div style="height: fit-content;padding-bottom: 10px;">
       <div style="width: fit-content;margin-left: auto;margin-right: auto;">
         <el-link type="info" href="https://netart.cn/" target="_blank">Whoami</el-link>&nbsp;
-        <el-link type="info" href="https://github.com/ljxi/NetworkPanel" target="_blank">源码</el-link>  
+        <el-link type="info" href="https://github.com/ljxi/NetworkPanel" target="_blank">源码</el-link>
       </div>
     </div>
   </el-container>
@@ -33,27 +44,51 @@
 // toggleDark()
 import MainUI from "./components/Main.vue"
 import IPinfoUI from "./components/IPinfo.vue"
-import { ref , reactive} from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { toClipboard } from '@soerenmartius/vue3-clipboard'
 
-const isVisible=ref(true)
-const IPinfo=reactive({globalInfo:null,localInfo:null})
-let GoToHomePage =  ()=> { 
+const isVisible = ref(true)
+const IPinfo = reactive({ globalInfo: null, localInfo: null })
+let GoToHomePage = () => {
   //window.open("https://netart.cn/")
   toClipboard('463481772')
   ElMessage.info({
     dangerouslyUseHTMLString: true,
     message: '<center>已经复制QQ群号：<br><strong>463481772</strong></center>',
   })
 }
-document.addEventListener("visibilitychange", function() {
+document.addEventListener("visibilitychange", function () {
   var string = document.visibilityState
-  if (string === 'hidden')isVisible.value = false
+  if (string === 'hidden') isVisible.value = false
   else isVisible.value = true
 })
 </script>
 
 <style>
+.header {
+  height: fit-content;
+  padding-bottom: 12px;
+  background-color: #ffffff;
+}
 
-</style>
+.title{
+  color: #526484;
+  font-size: 20px;
+  font-weight: bolder;
+}
+.home{
+  color: #526484;
+  font-size: 12px;
+}
+@media (prefers-color-scheme: dark) {
+  .header {
+    background-color: rgb(18,18,18);
+  }
+  .title{
+    color: rgb(152,167,202);
+  }
+  .home{
+    color: rgb(152,167,202);
+  }
+}</style>
diff --git a/src/components/IPinfo.vue b/src/components/IPinfo.vue
@@ -1,7 +1,6 @@
 <template>
-    <div  class="radius"
-          :style="{borderRadius:`var(--el-border-radius-round)`}"
-          style="max-width: 800px;height:fit-content;display: block;margin:0 auto;background-color:#ffffff;padding:2%">
+    <div class="radius card"
+          :style="{borderRadius:`var(--el-border-radius-round)`}">
         <div style="text-align: center;">
           <transition name="el-fade-in">
             <div v-loading="!info.localInfo" v-if="!info.localInfo || info.localInfo['isChinaMainland']" >
@@ -124,4 +123,20 @@ get_lay('https://cp.cloudflare.com/','globalLay')
   color: #344357;
   font-size: 14px;
 }
+.card{
+    max-width: 800px;
+    height:fit-content;
+    display: block;
+    margin:0 auto;
+    background-color:#ffffff;
+    padding:2%
+}
+@media (prefers-color-scheme: dark) {
+    .card {
+        background-color:rgb(18,18,18);
+    }
+    .font-background{
+        color: rgb(193,206,230);
+    }
+}
 </style>
diff --git a/src/components/Main.vue b/src/components/Main.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="radius" :style="{ borderRadius: 'var(--el-border-radius-round)' }"
-    style="max-width: 800px;height:fit-content;display: block;margin:0 auto;background-color:#ffffff;padding:2%">
+  <div class="radius card" :style="{ borderRadius: 'var(--el-border-radius-round)' }">
     <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px;">
       <div class="slider-demo-block">
         <span class="font-background">测速地址：</span>
@@ -53,15 +52,15 @@
             <br>
             每月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ state.predict.mon }}
           </el-popover>
-          <div class="state-icon" style="color: rgb(9,194,222);">
+          <div class="state-icon state-icon-main">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
               class="h-15 w-15 float-right pt-3">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                 d="M16.469,8.924l-2.414,2.413c-0.156,0.156-0.408,0.156-0.564,0c-0.156-0.155-0.156-0.408,0-0.563l2.414-2.414c1.175-1.175,1.175-3.087,0-4.262c-0.57-0.569-1.326-0.883-2.132-0.883s-1.562,0.313-2.132,0.883L9.227,6.511c-1.175,1.175-1.175,3.087,0,4.263c0.288,0.288,0.624,0.511,0.997,0.662c0.204,0.083,0.303,0.315,0.22,0.52c-0.171,0.422-0.643,0.17-0.52,0.22c-0.473-0.191-0.898-0.474-1.262-0.838c-1.487-1.485-1.487-3.904,0-5.391l2.414-2.413c0.72-0.72,1.678-1.117,2.696-1.117s1.976,0.396,2.696,1.117C17.955,5.02,17.955,7.438,16.469,8.924 M10.076,7.825c-0.205-0.083-0.437,0.016-0.52,0.22c-0.083,0.205,0.016,0.437,0.22,0.52c0.374,0.151,0.709,0.374,0.997,0.662c1.176,1.176,1.176,3.088,0,4.263l-2.414,2.413c-0.569,0.569-1.326,0.883-2.131,0.883s-1.562-0.313-2.132-0.883c-1.175-1.175-1.175-3.087,0-4.262L6.51,9.227c0.156-0.155,0.156-0.408,0-0.564c-0.156-0.156-0.408-0.156-0.564,0l-2.414,2.414c-1.487,1.485-1.487,3.904,0,5.391c0.72,0.72,1.678,1.116,2.696,1.116s1.976-0.396,2.696-1.116l2.414-2.413c1.487-1.486,1.487-3.905,0-5.392C10.974,8.298,10.55,8.017,10.076,7.825">
               </path>
             </svg>
           </div>
-          <el-text class="font-data" style="color: rgb(9,194,222);">{{ state.show.speed }}</el-text>
+          <el-text class="font-data state-icon-main">{{ state.show.speed }}</el-text>
         </div>
         <div class="showItem">
           <span class="font-background" style="font-size: larger;">带宽</span>
@@ -77,7 +76,7 @@
 
       <div style="width: fit-content;display: block;margin-top:2ch;margin-left: auto;margin-right: auto;">
         <a class="button" v-if="!isRunning && !state.isChecking" @click="tryStart">
-          <svg t="1694957757562" fill="white" style="width: 50px;margin-left: 10px;margin-top: -30px;"
+          <svg t="1694957757562" class="svg-icon"
             viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4036" width="200" height="200">
             <path
               d="M823.8 603.5l-501.2 336c-50.7 34-119.3 20.4-153.2-30.2-12.2-18.2-18.7-39.6-18.7-61.5v-672c0-61 49.5-110.4 110.4-110.4 21.9 0 43.3 6.5 61.5 18.7l501.1 336c50.7 34 64.2 102.6 30.2 153.2-7.8 11.9-18.1 22.2-30.1 30.2z m0 0"
@@ -731,6 +730,20 @@ onUnmounted(() => {
   margin-top: 10px;
 }
 
+.card{
+  max-width: 800px;
+  height:fit-content;
+  display: block;
+  margin:0 auto;
+  background-color:#ffffff;
+  padding:2%
+}
+
+@media (prefers-color-scheme: dark) {
+    .card {
+        background-color:rgb(18,18,18);
+    }
+}
 @media screen and (max-width: 800px) {
   .ItemContainer {
     column-count: 1;
@@ -762,8 +775,55 @@ onUnmounted(() => {
   margin-top: -10px;
   width: 40px;
   height: 20px;
+  color: rgb(96,98,102);
+}
+
+.state-icon-main{
+  color: rgb(9,194,222);
+}
+
+.svg-icon{
+  fill:rgb(255,255,255);
+  width: 50px;
+  margin-left: 10px;
+  margin-top: -30px;
 }
 
+@media (prefers-color-scheme: dark) {
+    .showItem {
+      border: 1px solid rgb(61,63,66) !important;
+    }
+    .state-icon{
+      color: rgb(165,167,172);
+    }
+    .state-icon-main{
+      color: rgb(30,105,131);
+    }
+    .font-background {
+      color: rgb(2, 110, 49);
+    }
+    .el-text{
+      --el-text-color-regular: rgb(165,167,172);
+    }
+    .el-input__inner{
+      color: rgb(200,200,200);
+    }
+    .el-select-dropdown__item{
+      color: rgb(200,200,200);
+    }
+    .el-select-dropdown__item.selected{
+      color: rgb(49,114,207);
+    }
+    .el-switch__label{
+      color: rgb(200,200,200);
+    }
+    .svg-icon{
+      fill:rgb(220,220,220);
+    }
+}
+
+
+
 .button {
   display: block;
   text-decoration: none;

diff --git a/src/components/My.vue b/src/components/My.vue
@@ -154,10 +154,20 @@ onUnmounted(() =>{
   text-align: center; 
   padding: 5%;
 }
+
 .action{
   margin-bottom: 20px;
   width: 100px;
   margin-left: 12px;
   margin-right: 12px;
 }
+
+@media (prefers-color-scheme: dark) {
+    .card {
+        background-color:rgb(33,34,37);
+    }
+    .action{
+      color: rgb(255, 255, 255);
+    }
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import App from './App.vue'
 import { VueClipboard } from '@soerenmartius/vue3-clipboard'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 const app = createApp(App)
 app.use(VueClipboard)