fix: 修复按钮和设置区块在暗色模式下的颜色异常

UniiemStudio · Jun 8, 2023 · 3140c3b · 3140c3b · vercel · Jun 8, 2023
1 parent 9298345
commit 3140c3b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/components/settings/Area.vue b/components/settings/Area.vue
@@ -30,7 +30,7 @@ export default defineComponent({
 <template>
   <div class="mt-6 first:mt-0 font-['Nunito']">
     <div class="p-4 py-2.5 text-left bg-gray-100 dark:bg-slate-800 rounded-tl-lg rounded-tr-lg"
-         :class="{'bg-red-100 dark:bg-red-400/10': danger}">
+         :class="{'!bg-red-100 dark:!bg-red-400/10': danger}">
       <h1
         class="text-lg font-base flex flex-row justify-start items-center space-x-1 text-gray-600 dark:text-slate-300">
         <Icon :icon="icon" class="text-base"/>
@@ -40,7 +40,7 @@ export default defineComponent({
     </div>
     <div class="border-4 border-t-0 border-gray-100 dark:border-slate-800 dark:text-slate-300
                 rounded-bl-lg rounded-br-lg divide-y divide-gray-200 dark:divide-slate-800"
-         :class="{'border-red-100 dark:border-red-400/10': danger}">
+         :class="{'!border-red-100 dark:!border-red-400/10': danger}">
       <slot>
         <div class="p-4">
           No items

diff --git a/components/uni/Button.vue b/components/uni/Button.vue
@@ -57,9 +57,9 @@ export default defineComponent({
                  focus:outline-none focus:ring-4 focus:ring-gray-200
                  dark:focus:ring-slate-800 focus:ring-opacity-50 dark:focus:ring-opacity-50 transition"
           :class="{
-            'text-red-500 dark:text-red-400/80': danger,
-            'text-gray-500/60 dark:text-slate-500/40 bg-gray-200 hover:bg-gray-200 dark:!bg-slate-900 dark:hover:!bg-slate-900': disabled,
+            '!text-red-500 dark:!text-red-400/80': !disabled && danger,
             '!text-red-500/40 dark:!text-red-400/20': disabled && danger,
+            '!text-gray-500/60 dark:!text-slate-500/40 bg-gray-200 hover:bg-gray-200 dark:!bg-slate-900 dark:hover:!bg-slate-900': disabled,
             '!px-2 !py-0.5': mini,
             'flex flex-row items-center gap-1': icon
           }"