feat:theme

src/services/theme.ts

@@ -24,7 +24,8 @@ export const themes: any = {
     '--shadow-popup': 'none',
     '--td-bg-color-component':'#535f79',
     '--color-background-groups':'#1e2430',
-    '--color-background-views-hover':'#3E4D6B'
+    '--color-background-views-hover':'#3E4D6B',
+    '--color-switch-handle':'#bdc7db',
   },
   light: {
     '--color': '#737A8A', //'#595959',
@@ -49,7 +50,8 @@ export const themes: any = {
     '--shadow-popup': '0 5px 8px 0px rgb(0 0 0 / 10%)',
     '--td-bg-color-component':'#F7F8FA',
     '--color-background-groups':'#F7F8FA',
-    '--color-background-views-hover':'#EFF1F6'
+    '--color-background-views-hover':'#EFF1F6',
+    '--color-switch-handle':'#fff'
   },
 };
 

src/styles/props.css

@@ -248,7 +248,7 @@
     .t-switch__handle {
       top: 2px;
       &::before {
-        background-color: var(--color);
+        background-color: var(--color-switch-handle);
       }
     }
 

src/styles/var.css

@@ -83,4 +83,5 @@
   --color-border-editor: #1e2430;
   --color-background-groups: #1e2430;
   --color-background-views-hover:#3E4D6B;
+  --color-switch-handle: #bdc7db;
 }

src/views/components/View.vue

@@ -72,6 +72,7 @@
           @dblclick="alwaysFormat"
           :style="{
             background: one || always ? '#4583ff' : '',
+            color: one || always ?( theme==='light'?'#fff':''):''
           }"
         >
           <svg
@@ -143,6 +144,7 @@
           @dblclick="alwaysDraw"
           :style="{
             background: oneD || alwaysD ? '#4583ff' : '',
+            color: oneD || alwaysD ?( theme==='light'?'#fff':''):''
           }"
         >
           <svg
@@ -312,7 +314,9 @@
         </a>
       </t-tooltip>
       <t-tooltip content="分享" placement="bottom">
-        <a @click="share" :class="{ 'share-primary': shared }">
+        <a @click="share" :class="{ 'share-primary': shared }" :style="{
+           color: shared?(theme==='light'?'#fff':''):''
+        }">
           <share-icon />
           <!-- <t-icon name="share" :class="{ primary: shared }" /> -->
         </a>
@@ -789,7 +793,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, ref, reactive, toRaw } from 'vue';
+import { onMounted, onUnmounted, watch, ref, reactive, toRaw, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import {
   Meta2d,
@@ -1862,6 +1866,11 @@ const onSuccessChargeCloud = () => {
   publishChargeDialog.show = false;
   onShowPublish();
 };
+
+const theme = computed(() => {
+  return localStorage.getItem('theme') || 'dark';
+});
+
 </script>
 <style lang="postcss" scoped>
 .meta2d {