新增黑背景切换、和修改布局

src/App.vue

@@ -23,7 +23,7 @@ export default {
       return this.$route.path == "/home";
     },
     ...mapState({
-      theme: "theme",
+      // theme: "theme",
       appConfig: "appConfig"
     }),
     
@@ -32,7 +32,7 @@ export default {
       // 需要切换主题的页面
       let paths = ["option", "exchange","contract"];
       if (paths.includes(current)) {
-        return this.theme + "-app";
+        return "light-app";
       } else {
         return "";
       }

src/assets/js/tvStyle.js

@@ -4,14 +4,26 @@ let light={
         // "paneProperties.horzGridProperties.color": "#dcdee0",
         // "scalesProperties.backgroundColor": "#ffffff",
         // "scalesProperties.textColor" : "#333"
+		
+		"paneProperties.background": "#222e3d",
+		"paneProperties.vertGridProperties.color": "#646566",
+		"paneProperties.horzGridProperties.color": "#646566",
+		"scalesProperties.backgroundColor": "#222e3d",
+		"scalesProperties.textColor" : "#7b9ca7",
     }
 
 let dark = {
-    "paneProperties.background": "#222e3d",
+    // "paneProperties.background": "#222e3d",
-    "paneProperties.vertGridProperties.color": "#646566",
+    // "paneProperties.vertGridProperties.color": "#646566",
-    "paneProperties.horzGridProperties.color": "#646566",
+    // "paneProperties.horzGridProperties.color": "#646566",
-    "scalesProperties.backgroundColor": "#222e3d",
+    // "scalesProperties.backgroundColor": "#222e3d",
-    "scalesProperties.textColor" : "#7b9ca7"
+    // "scalesProperties.textColor" : "#7b9ca7"
+	
+	"paneProperties.background": "#ffffff",
+	"paneProperties.vertGridProperties.color": "#dcdee0",
+	"paneProperties.horzGridProperties.color": "#dcdee0",
+	"scalesProperties.backgroundColor": "#ffffff",
+	"scalesProperties.textColor" : "#333"
 }
 
 

src/assets/scss/theme/_dark.scss

@@ -1,6 +1,6 @@
 #dark,
 #dark header {
-  background: #131722;
+  background: #131722 !important;
 }
 
 #dark header nav a {
@@ -331,7 +331,7 @@
 #dark .settings-profile select {
   background-color: #2a2e39;
   border: 1px solid #2a2e39;
-  color: #ffffff;
+  color: #ffffff !important;
 }
 
 #dark .form-access form {
@@ -466,4 +466,212 @@
 
 #dark .settings-profile input[type="submit"] {
   border: 1px solid #007bff;
