add dark mode

justboil · Sep 30, 2021 · 13ede39 · 13ede39
1 parent d47cb40
commit 13ede39
Show file tree

Hide file tree

Showing 34 changed files with 204 additions and 114 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="scrollbar-thin scrollbar-thumb-rounded scrollbar-track-gray-200 scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 dark:scrollbar-thumb-gray-100">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/src/colors.js b/src/colors.js
@@ -9,23 +9,24 @@ export const colorsBg = {
 
 export const colorsBorders = {
   white: ['border-gray-300'],
-  light: ['border-gray-200'],
+  light: ['border-gray-200 dark:border-gray-400'],
   success: ['border-green-600'],
   danger: ['border-red-600'],
   warning: ['border-yellow-600'],
   info: ['border-blue-600']
 }
 
 export const colorsText = {
-  light: ['text-gray-700'],
+  white: ['text-black dark:text-gray-100'],
+  light: ['text-gray-700 dark:text-gray-400'],
   success: ['text-green-500'],
   danger: ['text-red-500'],
   warning: ['text-yellow-500'],
   info: ['text-blue-500']
 }
 
 export const colorsOutline = {
-  white: [...colorsBg.white, ...colorsBorders.white],
+  white: [...colorsText.white, ...colorsBorders.white],
   light: [...colorsText.light, ...colorsBorders.light],
   success: [...colorsText.success, ...colorsBorders.success],
   danger: [...colorsText.danger, ...colorsBorders.danger],
@@ -43,8 +44,8 @@ export const colorsButtons = {
 }
 
 export const colorsButtonsOutline = {
-  white: colorsButtons.white,
-  light: ['hover:bg-gray-100', ...colorsText.light, ...colorsBorders.light],
+  white: ['hover:bg-gray-100 hover:text-gray-900 dark:hover:text-gray-900', ...colorsText.white, ...colorsBorders.white],
+  light: ['hover:bg-gray-100 hover:text-gray-900 dark:hover:text-gray-900', ...colorsText.light, ...colorsBorders.light],
   success: ['hover:bg-green-500 hover:text-white', ...colorsText.success, ...colorsBorders.success],
   danger: ['hover:bg-red-500 hover:text-white', ...colorsText.danger, ...colorsBorders.danger],
   warning: ['hover:bg-yellow-500 hover:text-white', ...colorsText.warning, ...colorsBorders.warning],

diff --git a/src/components/AsideMenu.vue b/src/components/AsideMenu.vue
@@ -2,11 +2,12 @@
   <aside
     v-show="!isFormScreen"
     class="w-60 fixed top-0 z-40 h-screen bg-gray-800 transition-position lg:left-0 overflow-y-scroll
-    scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-900 hover:scrollbar-thumb-gray-900"
+    scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-900 hover:scrollbar-thumb-gray-900
+    dark:scrollbar-track-gray-800 dark:bg-gray-900"
     :class="[ isAsideMobileExpanded ? 'left-0' : '-left-60', isAsideLgActive ? 'block' : 'lg:hidden xl:block' ]"
   >
     <div class="flex flex-row w-full bg-gray-900 text-white flex-1 h-14 items-center">
-      <nav-bar-item type="hidden lg:flex xl:hidden" color="" @click="asideLgClose">
+      <nav-bar-item type="hidden lg:flex xl:hidden" @click="asideLgClose" active-color="text-white" active>
         <icon :path="mdiMenu" class="cursor-pointer" size="24" />
       </nav-bar-item>
       <div class="flex-1 px-3">

diff --git a/src/components/AsideMenuItem.vue b/src/components/AsideMenuItem.vue
@@ -4,9 +4,9 @@
       :is="componentIs"
       :to="itemTo"
       :href="itemHref"
-      exact-active-class="bg-gray-700"
-      class="flex text-gray-300 cursor-pointer hover:bg-gray-700"
-      :class="{'py-2': !isSubmenuList, 'p-3 text-sm': isSubmenuList}"
+      exact-active-class="bg-gray-700 dark:bg-gray-800"
+      class="flex text-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-700"
+      :class="[isSubmenuList ? 'p-3 text-sm' : 'py-2']"
       @click="menuClick"
     >
       <icon v-if="item.icon" :path="item.icon" class="flex-none" w="w-12" />
@@ -16,7 +16,7 @@
     <aside-menu-list
       v-if="hasDropdown"
       :menu="item.menu"
-      :class="{ 'hidden': !isDropdownActive, 'block bg-gray-600': isDropdownActive }"
+      :class="{ 'hidden': !isDropdownActive, 'block bg-gray-600 dark:bg-gray-800': isDropdownActive }"
       is-submenu-list
     />
   </li>
@@ -35,14 +35,8 @@ export default {
   },
   emits: ['menu-click'],
   props: {
-    item: {
-      type: Object,
-      default: null
-    },
-    isSubmenuList: {
-      type: Boolean,
-      default: false
-    }
+    item: Object,
+    isSubmenuList: Boolean
   },
   setup (props, { emit }) {
     const isDropdownActive = ref(false)

diff --git a/src/components/BottomOtherPagesSection.vue b/src/components/BottomOtherPagesSection.vue
@@ -1,6 +1,6 @@
 <template>
   <titled-section last>
-    <h1 class="flex items-center justify-center flex-col md:flex-row text-2xl text-gray-500 mb-12">
+    <h1 class="flex items-center justify-center flex-col md:flex-row text-2xl text-gray-500 dark:text-gray-400 mb-12">
         <span class="md:mr-3">Please star this project on</span>
         <a
           href="https://github.com/justboil/admin-one-vue-tailwind"
@@ -11,7 +11,7 @@
           <span>GitHub</span>
         </a>
     </h1>
-    <h1 class="text-2xl text-gray-500">
+    <h1 class="text-2xl text-gray-500 dark:text-gray-400">
       Check out other components and layouts at<br>
       <template v-for="(screen, index) in screens" :key="screen.path">
         <router-link

diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue
@@ -5,15 +5,17 @@
     :class="[rounded]"
     @submit="submit"
   >
-    <header v-if="title" class="flex items-stretch border-b border-gray-100 dark:border-gray-700">
+    <header
+      v-if="title"
+      class="flex items-stretch border-b border-gray-100 dark:border-gray-700">
       <p class="flex items-center py-3 flex-grow font-bold" :class="[ icon ? 'px-4' : 'px-6' ]">
         <icon v-if="icon" :path="icon" class="mr-3" />
         {{ title }}
       </p>
       <a
         v-if="computedHeaderIcon"
         href="#"
-        class="flex items-center py-3 px-4 justify-center"
+        class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring"
         aria-label="more options"
         @click.prevent="headerIconClick"
       >
@@ -57,11 +59,21 @@ export default {
       emit('header-icon-click')
     }
 
+    // const headerFooterBorder = 'border-gray-100 dark:border-gray-700'
+
+    // const headerBorder = 'border-b'
+
     const submit = e => {
       emit('submit', e)
     }
 
-    return { computedHeaderIcon, headerIconClick, submit }
+    return {
+      computedHeaderIcon,
+      headerIconClick,
+      // headerFooterBorder,
+      // headerBorder,
+      submit
+    }
   }
 }
 </script>
diff --git a/src/components/CardWidget.vue b/src/components/CardWidget.vue
@@ -12,7 +12,7 @@
     </level>
     <level mobile>
       <div>
-        <h3 class="text-lg leading-tight text-gray-500">
+        <h3 class="text-lg leading-tight text-gray-500 dark:text-gray-400">
           {{ label }}
         </h3>
         <h1 class="text-3xl leading-tight font-semibold">

diff --git a/src/components/ClientsTable.vue b/src/components/ClientsTable.vue
@@ -1,16 +1,22 @@
 <template>
-  <modal-box v-model="isModalActive" title="Please confirm action" has-cancel>
+  <modal-box v-model="isModalActive" title="Sample modal">
     <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
     <p>This is sample modal</p>
   </modal-box>
 
-  <modal-box v-model="isModalDangerActive" title="Please confirm action" button="danger" has-cancel>
+  <modal-box v-model="isModalDangerActive" large-title="Please confirm" button="danger" has-cancel>
     <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
     <p>This is sample modal</p>
   </modal-box>
 
-  <div v-if="checkedRows.length" class="bg-gray-50 p-3">
-    <span v-for="checkedRow in checkedRows" :key="checkedRow.id" class="inline-block bg-gray-100 px-2 py-1 rounded-sm mr-2 text-sm">{{ checkedRow.name }}</span>
+  <div v-if="checkedRows.length" class="bg-gray-50 p-3 dark:bg-gray-800">
+    <span
+      v-for="checkedRow in checkedRows"
+      :key="checkedRow.id"
+      class="inline-block bg-gray-100 px-2 py-1 rounded-sm mr-2 text-sm dark:bg-gray-700"
+    >
+      {{ checkedRow.name }}
+    </span>
   </div>
 
   <table>
@@ -39,7 +45,7 @@
         <progress max="100" :value="client.progress">{{ client.progress }}</progress>
       </td>
       <td data-label="Created">
-        <small class="text-gray-500" :title="client.created">{{ client.created }}</small>
+        <small class="text-gray-500 dark:text-gray-400" :title="client.created">{{ client.created }}</small>
       </td>
       <td class="actions-cell">
         <jb-buttons type="justify-start lg:justify-end" no-wrap>
@@ -59,6 +65,7 @@
           :active="page === currentPage"
           :label="page + 1"
           :key="page"
+          :outline="darkMode"
           small
         />
       </jb-buttons>
@@ -94,6 +101,8 @@ export default {
   setup () {
     const store = useStore()
 
+    const darkMode = computed(() => store.state.darkMode)
+
     const items = computed(() => store.state.clients)
 
     const isModalActive = ref(false)
@@ -145,6 +154,7 @@ export default {
     }
 
     return {
+      darkMode,
       isModalActive,
       isModalDangerActive,
       currentPage,

diff --git a/src/components/Control.vue b/src/components/Control.vue
@@ -60,7 +60,9 @@ export default {
     modelValue: {
       type: [String, Number, Boolean, Array, Object],
       default: ''
-    }
+    },
+    borderless: Boolean,
+    transparent: Boolean
   },
   emits: ['update:modelValue', 'right-icon-click'],
   setup (props, { emit }) {
@@ -73,8 +75,11 @@ export default {
 
     const inputElClass = computed(() => {
       const base = [
-        'px-3 py-2 max-w-full focus:ring focus:outline-none border border-gray-700 rounded w-full',
-        computedType.value === 'textarea' ? 'h-24' : 'h-12'
+        'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
+        'dark:placeholder-gray-400',
+        computedType.value === 'textarea' ? 'h-24' : 'h-12',
+        props.borderless ? 'border-0' : 'border',
+        props.transparent ? 'bg-transparent' : 'bg-white dark:bg-gray-800'
       ]
 
       if (props.icon) {

diff --git a/src/components/ControlIcon.vue b/src/components/ControlIcon.vue
@@ -3,7 +3,7 @@
     :path="icon"
     w="w-10"
     :h="h"
-    class="absolute top-0 left-0 z-10 pointer-events-none text-gray-500"
+    class="absolute top-0 left-0 z-10 pointer-events-none text-gray-500 dark:text-gray-400"
   />
 </template>
 

diff --git a/src/components/Divider.vue b/src/components/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <hr class="my-6 -mx-6 border-t border-gray-100">
+  <hr class="my-6 -mx-6 border-t border-gray-100 dark:border-gray-700">
 </template>
 
 <script>

diff --git a/src/components/Field.vue b/src/components/Field.vue
@@ -4,7 +4,7 @@
     <div :class="wrapperClass">
       <slot />
     </div>
-    <div v-if="help" class="text-xs text-gray-500 mt-1">{{ help }}</div>
+    <div v-if="help" class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ help }}</div>
   </div>
 </template>
 

diff --git a/src/components/FooterBar.vue b/src/components/FooterBar.vue
diff --git a/src/components/HeroBar.vue b/src/components/HeroBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="bg-white border-b border-gray-100 p-6">
+  <section class="bg-white border-t border-b border-gray-100 p-6 dark:bg-gray-900 dark:border-gray-900 dark:text-white">
     <level>
       <h1 class="text-3xl font-semibold leading-tight">
         <slot />

diff --git a/src/components/JbButton.vue b/src/components/JbButton.vue
@@ -68,20 +68,17 @@ export default {
         'justify-center',
         'items-center',
         'whitespace-nowrap',
-        'ring-blue-700',
         'focus:outline-none',
         'transition-colors',
+        'focus:ring',
         'duration-150',
         'border',
         'rounded',
+        props.active ? 'ring ring-white' : 'ring-blue-700',
         props.small ? 'p-1' : 'p-2',
         props.outline ? colorsButtonsOutline[props.color] : colorsButtons[props.color]
       ]
 
-      if (props.active) {
-        base.push('ring')
-      }
-
       return base
     })
 

diff --git a/src/components/JbLogo.vue b/src/components/JbLogo.vue