Merge branch 'dark-mode' of https://github.com/crater-invoice/crater into dark-card

resources/scripts/components/base/BaseCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div
+    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
+  >
+    <BaseDarkHighlight class="z-[-1] mt-10" />
+
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="
+      hidden
+      top-0
+      w-full
+      absolute
+      ml-auto
+      mr-auto
+      left-0
+      right-0
+      text-center
+      h-full
+      rounded-full
+      bg-highlight/[.10]
+      blur-2xl
+      dark:block
+      z-[-1]
+    "
+  />
+</template>

resources/scripts/components/base/BaseSelectInput.vue

@@ -12,7 +12,7 @@
   >
     <ListboxLabel
       v-if="label"
-      class="block text-sm not-italic font-medium text-gray-800 mb-0.5 dark:text-white"
+      class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
     >
       {{ label }}
     </ListboxLabel>
@@ -28,7 +28,6 @@
           pr-10
           text-left
           bg-white
-          dark:bg-gray-700
           border border-gray-200
           rounded-md
           shadow-sm
@@ -90,7 +89,6 @@
             ring-1 ring-black ring-opacity-5
             focus:outline-none
             sm:text-sm
-            dark:bg-gray-700
           "
         >
           <ListboxOption
@@ -102,7 +100,7 @@
           >
             <li
               :class="[
-                active ? 'text-white bg-primary-600' : 'text-gray-900 dark:text-white',
+                active ? 'text-white bg-primary-600' : 'text-gray-900',
                 'cursor-default select-none relative py-2 pl-3 pr-9',
               ]"
             >

tailwind.config.js

@@ -36,6 +36,7 @@ module.exports = {
           900: withOpacityValue('--color-primary-900'),
         },
         black: '#040405',
+        highlight: 'rgb(56, 189, 248)',
         red: colors.red,
         teal: colors.teal,
         gray: colors.slate,