+}
+
+
+#dark .borders{
+	color: #fff;
+	transition: .4s ease-in;
+}
+
+#dark .borders:hover{
+	color: #007bff;
+}
+
+#dark .bordere{
+	color: #fff;
+	border: 1px solid #fff;
+	transition: .4s ease-in;
+}
+
+#dark .bordere:hover{
+	color: #007bff;
+	border: 1px solid #007bff;
+}
+
+#dark .footer{
+	background: #131722;
+	color: #fff;
+}
+
+#dark .footer .footer-right .footer-div{
+	color: #fff;
+}
+
+#dark .item_p{
+	color: #fff;
+}
+
+#dark .lang_now{
+	color: #fff;
+ }
+ 
+#dark .exchange-history .nav{
+	background-color: #1c2030;
+}
+#dark .market-order{
+	border: 1px solid #2a2e39;
+}
+#dark .contract-page .bg-plain{
+	background-color: #1c2030;
+	color: #fff;
+}
+#dark .contract-page .bg-white{
+	// background-color: #1c2030 !important;
+	background-color: #2b3139 !important;
+}
+#dark .contract-page{
+	background-color: #181A20;
+}
+#dark .SecondaryNav{
+	// background-color: #1c2030;
+	background-color: rgb(29 31 35);
+}
+#dark .SecondaryNavUl .SecondaryNavList a{
+	color: #fff;
+}
+#dark .SecondaryNavUl .SecondaryNavList a{
+	color: #fff;
+}
+#dark .SecondaryNavUl .SecondaryNavList a:hover{
+	color: #797979;
+}
+#dark .SecondaryNavUl .SecondaryNavList .SecondaryNavActive::after{
+	// background: #fff;
+}
+#dark .contact-us-page{
+	color: #fff;
+}
+#dark .contact-us-page .row{
+	color: #172636;
+}
+#dark .bg-panel{
+	background: #181A20 !important;
+}
+#dark .form-group .el-input__inner{
+	background-color: #2a2e39;
+	border: 1px solid #2a2e39;
+	color: #fff !important;
+}
+#dark #myTab .active{
+	background-color: #2a2e39;
+	color: #fff;
+}
+#dark .form-group .form-control{
+	background-color: #2a2e39 !important;
+	border: 1px solid #2a2e39 !important;
+	color: #fff !important;
+}
+#dark .user{
+	background-color: #181A20;
+	color: #fff;
+}
+#dark .container{
+	color: #fff;
+}
+#dark .el-collapse-item__header{
+	background-color: #181A20;
+	color: #fff;
+}
+#dark .el-collapse-item__wrap{
+	background-color: #181A20;
+}
+#dark .modal-content{
+	color: #fff;
+	background-color: #181A20;
+}
+#dark .container-col{
+	background-color: #181A20;
+}
+#dark .top_color{
+	color: #fff;
+	background-color: #1c2030;
+}
+
+#dark .footer-upper-section-lang{
+	border: 1px solid #fff;
+}
+
+// 资产
+#dark .Secondary_col{
+	// background-color: rgb(29 31 35);
+}
+#dark .SecondaryNav{
+	background-color: #131722;
+}
+#dark .SecondaryNavActive{
+	background-color: #1c2030;
+}
+#dark .SecondaryNavList:hover{
+	background-color: #2a2e39;
+}
+#dark .tab-color{
+	color: #fff;
+}
+
+// 合约
+#dark .Whole{
+	background-color: #2b3139;
+}
+#dark .lever_col{
+	background-color: #2b3139;
+}
+
+// 资产总览
+#dark .rounded-xl{
+	color: #fff;
+}
+#dark .bor_col{
+	border: 1px solid #2b3139 !important;
+}
+
+// 首页
+#dark .textcol{
+	color: #fff !important;
+}
+#dark .Transaction{
+	color: #fff;
+	background-color: #181A20;
+}
+#dark #dowebok{
+	background: #131722 !important;
+}
+
+#dark .el-popover{
+	background-color: #131722;
+}
+#dark .product{
+	box-shadow: 0px 0px 10px 0px #757070;
+}
+
+
+#dark #dowebok{
+	background-color: #181A20 !important;
+	color: #fff;
+}
+#dark .right_List{
+	background-color: #1E2329;
+}
+
+#dark .right_List_botton a{
+	color: #EAECEF;
+}
+
+#dark .right_List_botton a:hover{
+	color: #616d75;
+}
+
+#dark .illustration_area .left{
+	color: #EAECEF;
+}
+
+#dark .trade_box{
+	color: #797979;
+}
+#dark .col1{
+	color: #fff;
+}
+#dark .v-box__container{
+	color: #fff;
+	background-color: #181A20;
 }

src/components/CommonFooter.vue

@@ -10,12 +10,10 @@
         <!-- logo -->
         <div class="footer-upper-section-top">
           <div class="footer-logo">
-            <div style="width: 89px; height: 44px">
+            <!-- <div style="width: 89px; height: 44px"> -->
-              <img
+            <div>
-                :src="appConfig.head_logo"
+			  <img v-if="theme=='light'" src="../assets/img/home/logo.png" style="width: 200px; height: 100%;"/>
-                alt="logo"
+              <img v-else :src="appConfig.head_logo" alt="logo" style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;"/>
-                style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;"
-              />
             </div>
             <div style="color: #5B5B5B;font-size: 16px;margin-top: 10px;">{{ appConfig.copyright }}</div>
           </div>
