From 52fc0cc7994ee2e3563655ed7236b1ae51b5af88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Thu, 30 Jun 2022 19:30:54 -0300
Subject: [PATCH] Add autoimport global components, tailwinds configuration and
 css changes

---
 postcss.config.js                             | 12 ++-
 src/assets/css/main.scss                      |  1 +
 src/components/Breadcrumb.vue                 |  2 +-
 src/components/Button/ButtonExpand.vue        | 26 +++---
 src/components/Card/Card.vue                  |  5 --
 src/components/Card/CardHeader.vue            |  5 --
 src/components/Card/VCard.vue                 |  5 ++
 .../{CardContent.vue => VCardContent.vue}     |  2 +-
 src/components/Card/VCardHeader.vue           |  5 ++
 src/components/Gallery/GalleryThumbnail.vue   |  2 +-
 src/components/Gallery/ImageViewer.vue        |  4 +-
 src/components/Gallery/Main.vue               | 10 ++-
 src/components/Layout/LayoutFooter.vue        |  4 +-
 src/components/Layout/LayoutHeader.vue        | 89 +++++++++++--------
 src/components/Map/VMap.vue                   |  1 +
 src/components/SwitchTheme.vue                | 73 +++++++++++++++
 src/components/Tab/TabItem.vue                | 11 +--
 src/components/TreeView.vue                   |  6 +-
 src/components/VSpinner.vue                   |  5 +-
 src/components/globalComponents.js            | 13 +++
 src/config/vendor/tailwind.config.js          |  5 ++
 src/constants/configPaths.js                  |  4 +
 src/main.js                                   | 13 ++-
 .../otus/components/Citation/CitationList.vue | 10 +--
 .../otus/components/Citation/CitationRow.vue  |  3 +-
 src/modules/otus/components/Descendants.vue   |  8 +-
 src/modules/otus/components/Gallery.vue       |  4 +-
 src/modules/otus/components/Map.vue           |  4 +-
 src/modules/otus/components/TaxaInfo.vue      |  6 +-
 .../otus/components/TypeDesignation.vue       |  8 +-
 src/modules/otus/components/TypeSpecimen.vue  |  8 +-
 src/modules/otus/views/Index.vue              | 15 +++-
 tailwind.config.js                            | 75 ++++++++++++++++
 33 files changed, 323 insertions(+), 121 deletions(-)
 delete mode 100644 src/components/Card/Card.vue
 delete mode 100644 src/components/Card/CardHeader.vue
 create mode 100644 src/components/Card/VCard.vue
 rename src/components/Card/{CardContent.vue => VCardContent.vue} (52%)
 create mode 100644 src/components/Card/VCardHeader.vue
 create mode 100644 src/components/SwitchTheme.vue
 create mode 100644 src/components/globalComponents.js
 create mode 100644 src/config/vendor/tailwind.config.js
 create mode 100644 src/constants/configPaths.js

diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..d5fb4fa 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,16 @@
+const fs = require('fs')
+const { 
+  userTailwindConfigPath,
+  defaultTailwindConfigPath
+} = require('./src/constants/configPaths')
+
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: { 
+      config: fs.existsSync(userTailwindConfigPath) 
+      ? userTailwindConfigPath
+      : defaultTailwindConfigPath
+    },
     autoprefixer: {},
   },
 }
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 54c3ff1..d8d35f2 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -6,4 +6,5 @@
 }
 body {
   @apply bg-gray-100;
+  @apply dark:bg-gray-900;
 }
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index a3d28ba..115fdc9 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -20,7 +20,7 @@
       </svg>
       <router-link 
         v-if="item.length === 1"
-        class="inline-flex items-center text-sm text-gray-700 hover:text-gray-900"
+        class="inline-flex items-center text-sm text-accent-100 hover:text-gray-900"
         :to="{ name: 'otus-id', params: { id: item[0].id } }"
       >
         {{ key }}
diff --git a/src/components/Button/ButtonExpand.vue b/src/components/Button/ButtonExpand.vue
index 9f384a3..8cea3e8 100644
--- a/src/components/Button/ButtonExpand.vue
+++ b/src/components/Button/ButtonExpand.vue
@@ -1,7 +1,18 @@
 <template>
   <button
     type="button"
