fix: 深色模式支持

1 year ago · 05908f0bc0
13 changed files with 21 additions and 32 deletions
--- a/index.html
+++ b/index.html
@ -12,19 +12,9 @@
    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
-    <script>
-      (() => {
-        let htmlRoot = document.getElementById('htmlRoot')
-        let theme = window.localStorage.getItem('__APP__DARK__MODE__')
-        if (htmlRoot && theme) {
-          htmlRoot.setAttribute('data-theme', theme)
-          theme = htmlRoot = null
-        }
-      })()
-    </script>
    <div id="app">
      <style>
-        html[data-theme="dark"] {
+        html.dark {
          .app-loading {
            background-color: #2c344a;

--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@ -35,7 +35,7 @@ function toggleDarkMode() {
 <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-dark-switch';

-html[data-theme='dark'] {
+html.dark {
  .@{prefix-cls} {
    border: 1px solid rgb(196 188 188);
  }
--- a/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@ -35,7 +35,7 @@ function handleClose() {
  <div
    v-if="showFooter || $slots.footer"
    class="absolute bottom-0 left-0 w-full bg-white pl-5 pr-3 text-right dark:bg-dark"
-    border="0 t-1 solid gray-200"
+    border="0 t-1 solid gray-200 dark:white dark:opacity-5"
    :style="getStyle"
  >
    <template v-if="!$slots.footer">
--- a/src/components/Loading/src/Loading.vue
+++ b/src/components/Loading/src/Loading.vue
@ -53,7 +53,7 @@ defineProps({
  }
 }

-html[data-theme='dark'] {
+html.dark {
  .full-loading:not(.light) {
    background-color: @modal-mask-bg;
  }
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@ -349,7 +349,7 @@ emit('register', tableAction, formActions)
@border-color: #cecece4d;
@prefix-cls: ~'@{namespace}-basic-table';

-[data-theme='dark'] {
+html.dark {
  .ant-table-tbody > tr:hover.ant-table-row-selected > td,
  .ant-table-tbody > tr.ant-table-row-selected td {
    background-color: #262626;
--- a/src/design/index.less
+++ b/src/design/index.less
@ -45,7 +45,7 @@ span {
 }

 /** 打包后夜间模式样式有问题 在这里覆盖 */
-html[data-theme="dark"] {
+html.dark {
  /** 菜单边框 */
  ul li {
    border: none;
--- a/src/design/theme.less
+++ b/src/design/theme.less
@ -1,4 +1,4 @@
-html[data-theme="light"] {
+html.light {
  --component-background: #fff;
  --text-color: rgb(0 0 0 0.85);
  --border-color: #fff;
@ -27,10 +27,10 @@ html[data-theme="light"] {
  }
 }

-html[data-theme="dark"] {
+html.dark {
  --component-background: rgb(36 37 37 75%);
  --text-color: rgb(255 255 255 0.85);
-  --border-color: #b6b7b9;
+  --border-color: #424242;

  .text-secondary {
    color: #8b949e;
--- a/src/logics/theme/dark.ts
+++ b/src/logics/theme/dark.ts
@ -4,7 +4,6 @@ import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/update
 import { useAppStoreWithOut } from '@/store/modules/app'

 const isDark = useDark({
-  attribute: 'data-theme',
  valueDark: 'dark',
  valueLight: 'light',
  onChanged(isDark, defaultHandler, mode) {
--- a/src/views/base/login/Login.vue
+++ b/src/views/base/login/Login.vue
@ -70,7 +70,7 @@ const title = computed(() => globSetting?.title ?? '')
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
@dark-bg: #293146;

-html[data-theme='dark'] {
+html.dark {
  .@{prefix-cls} {
    background-color: @dark-bg;

--- a/src/views/device-manage/device/components/DeviceInfo.vue
+++ b/src/views/device-manage/device/components/DeviceInfo.vue
@ -50,13 +50,13 @@ const { hasPermission } = usePermission()
      </div>

      <div v-loading="isLoading" flex="~ gap-12px" mt="12px">
-        <div w="20%" border="0 r-1 solid gray-50">
+        <div w="20%" border="0 r-1 solid gray-50 dark:white dark:opacity-5">
          <div
            v-for="item in modelServiceList" :key="item.id"
            flex="~ items-center justify-between"
-            class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100"
-            border="0 b-1 solid gray-50"
-            :class="selectedModelId === item.id ? 'bg-gray-100' : ''"
+            class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100 hover:dark:bg-white hover:dark:bg-opacity-5"
+            border="0 b-1 solid gray-50 dark:white dark:opacity-5"
+            :class="selectedModelId === item.id ? 'bg-gray-100 dark:bg-white dark:bg-opacity-5' : ''"
            @click="setSelectedModelId(item.id)"
          >
            <div>
--- a/src/views/device-manage/device/components/SendCommandModal.vue
+++ b/src/views/device-manage/device/components/SendCommandModal.vue
@ -176,7 +176,7 @@ async function handleSubmit() {
  >
    <BasicForm @register="registerForm">
      <template #Message="{ model, field }">
-        <div h="200px" border="1px solid gray-200" w-full overflow-hidden rounded>
+        <div h="200px" border="1px solid gray-200 dark:#424242" w-full overflow-hidden rounded>
          <CodeEditor v-model:value="model[field]" />
        </div>
      </template>
--- a/src/views/device-manage/group/components/GroupList.vue
+++ b/src/views/device-manage/group/components/GroupList.vue
@ -41,7 +41,7 @@ const { hasPermission } = usePermission()
 </script>

 <template>
-  <div rounded="6px" px="10px" pt="12px" pb="6px" border-box bg-white min-w="360px">
+  <div rounded="6px" px="10px" pt="12px" pb="6px" border-box bg="white dark:[var(--component-background)]" min-w="360px">
    <div>
      <div flex="~ items-center justify-between" h="35px">
        <a-button v-if="hasPermission('device_group_add')" size="small" @click="openModal()">
--- a/src/views/product/components/Model.vue
+++ b/src/views/product/components/Model.vue
@ -48,8 +48,8 @@ const { hasPermission } = usePermission()
    <Alert type="info" show-icon class="py-4px text-13px" message="产品模型用于描述设备具备的能力和特性。通过定义产品模型，在平台构建一款设备的抽象模型，使平台理解该款设备支持的服务、属性、命令等信息，如颜色、开关等。当定义完一款产品模型后，在进行注册设备时，就可以使用在控制台上定义的产品模型。" />

    <div flex="~ gap-12px" mt="12px">
-      <div w="20%">
-        <div flex="~ items-center justify-between" border="0 b-1 solid gray-200" class="mb-12px box-border h-40px px-10px">
+      <div w="20%" border="0 r-1 solid gray-50 dark:white dark:opacity-5">
+        <div flex="~ items-center justify-between" border="0 b-1 solid gray-200 dark:white dark:opacity-5" class="mb-12px box-border h-40px px-10px">
          <div font-bold>
            服务列表
          </div>
@ -59,9 +59,9 @@ const { hasPermission } = usePermission()
        <div
          v-for="item in modelServiceList" :key="item.id"
          flex="~ items-center justify-between"
-          class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100"
-          border="0 b-1 solid gray-50"
-          :class="selectedModelId === item.id ? 'bg-gray-100' : ''"
+          class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100 hover:dark:bg-white hover:dark:bg-opacity-5"
+          border="0 b-1 solid gray-50 dark:white dark:opacity-5"
+          :class="selectedModelId === item.id ? 'bg-gray-100 dark:bg-white dark:bg-opacity-5' : ''"
          @click="setSelectedModelId(item.id)"
        >
          <div w-0 flex-1>