@@ -37,14 +35,7 @@
           <!-- service -->
           <div class="service" v-if="service.length>0">
             <div class="item" style="width: 100%;text-align: left">
-              <p
+              <p class="item_p" style="font-size: 20px;">
-                class="item_p"
-                style="
-                  
-                  font-size: 20px;
-                  color: #000;
-                "
-              >
                 {{ $t("common.service") }}
               </p>
               <p class="foot_p" >
@@ -81,14 +72,7 @@
           <!-- college -->
           <div class="college" style="margin:0 119px;" v-if="college.length>0">
             <div class="item item1" style="width: 100%;text-align: left">
-              <p
+              <p class="item_p" style="font-size: 20px;">
-                class="item_p"
-                style="
-                  
-                  font-size: 20px;
-                  color: #000;
-                "
-              >
                 {{ $t("common.college") }}
               </p>
 			  <p class="foot_p">
@@ -127,10 +111,7 @@
           </div>
           <!-- email -->
           <div class="item">
-            <p
+            <p class="item_p" style="text-align: left; font-size: 20px;">
-              class="item_p"
-              style="text-align: left; font-size: 20px; color: #000"
-            >
               {{ $t("common.contactUs") }}
             </p>
             <p class="foot_p" style="font-size: 14px;color: #797979;">
