style: change dark backgroud to gray-950

viandwi24 · viandwi24 · commit 93564c4b1e36 · 2023-07-08T16:53:29.000+07:00
diff --git a/app.vue b/app.vue
@@ -9,7 +9,7 @@ useHead({
 
 <template>
   <Body
-    class="antialiased duration-300 transition-colors text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900"
+    class="antialiased duration-300 transition-colors text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-950"
   >
     <NuxtLayout>
       <NuxtLoadingIndicator />
diff --git a/app/pages/setting.vue b/app/pages/setting.vue
@@ -87,10 +87,10 @@ const validate = async () => {
             >
               <button
                 :class="[
-                  'md:w-full text-left px-3 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-slate-900 dark:hover:bg-white/[0.12] dark:hover:text-white',
+                  'md:w-full text-left px-3 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-white/[0.12] dark:hover:text-white',
                   selected
                     ? 'font-extrabold'
-                    : 'text-slate-800 dark:text-gray-400',
+                    : 'text-gray-800 dark:text-gray-400',
                 ]"
               >
                 {{ item }}
diff --git a/components/awesome/ActionSheet/Group.vue b/components/awesome/ActionSheet/Group.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="rounded-lg backdrop-blur-lg bg-slate-400/[0.5] dark:bg-slate-700/[0.5] flex flex-col divide-y divide-slate-400 dark:divide-slate-700"
+    class="rounded-lg backdrop-blur-lg bg-gray-400/[0.5] dark:bg-gray-700/[0.5] flex flex-col divide-y divide-gray-400 dark:divide-gray-700"
   >
     <slot />
   </div>
diff --git a/components/awesome/ActionSheet/HeaderMessage.vue b/components/awesome/ActionSheet/HeaderMessage.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="text-xs text-center text-slate-700 dark:text-slate-500">
+  <div class="text-xs text-center text-gray-700 dark:text-gray-500">
     <slot>
       <span>{{ text }}</span>
     </slot>
diff --git a/components/awesome/ActionSheet/HeaderTitle.vue b/components/awesome/ActionSheet/HeaderTitle.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="text-xs font-bold text-center text-slate-800 dark:text-slate-400">
+  <div class="text-xs font-bold text-center text-gray-800 dark:text-gray-400">
     <slot>
       <span>{{ text }}</span>
     </slot>
diff --git a/components/awesome/ActionSheet/ItemButton.vue b/components/awesome/ActionSheet/ItemButton.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="px-4 py-2 text-center flex items-center justify-center active:bg-slate-700/[0.5] hover:bg-slate-700/[0.5]"
+    class="px-4 py-2 text-center flex items-center justify-center active:bg-gray-700/[0.5] hover:bg-gray-700/[0.5]"
   >
     <slot>
       <span>{{ text }}</span>
diff --git a/components/awesome/AlertBanner.vue b/components/awesome/AlertBanner.vue
@@ -24,11 +24,11 @@ const styles = reactive<{
 }>({
   primary: '',
   success:
-    'dark:from-green-500/50 via-gray-200 to-gray-200 dark:via-slate-800 dark:to-slate-800',
+    'dark:from-green-500/50 via-gray-200 to-gray-200 dark:via-gray-800 dark:to-gray-800',
   warning:
-    'dark:from-yellow-500/50 via-gray-200 to-gray-200 dark:via-slate-800 dark:to-slate-800',
+    'dark:from-yellow-500/50 via-gray-200 to-gray-200 dark:via-gray-800 dark:to-gray-800',
   danger:
-    'dark:from-red-500/50 via-gray-200 to-gray-200 dark:via-slate-800 dark:to-slate-800',
+    'dark:from-red-500/50 via-gray-200 to-gray-200 dark:via-gray-800 dark:to-gray-800',
 })
 const textStyles = reactive<{
   [key: string]: string
@@ -67,7 +67,7 @@ const close = () => {
       leave-to="opacity-0"
     >
       <div
-        :class="`bg-gray-200 dark:bg-slate-800 bg-gradient-to-r shadow-white/50 dark:shadow-slate-900/50 px-6 py-6 rounded-md shadow-lg flex space-x-6 ${selectedStyle}`"
+        :class="`bg-gray-200 dark:bg-gray-800 bg-gradient-to-r shadow-white/50 dark:shadow-gray-900/50 px-6 py-6 rounded-md shadow-lg flex space-x-6 ${selectedStyle}`"
       >
         <div class="flex items-center justify-center">
           <slot name="icon">
@@ -98,7 +98,7 @@ const close = () => {
         </div>
         <div>
           <button
-            class="text-slate-600 hover:text-red-500 dark:text-gray-400 font-bold"
+            class="text-gray-600 hover:text-red-500 dark:text-gray-400 font-bold"
             @click="close"
           >
             <Icon name="clarity:times-line" />
diff --git a/components/awesome/Button/index.vue b/components/awesome/Button/index.vue
@@ -34,7 +34,7 @@ const styles = reactive<{
   none: '',
   primary: 'text-white bg-primary-500 hover:bg-primary-400 border-primary-500',
   secondary:
-    'text-slate-800 bg-gray-200 border-gray-200 hover:bg-gray-300 dark:text-white dark:border-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700',
+    'text-gray-800 bg-gray-200 border-gray-200 hover:bg-gray-300 dark:text-white dark:border-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700',
   opposite:
     'text-white bg-gray-800 hover:bg-white hover:text-gray-800 hover:border-gray-900 dark:text-gray-800 dark:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:border-white',
   danger: 'text-white bg-red-500 hover:bg-red-400 border-red-500',
diff --git a/components/awesome/Card/Footer.vue b/components/awesome/Card/Footer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="card-footer duration-300 transition-colors px-6 py-2 text-sm bg-white dark:bg-slate-800 border-t border-gray-900/10 dark:border-gray-50/[0.2]"
+    class="card-footer duration-300 transition-colors px-6 py-2 text-sm bg-white dark:bg-gray-800 border-t border-gray-900/10 dark:border-gray-50/[0.2]"
   >
     <slot />
   </div>
diff --git a/components/awesome/Card/index.vue b/components/awesome/Card/index.vue
@@ -9,11 +9,11 @@ defineProps({
 
 <template>
   <div
-    class="card duration-300 transition-colors w-full relative rounded overflow-hidden bg-white dark:bg-slate-900 border border-gray-900/10 dark:border-gray-50/[0.2]"
+    class="card duration-300 transition-colors w-full relative rounded overflow-hidden bg-white dark:bg-gray-900 border border-gray-900/10 dark:border-gray-50/[0.2]"
   >
     <div
       v-if="disabled"
-      class="absolute z-10 top-0 left-0 w-full h-full bg-slate-800/[0.75] cursor-not-allowed"
+      class="absolute z-10 top-0 left-0 w-full h-full bg-gray-800/[0.75] cursor-not-allowed"
     />
     <slot />
   </div>
diff --git a/components/awesome/Form/Switch.vue b/components/awesome/Form/Switch.vue
@@ -53,13 +53,13 @@ onMounted(() => {
         :id="id"
         ref="input"
         type="checkbox"
-        class="switch-checkbox absolute block w-6 h-6 rounded-full bg-white dark:bg-slate-900 border-2 border-slate-300 dark:border-slate-600 appearance-none cursor-pointer"
+        class="switch-checkbox absolute block w-6 h-6 rounded-full bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-600 appearance-none cursor-pointer"
         :checked="checked"
         @change="onInputChange"
       />
       <label
         :for="id"
-        class="switch-label block overflow-hidden h-6 rounded-full bg-gray-200 dark:bg-slate-700 cursor-pointer border border-slate-300 dark:border-slate-500"
+        class="switch-label block overflow-hidden h-6 rounded-full bg-gray-200 dark:bg-gray-700 cursor-pointer border border-gray-300 dark:border-gray-500"
       />
     </label>
     <slot />
diff --git a/components/awesome/Form/TextInput.vue b/components/awesome/Form/TextInput.vue
@@ -63,7 +63,7 @@ const selectedFontSizeStyle = computed(
   <div :class="`text-input-container relative flex`">
     <div
       v-if="slots['prefix-disabled']"
-      :class="`duration-300 transition-colors flex rounded-l bg-gray-100 dark:bg-slate-800 text-gray-500 border ${selectedBorderStyle}`"
+      :class="`duration-300 transition-colors flex rounded-l bg-gray-100 dark:bg-gray-800 text-gray-500 border ${selectedBorderStyle}`"
     >
       <slot name="prefix-disabled" />
     </div>
diff --git a/components/awesome/Tabs.vue b/components/awesome/Tabs.vue
@@ -96,12 +96,12 @@ onMounted(() => {
           class="absolute flex h-full top-0 left-0 p-1 py-1.5 overflow-hidden transition-all duration-300"
           :style="{ zIndex: 1 }"
         >
-          <span class="flex-1 bg-slate-500/40 rounded-lg" />
+          <span class="flex-1 bg-gray-500/40 rounded-lg" />
         </span>
       </div>
     </ClientOnly>
     <div
-      class="tabs-body relative text-slate-800 dark:text-white bg-gray-200 dark:bg-slate-800 shadow rounded-b-lg"
+      class="tabs-body relative text-gray-800 dark:text-white bg-gray-200 dark:bg-gray-800 shadow rounded-b-lg"
     >
       <slot />
     </div>
diff --git a/components/awesome/Welcome.vue b/components/awesome/Welcome.vue
@@ -71,7 +71,7 @@ const leadingsText = computed(() => [
         </div>
         <div
           v-if="showAlert"
-          class="mt-4 w-auto text-center text-white bg-slate-800 rounded px-4 py-1 text-sm"
+          class="mt-4 w-auto text-center text-white bg-gray-800 rounded px-4 py-1 text-sm"
         >
           create file "~/pages/index.vue" to replace this page
         </div>
diff --git a/components/layouts/Page/Navbar.vue b/components/layouts/Page/Navbar.vue
@@ -12,7 +12,7 @@ const showDrawer = ref(false)
 
 <template>
   <header
-    class="flex fixed backdrop-filter backdrop-blur-md top-0 z-40 w-full flex-none transition-colors duration-300 lg:z-50 border-b border-gray-900/10 dark:border-gray-50/[0.2] bg-white/[0.5] dark:bg-slate-900/[0.5]"
+    class="flex fixed backdrop-filter backdrop-blur-md top-0 z-40 w-full flex-none transition-colors duration-300 lg:z-50 border-b border-gray-950/10 dark:border-gray-50/[0.2] bg-white/[0.5] dark:bg-gray-950/[0.5]"
   >
     <!-- content -->
     <div
@@ -34,7 +34,7 @@ const showDrawer = ref(false)
       <div
         v-if="$screen.higherThan('md', $screen.current.value)"
         class="flex space-x-4 items-center"
-        :class="{ 'divide-x divide-slate-500': menus.length > 0 }"
+        :class="{ 'divide-x divide-gray-500': menus.length > 0 }"
       >
         <div class="flex space-x-4 text-sm items-center">
           <!-- dynamic menus -->
@@ -43,8 +43,8 @@ const showDrawer = ref(false)
               <NuxtLink :key="i" :to="item.to" #="{ isActive }">
                 <span
                   :class="{
-                    'text-slate-900 dark:text-slate-100 font-bold': isActive,
-                    'text-slate-700 dark:text-slate-300': !isActive,
+                    'text-gray-900 dark:text-gray-100 font-bold': isActive,
+                    'text-gray-700 dark:text-gray-300': !isActive,
                   }"
                   >{{ item?.title || '' }}</span
                 >
@@ -80,7 +80,7 @@ const showDrawer = ref(false)
       <div
         v-else
         class="flex space-x-4 items-center"
-        :class="{ 'divide-x divide-slate-500': menus.length > 0 }"
+        :class="{ 'divide-x divide-gray-500': menus.length > 0 }"
       >
         <div class="pl-4 flex space-x-3 text-xl">
           <AwesomeLink
@@ -105,7 +105,7 @@ const showDrawer = ref(false)
         </AwesomeActionSheetHeader>
         <AwesomeActionSheetItem>
           <div
-            class="flex flex-col text-sm items-center divide-y divide-slate-400 dark:divide-slate-700 text-center"
+            class="flex flex-col text-sm items-center divide-y divide-gray-400 dark:divide-gray-700 text-center"
           >
             <!-- dynamic menus -->
             <template v-for="(item, i) in menus">
@@ -118,8 +118,8 @@ const showDrawer = ref(false)
                 >
                   <span
                     :class="{
-                      'text-slate-900 dark:text-slate-100 font-bold': isActive,
-                      'text-slate-700 dark:text-slate-300': !isActive,
+                      'text-gray-900 dark:text-gray-100 font-bold': isActive,
+                      'text-gray-700 dark:text-gray-300': !isActive,
                     }"
                     >{{ item?.title || '' }}</span
                   >
diff --git a/pages/post/index.vue b/pages/post/index.vue
@@ -14,7 +14,7 @@ useHead({ title: 'Posts' })
         <div
           class="hover:no-underline p-6 flex space-x-6 rounded border border-gray-900/10 dark:border-gray-50/[0.2]"
         >
-          <div class="mt-1 text-slate-600 dark:text-gray-400 text-right">
+          <div class="mt-1 text-gray-600 dark:text-gray-400 text-right">
             <div>{{ article.date }}</div>
             <AwesomeLink
               class="text-sm flex items-center justify-end space-x-1"
@@ -25,10 +25,10 @@ useHead({ title: 'Posts' })
             </AwesomeLink>
           </div>
           <div class="flex flex-col">
-            <div class="text-xl font-semibold text-slate-800 dark:text-gray-50">
+            <div class="text-xl font-semibold text-gray-800 dark:text-gray-50">
               {{ article.title }}
             </div>
-            <div class="text-slate-700 dark:text-gray-300 mb-1">
+            <div class="text-gray-700 dark:text-gray-300 mb-1">
               {{ article.description }}
             </div>
             <div class="flex">

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ useHead({`
`9`	`9`
`10`	`10`	`<template>`
`11`	`11`	`<Body`
`12`		`- class="antialiased duration-300 transition-colors text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900"`
	`12`	`+ class="antialiased duration-300 transition-colors text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-950"`
`13`	`13`	`>`
`14`	`14`	`<NuxtLayout>`
`15`	`15`	`<NuxtLoadingIndicator />`
Original file line number	Diff line number	Diff line change
`@@ -87,10 +87,10 @@ const validate = async () => {`
`87`	`87`	`>`
`88`	`88`	`<button`
`89`	`89`	`:class="[`
`90`		`- 'md:w-full text-left px-3 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-slate-900 dark:hover:bg-white/[0.12] dark:hover:text-white',`
	`90`	`+ 'md:w-full text-left px-3 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-white/[0.12] dark:hover:text-white',`
`91`	`91`	`selected`
`92`	`92`	`? 'font-extrabold'`
`93`		`- : 'text-slate-800 dark:text-gray-400',`
	`93`	`+ : 'text-gray-800 dark:text-gray-400',`
`94`	`94`	`]"`
`95`	`95`	`>`
`96`	`96`	`{{ item }}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div`
`3`		`- class="rounded-lg backdrop-blur-lg bg-slate-400/[0.5] dark:bg-slate-700/[0.5] flex flex-col divide-y divide-slate-400 dark:divide-slate-700"`
	`3`	`+ class="rounded-lg backdrop-blur-lg bg-gray-400/[0.5] dark:bg-gray-700/[0.5] flex flex-col divide-y divide-gray-400 dark:divide-gray-700"`
`4`	`4`	`>`
`5`	`5`	`<slot />`
`6`	`6`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ defineProps({`
`9`	`9`
`10`	`10`	`<template>`
`11`	`11`	`<div`
`12`		`- class="px-4 py-2 text-center flex items-center justify-center active:bg-slate-700/[0.5] hover:bg-slate-700/[0.5]"`
	`12`	`+ class="px-4 py-2 text-center flex items-center justify-center active:bg-gray-700/[0.5] hover:bg-gray-700/[0.5]"`
`13`	`13`	`>`
`14`	`14`	`<slot>`
`15`	`15`	`<span>{{ text }}</span>`