-    class="button-expand"
+    class="
+      button-expand
+      bg-white
+      dark:text-gray-400
+      dark:bg-gray-900 border
+      border-black
+      w-[14px]
+      h-[14px]
+      min-w-[14px]
+      min-h-[14px]
+      rounded
+      leading-3"
     @click="isExpanded = !isExpanded"
   >
     <span v-if="isExpanded">-</span>
@@ -33,16 +44,3 @@ const isExpanded = computed({
 })
 
 </script>
-
-<style scoped>
-.button-expand {
-  width: 13px;
-  height: 13px;
-  min-width: 13px;
-  min-height: 13px;
-  line-height: 12px;
-  border: 1px solid black;
-  background-color: white;
-  border-radius: 4px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Card/Card.vue b/src/components/Card/Card.vue
deleted file mode 100644
index 29efb60..0000000
--- a/src/components/Card/Card.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="shadow-sm border rounded-md bg-white print:shadow-none print:border-0">
-    <slot />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Card/CardHeader.vue b/src/components/Card/CardHeader.vue
deleted file mode 100644
index 3d7389f..0000000
--- a/src/components/Card/CardHeader.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="border-b p-4">
-    <slot />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Card/VCard.vue b/src/components/Card/VCard.vue
new file mode 100644
index 0000000..caa11b5
--- /dev/null
+++ b/src/components/Card/VCard.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="shadow-sm bg-white print:shadow-none print:border-0 dark:bg-gray-800">
+    <slot />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Card/CardContent.vue b/src/components/Card/VCardContent.vue
similarity index 52%
rename from src/components/Card/CardContent.vue
rename to src/components/Card/VCardContent.vue
index 3c55717..ca6f79a 100644
--- a/src/components/Card/CardContent.vue
+++ b/src/components/Card/VCardContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4">
+  <div class="p-4 dark:text-slate-400">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Card/VCardHeader.vue b/src/components/Card/VCardHeader.vue
new file mode 100644
index 0000000..b537f0a
--- /dev/null
+++ b/src/components/Card/VCardHeader.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-fonts-500 p-4 uppercase text-sm dark:text-slate-200">
+    <slot />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index 07499b2..d510b34 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="ml-1 mr-1 mt-2 bg-white flex flex-col justify-center cursor-pointer w-24 h-24 border"
+    class="ml-1 mr-1 mt-2 bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
     :title="title"
   >
     <img 
diff --git a/src/components/Gallery/ImageViewer.vue b/src/components/Gallery/ImageViewer.vue
index 36ffb32..d3ac820 100644
--- a/src/components/Gallery/ImageViewer.vue
+++ b/src/components/Gallery/ImageViewer.vue
@@ -4,7 +4,7 @@
     @click="emit('close')"
   >
     <div 
-      class="container bg-white relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
+      class="container bg-white dark:bg-gray-800 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
       @click.stop
     >
       <VSpinner v-if="isLoading" />
@@ -17,7 +17,7 @@
         >
       </div>
 
-      <div class="bg-white attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
+      <div class="bg-white dark:bg-gray-800 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
         <ImageDepictions
           class="my-auto"
           :depictions="image.depictions" 
diff --git a/src/components/Gallery/Main.vue b/src/components/Gallery/Main.vue
index 1e45c80..4519cf9 100644
--- a/src/components/Gallery/Main.vue
+++ b/src/components/Gallery/Main.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex justify-center bg-white border print:hidden">
+    <div
+      class="
+        flex
+        justify-center 
+        bg-white  
+        dark:bg-gray-800 
+        border print:hidden 
+        dark:border-gray-700"
+    >
       <div class="h-80 max-h-80 flex items-center justify-center">
         <img
           class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
index 037869b..a36ca2b 100644
--- a/src/components/Layout/LayoutFooter.vue
+++ b/src/components/Layout/LayoutFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer text-white bottom-0 border-t border-gray-200 bg-zinc-800 pl-4 pr-4">
+  <footer class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4">
     <div class="container mx-auto text-sm pt-2 pb-4">
       <div class="pt-4 pb-4">
         {{ project_authors }}
@@ -7,7 +7,7 @@
         <span v-if="project_url">
           &lt;
           <a
-            class="text-blue-500"
+            class="text-primary-500"
             :href="project_url"
           >
             {{ project_url }} 
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 5445efb..47b65ef 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -1,6 +1,23 @@
 <template>
-  <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded border-b pl-4 pr-4">
-    <div class="container flex flex-wrap justify-between items-center mx-auto">
+  <div 
+    class="
+      bg-white
+      border-gray-200
+      px-2
+      sm:px-4
+      py-2.5
+      rounded
+      border-b
+      dark:border-b-gray-800
+      dark:bg-gray-900
+      pl-4
+      pr-4
+      h-9
+      align-middle
+      flex
+      items-center"
+  >
+    <div class="container flex flex-wrap justify-between items-center mx-auto dark:text-slate-200 font-medium">
       <a
         href="/"
         class="flex"
@@ -47,51 +64,49 @@
           />
         </svg>
       </button>
-      <div class="hidden w-full md:block md:w-auto">
-        <ul class="flex flex-col md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-          <li 
-            v-for="(item, index) in links"
-            :key="index"
-          >
-            <router-link
-              :to="item.link"
-              class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
-            >
-              {{ item.label }}
-            </router-link>
-          </li>
-          <li>
-            <a
-              href="https://github.com/jlpereira/vite_taxonworks_public_view"
-              class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
+      <div class="relative hidden lg:flex items-center ml-auto">
+        <nav class="text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200">
+          <ul class="flex space-x-8">
+            <li
+              v-for="(item, index) in links"
+              :key="index"
             >
-              <svg
-                class="w-5 h-5"
-                aria-hidden="true"
-                focusable="false"
-                data-prefix="fab"
-                data-icon="github"
-                role="img"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 496 512"
+              <router-link
+                :to="item.link"
+                class="hover:text-sky-500 dark:hover:text-sky-400"
               >
-                <path
-                  fill="currentColor"
-                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
+                {{ item.label }}
+              </router-link>
+            </li>
+          </ul>
+        </nav>
+
+        <div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800">
+          <SwitchTheme />
+          <a 
+            class="ml-6 block text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
+            href="https://github.com/SpeciesFileGroup/taxonpages"
+          >
+            <svg 
+              viewBox="0 0 16 16"
+              class="w-5 h-5"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+          </a>
+        </div>
       </div>
     </div>
-  </nav>
+  </div>
 </template>
 
 <script setup>
 
 import headerConfiguration from '@/config/header.yml'
 import projectConfiguration from '@/config/project.yml'
+import SwitchTheme from '../SwitchTheme.vue';
 
 const {
   logo,
diff --git a/src/components/Map/VMap.vue b/src/components/Map/VMap.vue
index 3fc8f04..e3e36af 100644
--- a/src/components/Map/VMap.vue
+++ b/src/components/Map/VMap.vue
@@ -166,6 +166,7 @@ const setGeoJSON = geojson => {
 .leaflet-marker-icon {
   width: 20px;
   height: 20px;
+  border-radius: 50%;
   background-color: red;
   opacity: 0.5;
 }
diff --git a/src/components/SwitchTheme.vue b/src/components/SwitchTheme.vue
new file mode 100644
index 0000000..25d09b9
--- /dev/null
+++ b/src/components/SwitchTheme.vue
@@ -0,0 +1,73 @@
+<template>
+  <button
+    v-if="themeMode === themeModes.dark"
+    type="button"
+    @click="themeMode = themeModes.light"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+  </button>
+
+  <button
+    v-else
+    type="button"
+    @click="themeMode = themeModes.dark"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6 text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup>
+import { watch, ref } from 'vue'
+
+const themeModes = {
+  dark: 'dark',
+  light: 'light'
+}
+const themeMode = ref(null)
+
+if (
+  localStorage.theme === 'dark' || 
+  (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+  themeMode.value = 'dark'
+} else {
+  themeMode.value = 'light'
+}
+
+watch(
+  themeMode,
+  (value, oldValue) => {
+    document.documentElement.classList.add(value)
+    document.documentElement.classList.remove(oldValue)
+    localStorage.setItem('theme', value)
+  },
+  { immediate: true }
+)
+
+</script>
\ No newline at end of file
diff --git a/src/components/Tab/TabItem.vue b/src/components/Tab/TabItem.vue
index a5ca44c..dcfc3f5 100644
--- a/src/components/Tab/TabItem.vue
+++ b/src/components/Tab/TabItem.vue
@@ -2,8 +2,7 @@
   <li class="inline-flex items-center text-sm">
     <router-link
       class="p-2 pb-2 block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-transparent "
-
-      active-class="border-b-2 border-blue-500 text-blue-500"
+      active-class="border-b-2 border-blue-500 text-primary-500"
       :to="to"
     >
       <slot />
@@ -12,14 +11,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  active: {
-    type: Boolean,
-    default: false
-  },
 
+defineProps({
   to: {
     type: [String, Object],
     required: true
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index 29d103a..7acbbb4 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -8,7 +8,7 @@
       v-model="isTreeVisible"
     />
     <router-link 
-      class="text-blue-500"
+      class="text-primary-500"
       :to="{ name: 'otus-id', params: { id: taxonomy.otu_id } }"
       v-html="taxonomy.name"
     />
@@ -114,8 +114,8 @@ const loadDescendants = () => {
 
   .button-expand {
     position: absolute;
-    top: 4px;
-    left: -8px;
+    top: 2px;
+    left: -9px;
   }
 
 }
diff --git a/src/components/VSpinner.vue b/src/components/VSpinner.vue
index 11e4cb6..19935e8 100644
--- a/src/components/VSpinner.vue
+++ b/src/components/VSpinner.vue
@@ -2,7 +2,7 @@
   <transition name="fade">
     <div 
       ref="spinnerElement"
-      class="box-spinner mx-spinner absolute bg-white opacity-90"
+      class="box-spinner mx-spinner absolute bg-white dark:bg-gray-800 opacity-90"
       :style="cssProperties"
     >
       <div
@@ -27,7 +27,8 @@
               c0-0.1,0-0.1,0-0.2c0.3-2-0.8-4-2.7-4.8l0,0c-3.1-1.1-5.9-3-8-5.6c-6.4-7.4-3-17,4.5-23.6c-3.5-4-8-8.7-12-10.8
               c-8.7-4.6-15.7,2.6-16.2,3.2L18.7,40c-0.6,0.8-1.2,1.6-1.8,2.5l-0.1,0.1c-0.6,0.9-1.2,1.8-1.8,2.7L15,45.4c-0.5,0.8-1,1.6-1.5,2.4
               l-0.3,0.5c-1,1.8-2,3.6-3,5.5L10,54.3c-0.4,0.9-0.9,1.8-1.3,2.7l-0.1,0.1C8.2,58,7.8,59,7.4,59.9l-0.2,0.5c-0.3,0.8-0.6,1.5-0.9,2.3
-              l-0.2,0.6c-0.4,1-0.7,1.9-1,2.9L5,66.7c-0.1,0.3-0.2,0.5-0.2,0.8C7.1,64.7,10.5,63.1,14.2,63.1z"/>
+              l-0.2,0.6c-0.4,1-0.7,1.9-1,2.9L5,66.7c-0.1,0.3-0.2,0.5-0.2,0.8C7.1,64.7,10.5,63.1,14.2,63.1z"
+          />
           <path
             id="Head"
             d="M36.2,33c5.3,1.8,11.4,6.8,15.7,11c0.5-0.3,1.1-0.6,1.6-0.9c2.3-1.2,4.7-2.1,7.2-2.7
diff --git a/src/components/globalComponents.js b/src/components/globalComponents.js
new file mode 100644
index 0000000..c017950
--- /dev/null
+++ b/src/components/globalComponents.js
@@ -0,0 +1,13 @@
+const components = import.meta.globEager('@/components/**/*.vue')
+
+const register = app => {
+  Object.entries(components).forEach(([path, definition]) => {
+    const componentName = path.split('/').pop().replace(/\.\w+$/, '')
+
+    app.component(componentName, definition.default)
+  })
+}
+
+export default {
+  register
+}
\ No newline at end of file
diff --git a/src/config/vendor/tailwind.config.js b/src/config/vendor/tailwind.config.js
new file mode 100644
index 0000000..c63433b
--- /dev/null
+++ b/src/config/vendor/tailwind.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    require('../../../tailwind.config.js')
+  ]
+}
diff --git a/src/constants/configPaths.js b/src/constants/configPaths.js
new file mode 100644
index 0000000..331688b
--- /dev/null
+++ b/src/constants/configPaths.js
@@ -0,0 +1,4 @@
+module.exports = { 
+  userTailwindConfigPath: './src/config/vendor/tailwind.config.js',
+  defaultTailwindConfigPath: './tailwind.config.js'
+}
diff --git a/src/main.js b/src/main.js
index f78b8ff..3a1c8e3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,16 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from '@/router/index.js'
+import globalComponents from '@/components/globalComponents'
 import '@/assets/css/main.scss'
 
-import Card from '@/components/Card/Card.vue'
-import CardContent from '@/components/Card/CardContent.vue'
-import CardHeader from '@/components/Card/CardHeader.vue'
-import VSpinner from '@/components/VSpinner.vue';
-
-
+console.log(globalComponents)
 const app = createApp(App)
 
 app.use(router)
-app.component("VCard", Card)
+globalComponents.register(app)
+/* app.component("VCard", Card)
 app.component("CardContent", CardContent)
 app.component("CardHeader", CardHeader)
-app.component("VSpinner", VSpinner)
+app.component("VSpinner", VSpinner) */
 app.mount('#app')
diff --git a/src/modules/otus/components/Citation/CitationList.vue b/src/modules/otus/components/Citation/CitationList.vue
index 415085c..816d680 100644
--- a/src/modules/otus/components/Citation/CitationList.vue
+++ b/src/modules/otus/components/Citation/CitationList.vue
@@ -1,11 +1,11 @@
 <template>
   <VCard>
-    <CardHeader>
+    <VCardHeader>
       <h1 class="text-md">
         Nomenclature citations
       </h1>
-    </CardHeader>
-    <CardContent>
+    </VCardHeader>
+    <VCardContent>
       <ul class="text-sm">
         <CitationRow
           v-for="citation in citations"
@@ -13,14 +13,14 @@
           :citation="citation"
         />
       </ul>
-    </CardContent>
+    </VCardContent>
   </VCard>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import CitationRow from './CitationRow.vue'
-import OtuService from '../../services/OtuService';
+import OtuService from '../../services/OtuService'
 
 const props = defineProps({
   otuId: {
diff --git a/src/modules/otus/components/Citation/CitationRow.vue b/src/modules/otus/components/Citation/CitationRow.vue
index 1e7f1ff..0fa36ff 100644
--- a/src/modules/otus/components/Citation/CitationRow.vue
+++ b/src/modules/otus/components/Citation/CitationRow.vue
@@ -22,8 +22,7 @@
 </template>
 
 <script setup>
-import ButtonExpand from '@/components/Button/ButtonExpand.vue'
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 defineProps({
   citation: {
diff --git a/src/modules/otus/components/Descendants.vue b/src/modules/otus/components/Descendants.vue
index 4c9746b..77a59fe 100644
--- a/src/modules/otus/components/Descendants.vue
+++ b/src/modules/otus/components/Descendants.vue
@@ -1,18 +1,18 @@
 <template>
   <VCard>
-    <CardHeader>
+    <VCardHeader>
       <h1 class="text-md">
         Descendants and synonyms
       </h1>
-    </CardHeader>
-    <CardContent class="text-sm">
+    </VCardHeader>
+    <VCardContent class="text-sm">
       <ul class="tree">
         <TreeView
           v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
           :taxonomy="taxonomy" 
         />
       </ul>
-    </CardContent>
+    </VCardContent>
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/Gallery.vue b/src/modules/otus/components/Gallery.vue
index 1b71413..4e4d039 100644
--- a/src/modules/otus/components/Gallery.vue
+++ b/src/modules/otus/components/Gallery.vue
@@ -1,8 +1,8 @@
 <template>
   <VCard v-if="images.length">
-    <CardContent>
+    <VCardContent>
       <GalleryMain :images="images" />
-    </CardContent>
+    </VCardContent>
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/Map.vue b/src/modules/otus/components/Map.vue
index 70818d1..7b8c6b2 100644
--- a/src/modules/otus/components/Map.vue
+++ b/src/modules/otus/components/Map.vue
@@ -1,6 +1,6 @@
 <template>
   <VCard>
-    <CardContent class="h-96 max-h-96">
+    <VCardContent class="h-96 max-h-96">
       <VSpinner v-if="isLoading" />
       <VMap
         ref="map"
@@ -9,7 +9,7 @@
         :geojson="geojson"
         @geojson:ready="isLoading = false"
       />
-    </CardContent>
+    </VCardContent>
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/TaxaInfo.vue b/src/modules/otus/components/TaxaInfo.vue
index e631c2a..bd85b45 100644
--- a/src/modules/otus/components/TaxaInfo.vue
+++ b/src/modules/otus/components/TaxaInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="{ invisible: !taxon.id }">
-    <h2 class="text-1xl text-gray-700 capitalize">
+    <h2 class="text-1xl text-gray-700 capitalize dark:text-gray-400">
       {{ taxon.rank || taxon.type }}
     </h2>
-    <h1 class="text-2xl">
+    <h1 class="text-2xl dark:text-gray-100">
       <span v-html="taxonNameString" />
       <span 
         class="ml-2"
@@ -11,7 +11,7 @@
         v-html="status"
       />
     </h1>
-    <h2 class="text-1xl text-gray-700">
+    <h2 class="text-1xl text-gray-700 dark:text-gray-200">
       <CommonNames :otu-id="props.otuId" />
     </h2>
   </div>
diff --git a/src/modules/otus/components/TypeDesignation.vue b/src/modules/otus/components/TypeDesignation.vue
index 7d8bcc2..fc09c9e 100644
--- a/src/modules/otus/components/TypeDesignation.vue
+++ b/src/modules/otus/components/TypeDesignation.vue
@@ -1,13 +1,13 @@
 <template>
   <VCard>
-    <CardHeader>
+    <VCardHeader>
       <h1 class="text-md">
         Type
       </h1>
-    </CardHeader>
-    <CardContent class="text-sm">
+    </VCardHeader>
+    <VCardContent class="text-sm">
       <p v-html="typeSpeciesLabel" />
-    </CardContent>
+    </VCardContent>
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/TypeSpecimen.vue b/src/modules/otus/components/TypeSpecimen.vue
index 0df9a02..4f2f44f 100644
--- a/src/modules/otus/components/TypeSpecimen.vue
+++ b/src/modules/otus/components/TypeSpecimen.vue
@@ -1,15 +1,15 @@
 <template>
   <VCard>
-    <CardHeader>
+    <VCardHeader>
       <h1 class="text-md">
         Type specimen
       </h1>
-    </CardHeader>
-    <CardContent class="text-sm">
+    </VCardHeader>
+    <VCardContent class="text-sm">
       <p v-if="typeMaterials.length">
         {{ typeMaterials[0].label }}
       </p>
-    </CardContent>
+    </VCardContent>
   </VCard>
 </template>
 
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 514f6e9..0f04ca4 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -1,8 +1,17 @@
 <template>
   <div>
-    <div class="bg-white border-b pt-6 pl-4 pr-4">
+    <div 
+      class="
+      bg-white
+      dark:bg-gray-800
+      dark:text-slate-400
+      dark:border-b-gray-800
+        border-b 
+        pl-4 
+        pr-4"
+    >
       <div 
-        class="container mx-auto"
+        class="container mx-auto pt-6 pb-6"
       >
         <div 
           class="
@@ -33,7 +42,7 @@
           />
         </div>
 
-        <div class="mt-8 mb-10">
+        <div class="mt-8">
           <TaxaInfo
             :taxon="taxon"
             :otu-id="otu.id"
diff --git a/tailwind.config.js b/tailwind.config.js
index 3aa7c86..8b51a18 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,85 @@
+// https://colors.muz.li/palette/24AADB/198599/2c4bdb/24db44/199930
 module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx,md}",
   ],
+
+  darkMode: 'class',
+
   theme: {
     extend: {
+      colors: {
+        'primary': { // Sky
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e'
+        },
+        'secondary-2': {
+          50: '#ecfeff', //Cyan 
+          100: '#cffafe',
+          200: '#a5f3fc',
+          300: '#67e8f9',
+          400: '#22d3ee',
+          500: '#06b6d4',
+          600: '#0891b2',
+          700: '#0e7490',
+          800: '#155e75',
+          900: '#164e63'
+        },
+        'secondary-3': { // Indigo
+          50: '#eef2ff', 
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81'
+        },
+        'secondary-4': { // Green
+          50: '#f0fdf4', 
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d'
+        },
+        'secondary-5': { // Lime
+          50: '#f7fee7', 
+          100: '#ecfccb',
+          200: '#d9f99d',
+          300: '#bef264',
+          400: '#a3e635',
+          500: '#84cc16',
+          600: '#65a30d',
+          700: '#4d7c0f',
+          800: '#3f6212',
+          900: '#365314'
+        },
+        'fonts': {
+          50: '#24DBB1', //primary font
+          100: '#C1BFC4', //secondary herader font
+          200: '#858388', //secondary font
+          400: '#7D7C80', //grayed out text
+          600: '#727E87', //primary header font
+          800: '#3E9AFC', //link blue
+        },
+        
+      },
       screens: {
         'print': {'raw': 'print'}
       }