@@ -289,6 +270,7 @@ export default {
 	  ispopup:false,
 	  ifurl:"",
 	  getUserInfo:JSON.parse(localStorage.getItem('auth')),
+	  theme:localStorage.getItem("theme"),
       list: [
         { src: "https://www.rsncoin.com/static/flag/discord.png" },
         { src: "https://www.rsncoin.com/static/flag/telegram.png" },

src/components/CommonHeader.vue

@@ -1,8 +1,9 @@
 <template>
-    <header id="common-header" :class="[`light-bb`, hook]" style="background-color: #fff !important;">
+    <header id="common-header" :class="[`light-bb`, hook]">
         <nav class="navbar navbar-expand-lg">
             <a class="navbar-brand" href="#/">
-                <img :src="appConfig.head_logo" alt="logo" />
+				<img v-if="theme=='light'" src="../assets/img/home/logo.png" style="width:177px;height:45px"/>
+                <img v-else :src="appConfig.head_logo" alt="logo" />
                 <!-- <img src="../assets/img/logo.png" alt="logo" style="width:102px;height:30px"/> -->
                 <!-- <span class="logo-text">
                 AMATAK
@@ -82,17 +83,17 @@
                     </div>
           </li>-->
                 </ul>
-                <ul class="navbar-nav">
+                <ul class="navbar-nav" style="align-items: center;">
                     <!-- <li class="nav-item header-custom-icon">
                     <a class="nav-link" href="#" id="clickFullscreen">
                         <i class="icon ion-md-expand"></i>
                     </a>
-                    </li>
-                    <li class="nav-item">
-                    <a class="nav-link sight-sense" href="javascript:changeSightSense()">
-                        夜晚模式
-                    </a>
                     </li> -->
+                    <li class="nav-item dropdown">
+						<a class="nav-link sight-sense" href="javascript:changeSightSense()">
+							{{theme=='light'?'白天模式':'夜晚模式'}}
+						</a>
+                    </li>
 
                     <!-- <li class="nav-item dropdown" style="padding-top: 13px;line-height: 10px;margin-right: -8px;">
                       <div style="width: 22px;height: 22px;border-radius: 50%;overflow: hidden;">
@@ -197,6 +198,7 @@ export default {
         return {
             isDark: false,
             setp:0,
+			theme:localStorage.getItem("theme"),
             home: {
                 label: this.$t("common.homepage"),
                 url: "/home"

src/components/KLine.vue

@@ -24,7 +24,8 @@ export default {
   data() {
     return {
       model: null, // 数据模型
-      interval: "1D" // [字符串格式]和TV的resolution同步
+      interval: "1D" ,// [字符串格式]和TV的resolution同步
+	  theme:localStorage.getItem('theme')||'dark'
     };
   },
 
@@ -59,9 +60,9 @@ export default {
       }
       return local;
     },
-    ...mapState({
+    // ...mapState({
-      theme: "theme"
+    //   theme: "theme"
-    })
+    // })
   },
   methods: {
     translateInterval2Period() {
@@ -171,7 +172,7 @@ export default {
           .css({
             background: (index, value) => {
                 if (this.interval == item.resolution) {
-                    return this.theme=='light'?'#ccc':'#091722';
+                    return this.theme=='dark'?'#ccc':'#091722';
                 }
             },
             color: () => {
@@ -188,7 +189,7 @@ export default {
 
             btns.forEach(btn => {
               if (btn === this) {
-                btn.style.cssText = `background : ${this.theme=='light'?'#ccc':'#091722'};
+                btn.style.cssText = `background : ${this.theme=='dark'?'#ccc':'#091722'};
                                         color:#758696;`;
               } else btn.style.cssText = ``;
             });
@@ -327,9 +328,9 @@ export default {
           disabled_features:['header_resolutions','header_symbol_search', "volume_force_overlay"],
           enabled_features:['header_indicators'],
           overrides: tvStyle[this.theme],
-          toolbar_bg: this.theme == "light" ? "#f1f3f6" : "#222e3d",
+          toolbar_bg: this.theme == "dark" ? "#f1f3f6" : "#222e3d",
           custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${
-            this.theme == "light" ? "white" : "black"
+            this.theme == "dark" ? "white" : "black"
           }.css`,
           debug:false
         },

src/index.html

@@ -71,7 +71,7 @@
     <script src="/static/libs/skroll.min.js"></script>
     <script src="https://mmyg.bsoccoin.com/newlink/pako.min.js"></script>
     <script>
-        window.custom = "light"; // Default theme
+        window.custom = localStorage.getItem("theme"); // Default theme
         window.api_path = "<%= htmlWebpackPlugin.options.isProduct ? 'https://mmyg.bsoccoins.com/api/sliderVerify' : 'https://mmyg.bsoccoins.com/api/sliderVerify' %>";
         // window.api_path =  "<%= htmlWebpackPlugin.options.isProduct ? 'http://qkladmin2.ruanmeng.top/api/sliderVerify' : 'http://qkladmin2.ruanmeng.top/api/sliderVerify' %>";
         // window.ws_path = "<%= htmlWebpackPlugin.options.isProduct ? 'wss://guanli.coin.amatak.net/ws1' : 'wss://guanli.coin.amatak.net/ws1' %>";
@@ -79,33 +79,50 @@
 
         // window.ws_path = "<%= htmlWebpackPlugin.options.isProduct ? 'ws://qkladmin2.ruanmeng.top:2346' : 'ws://qkladmin2.ruanmeng.top:2346' %>";
 
-        // Modify Page Theme
         function changeSightSense() {
             const body = document.body,
                 header = document.getElementById("common-header")
                 // footer = document.getElementById("common-footer");
-
+        
             if (body.id && body.id == "dark") {
                 body.removeAttribute("id");
                 header.classList.replace('dark-bb', 'light-bb');
-                custom = "light";
+        		localStorage.setItem("theme", 'dark');
+        		location.reload()
             } else {
                 body.setAttribute("id", "dark");
                 header.classList.replace('light-bb', 'dark-bb');
-                custom = "dark";
+        		localStorage.setItem("theme",'light');
+        		location.reload()
             }
-
-            // RELOAD tradingView
-            renderTV();
         }
-
+        
+        // 页面加载时检查用户偏好
+        function initTheme() {
+        	const body = document.body,
+        	    header = document.getElementById("common-header")
+            const savedTheme = localStorage.getItem("theme");
+            if (savedTheme === "dark") {
+                body.removeAttribute("id");
+                header.classList.replace('dark-bb', 'light-bb');
+            } else {
+        		body.setAttribute("id", "dark");
+        		header.classList.replace('light-bb', 'dark-bb');
+        	}
+        }
+        
+        // 初始化
+        // initTheme();
+        
         // The window content has been loaded and initialized tv
         window.onload = function () {
             // renderTV();
+        	if(!localStorage.getItem("theme")){
+        		localStorage.setItem("theme",'dark');
+        	}
+        	
+        	initTheme();
         };
-
-
-
     </script>
 </body>
 

src/views/home/index.vue

@@ -56,19 +56,19 @@
 					<div class="title">{{ $t("homeNewText.hh0") }}</div>
 					<div class="num-info1 d-flex" style="margin: 40px 0px;">
 						<div class="num-info-count1">
-							<div class="num1">Top 10</div>
+							<div class="num1 textcol">Top 10</div>
 							<div style="color: #999;font-size: 13px;width: 100px;">{{ $t("homeNewText.hh37") }}</div>
 						</div>
 						<div class="num-info-count1">
-							<div class="num1">5 million+</div>
+							<div class="num1 textcol">5 million+</div>
 							<div style="color: #999;font-size: 13px;width: 100px;">{{ $t("homeNewText.hh38") }}</div>
 						</div>
 						<div class="num-info-count1">
-							<div class="num1">{{ '<0.10%' }}</div>
+							<div class="num1 textcol">{{ '<0.10%' }}</div>
 							<div style="color: #999;font-size: 13px;">{{ $t("homeNewText.hh39") }}</div>
 						</div>
 						<div class="num-info-count1">
-							<div class="num1">200+</div>
+							<div class="num1 textcol">200+</div>
 							<div style="color: #999;font-size: 13px;">{{ $t("homeNewText.hh40") }}</div>
 						</div>
 					</div>
@@ -86,7 +86,7 @@
 		</div>
 		<!-- 寻找交易良机 -->
 		<div class="market_table" v-if="marketList[0]">
-			<div style="font-size: 42px;font-weight: bold;color: #101010;">
+			<div style="font-size: 42px;font-weight: bold;">
 				{{ $t("homeNewText.hh1") }}
 			</div>
 			<div style="color: #999;line-height: 60px;font-size: 18px;">{{ $t("homeNewText.hh2") }}</div>
@@ -109,30 +109,30 @@
 		</div>
 
 		<!-- 了解我们的产品 -->
-		<div class="title1">{{ $t("homeNewText.hh3") }}</div>
+		<div class="title1 textcol">{{ $t("homeNewText.hh3") }}</div>
 		<div class="title2">{{ $t("homeNewText.hh4") }}</div>
-		<div class="web_area">
+		<div class="web_area textcol">
 			<div style="width: 48%;">
 				<div class="product">
 					<div>
 						<div class="product_text1">{{ $t("homeNewText.hh5") }}</div>
 						<div class="product_text2">{{ $t("homeNewText.hh6") }}</div>
 					</div>
-					<img src="@/assets/img/home/home2.png" alt="">
+					<img src="@/assets/img/home/home2.png" width="150">
 				</div>
 				<div class="product">
 					<div>
 						<div class="product_text1">{{ $t("homeNewText.hh7") }}</div>
 						<div class="product_text2">{{ $t("homeNewText.hh8") }}</div>
 					</div>
-					<img src="@/assets/img/home/home4.png" alt="">
+					<img src="@/assets/img/home/home4.png" width="150">
 				</div>
 				<div class="product">
 					<div>
 						<div class="product_text1">{{ $t("homeNewText.hh9") }}</div>
 						<div class="product_text2">{{ $t("homeNewText.hh10") }}</div>
 					</div>
-					<img src="@/assets/img/home/home6.png" alt="">
+					<img src="@/assets/img/home/home6.png" width="150">
 				</div>
 			</div>
 			<div style="width: 48%;">
@@ -141,29 +141,29 @@
 						<div class="product_text1">{{ $t("homeNewText.hh11") }}</div>
 						<div class="product_text2">{{ $t("homeNewText.hh12") }}</div>
 					</div>
-					<img src="@/assets/img/home/home3.png" alt="">
+					<img src="@/assets/img/home/home3.png" width="150">
 				</div>
 				<div class="product">
 					<div>
 						<div class="product_text1">{{ $t("homeNewText.hh13") }}</div>
 						<div class="product_text2">{{ $t("homeNewText.hh14") }}</div>
 					</div>
-					<img src="@/assets/img/home/home5.png" alt="">
+					<img src="@/assets/img/home/home5.png" width="150">
 				</div>
 				<div class="product">
 					<div>
 						<div class="product_text1">{{ $t("homeNewText.hh15") }}</div>
 						<div class="product_text2">{{ $t("homeNewText.hh16") }}</div>
 					</div>
-					<img src="@/assets/img/home/home7.png" alt="">
+					<img src="@/assets/img/home/home7.png" width="150">
 				</div>
 			</div>
 		</div>
 
 		<!-- 为什么选择Bsoccoins -->
-		<div class="title1">{{ $t("homeNewText.hh17") }}</div>
+		<div class="title1 textcol">{{ $t("homeNewText.hh17") }}</div>
 		<div class="title2">{{ $t("homeNewText.hh18") }}</div>
-		<div class="web_area" style="height: 100px;">
+		<div class="web_area textcol" style="height: 100px;">
 			<div>
 				<div class="d-flex" style="align-items: center;">
 					<img src="@/assets/img/home/home8.svg" alt="">
@@ -226,7 +226,7 @@
 			</div>
 		</div>
 
-		<div class="title1" style="margin-top: 60px;">{{ $t("homeNewText.hh31") }}</div>
+		<div class="title1 textcol" style="margin-top: 60px;">{{ $t("homeNewText.hh31") }}</div>
 		<div class="title2">{{ $t("homeNewText.hh32") }}</div>
 		<div style="width: 1200px;margin: auto;">
 			<div style="display: flex;justify-content: space-between;align-items: center;">
@@ -240,17 +240,17 @@
 					</div>
 					<div style="margin-top: 40px;">
 						<div class="d-flex">
-							<a style="display: inline-block;width: 105px;text-decoration: none;margin-right: 45px;color:#000;">
+							<a style="display: inline-block;width: 105px;text-decoration: none;margin-right: 45px;" class="textcol">
 								<div style="margin-right: 20px;">
-									<img style="margin-left: 10px;" src="../../assets/img/home/home17.svg" alt=""
+									<img v-if="theme=='light'" style="margin-left: 10px;" src="../../assets/img/home/apple_1.png" class="icon" width="40px" height="40px">
-										class="icon" width="40px" height="40px">
+									<img v-else style="margin-left: 10px;" src="../../assets/img/home/home17.svg" class="icon" width="40px" height="40px">
 									<div>App Store</div>
 								</div>
 							</a>
-							<a style="display: inline-block;width: 100px;text-decoration: none;color:#000;">
+							<a style="display: inline-block;width: 100px;text-decoration: none;" class="textcol">
 								<div style="margin-right: 0px;">
-									<img style="margin-left: 8px;" src="../../assets/img/home/home16.svg" alt=""
+									<img v-if="theme=='light'" style="margin-left: 8px;" src="../../assets/img/home/android_1.png" class="icon" width="40px" height="40px">
-										class="icon" width="40px" height="40px">
+									<img v-else style="margin-left: 10px;" src="../../assets/img/home/home16.svg" class="icon" width="40px" height="40px">
 									<div>Android</div>
 								</div>
 							</a>
@@ -262,8 +262,7 @@
 		</div>
 
 		<div style="width: 1200px;margin: auto;margin-top: 100px;">
-			<div style="text-align: center;color: #000;font-size: 50px;font-weight: bold;">{{ $t("homeNewText.hh34") }}
+			<div class="textcol" style="text-align: center;font-size: 50px;font-weight: bold;">{{ $t("homeNewText.hh34") }}</div>
-			</div>
 			<div style="text-align: center;margin-top: 25px;">
 				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}">
 					{{ $t("homeNewText.hh35") }}
@@ -885,6 +884,7 @@
 
 		data() {
 			return {
+				theme:localStorage.getItem("theme"),
 				swiperOptions: {
 					pagination: {
 						el: ".swiper-pagination",
@@ -2193,7 +2193,7 @@
 				font-size: 18px;
 				color: white;
 				font-weight: bold;
-				color: #000;
+				// color: #000;
 				margin-bottom: 3px;
 			}
 
@@ -2208,14 +2208,14 @@
 		width: 1200px;
 		height: 717px;
 		margin: 0px auto 150px;
-		color: #000;
+		// color: #000;
 		display: flex;
 		justify-content: space-between;
 
 		.product {
 			display: flex;
 			align-items: center;
-			border: 2px solid #F0F0F0;
+			// border: 2px solid #F0F0F0;
 			justify-content: space-between;
 			height: 200px;
 			margin-bottom: 45px;
@@ -2242,7 +2242,6 @@
 		margin: 0px auto;
 		font-size: 48px;
 		font-weight: bold;
-		color: #000;
 	}
 
 	.title2 {
@@ -2286,4 +2285,7 @@
 			border-radius: 10px;
 		}
 	}
+	.textcol{
+		color: #000 !important;
+	}
 </style>

src/views/option/kline.vue

@@ -105,9 +105,9 @@ export default {
     symbol() {
       return this.activeCoin.pair_name;
     },
-    ...mapState({
+    // ...mapState({
-      theme: "theme",
+    //   theme: "theme",
-    }),
+    // }),
     ajaxTv() {
       return this.contract ? contractAjax : exchangeAjax;
     },
@@ -129,7 +129,8 @@ data() {
         isCreateSocket: false,
         page: {},
         tt:undefined,
-        periodCurrent: ''
+        periodCurrent: '',
+		theme:localStorage.getItem('theme')||'dark'
     };
 },
 methods: {
@@ -343,7 +344,7 @@ methods: {
             library_path: "/static/Kline/charting_library/",
             datafeed: Tdata,
             locale: _this.lang,
-            toolbar_bg: _this.theme == "light" ? "#f1f3f6" : "#222e3d",
+            toolbar_bg: _this.theme == "dark" ? "#f1f3f6" : "#222e3d",
             enable_publishing: false,
             withdateranges: true,
             hide_side_toolbar: false,
@@ -372,7 +373,7 @@ methods: {
             supported_resolutions: ["5", "15", "30", "60", "240", "1D", "1W", "1M"],
             overrides: tvStyle[_this.theme],
             custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${
-            _this.theme == "light" ? "white" : "black"
+            _this.theme == "dark" ? "white" : "black"
             }.css`,
             drawings_access: {
                 type: "black",

src/views/setting/index.vue

@@ -8,7 +8,7 @@
                 <!-- 登录密码 -->
                 <div class="col-md-6 d-flex">
                     <div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column">
-                        <div class="heading" style="color: #000;">{{$t('setting.loginPassword')}}</div>
+                        <div class="heading col1">{{$t('setting.loginPassword')}}</div>
                         <div class="tab-content flex-fill d-flex align-items-center">
                             <div style="color: #999;margin-right: 80px;">{{$t('setting.loginPassword')}}</div>
                             <button class="btn btn-primary btn-sm" @click="loginShow=true">{{$t('setting.resLoginPassword')}}</button>
@@ -17,7 +17,7 @@
                 </div>
 				<div class="col-md-6 d-flex">
 				    <div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column">
-				        <div class="heading" style="color: #000;">{{$t('common.c13')}}</div>
+				        <div class="heading col1">{{$t('common.c13')}}</div>
 				        <div class="tab-content flex-fill d-flex align-items-center">
 				            <div style="color: #999;margin-right: 80px;">{{$t('common.c13')}}</div>
 				            <button class="btn btn-primary btn-sm" @click="WithdrawalsShow=true">{{$t('common.c15')}}</button>
@@ -215,5 +215,8 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+	.col1{
+		color: #000;
+	}
 </style>