From b6535b10d4461e5e1f3aeb1e2686f411fff273d9 Mon Sep 17 00:00:00 2001
From: Hugo ATTAL <hugoattal@hotmail.fr>
Date: Fri, 4 Feb 2022 19:22:24 +0100
Subject: [PATCH] feat: Add dark mode (fix #2) (#12)

---
 packages/histoire/package.json                |  1 +
 packages/histoire/src/client/app/App.vue      |  6 ++-
 .../client/app/components/StoryListItem.vue   |  4 +-
 .../app/components/StoryVariantGridItem.vue   |  4 +-
 .../app/components/StoryVariantItem.vue       |  6 +--
 .../app/components/StoryVariantSingleView.vue |  4 +-
 .../src/client/app/components/StoryView.vue   |  6 +--
 .../app/components/base/BaseSplitPane.vue     |  4 +-
 .../src/client/app/components/ui/UIHeader.vue | 33 +++++++++++++
 pnpm-lock.yaml                                | 48 +++++++++++++++++++
 10 files changed, 100 insertions(+), 16 deletions(-)
 create mode 100644 packages/histoire/src/client/app/components/ui/UIHeader.vue

diff --git a/packages/histoire/package.json b/packages/histoire/package.json
index 24dbee5c..18240e72 100644
--- a/packages/histoire/package.json
+++ b/packages/histoire/package.json
@@ -48,6 +48,7 @@
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
+    "@iconify/vue": "^3.1.3",
     "@types/node": "^14.14.21",
     "autoprefixer": "^10.4.2",
     "concurrently": "^7.0.0",
diff --git a/packages/histoire/src/client/app/App.vue b/packages/histoire/src/client/app/App.vue
index 571ff25c..596f08f5 100644
--- a/packages/histoire/src/client/app/App.vue
+++ b/packages/histoire/src/client/app/App.vue
@@ -5,6 +5,7 @@ import { useStoryStore } from './stores/story'
 import StoryList from './components/StoryList.vue'
 import BaseSplitPane from './components/base/BaseSplitPane.vue'
 import { shallowRef } from 'vue'
+import UIHeader from './components/ui/UIHeader.vue'
 
 const storyStore = useStoryStore()
 
@@ -13,6 +14,7 @@ const files = shallowRef(rawFiles)
 onUpdate((newValue) => {
   files.value = newValue
 })
+
 </script>
 
 <template>
@@ -28,7 +30,9 @@ onUpdate((newValue) => {
     </template>
   </div>
 
-  <div class="htw-h-full">
+  <div class="htw-h-screen dark:htw-bg-gray-800 htw-flex htw-flex-col dark:htw-text-slate-200">
+    <UIHeader />
+
     <BaseSplitPane
       save-id="main-horiz"
       :min="5"
diff --git a/packages/histoire/src/client/app/components/StoryListItem.vue b/packages/histoire/src/client/app/components/StoryListItem.vue
index c7ac96d3..3e33122a 100644
--- a/packages/histoire/src/client/app/components/StoryListItem.vue
+++ b/packages/histoire/src/client/app/components/StoryListItem.vue
@@ -19,8 +19,8 @@ defineProps({
           storyId: story.id,
         },
       }"
-      class="htw-p-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:htw-bg-primary-900"
-      active-class="htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white htw-font-bold"
+      class="htw-p-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
+      active-class="htw-bg-primary-500 dark:htw-bg-primary-600 htw-text-white htw-font-bold"
     >
       <span>
         {{ story.title }}
diff --git a/packages/histoire/src/client/app/components/StoryVariantGridItem.vue b/packages/histoire/src/client/app/components/StoryVariantGridItem.vue
index 30a95fce..b84ad8a1 100644
--- a/packages/histoire/src/client/app/components/StoryVariantGridItem.vue
+++ b/packages/histoire/src/client/app/components/StoryVariantGridItem.vue
@@ -41,9 +41,9 @@ const { isActive, targetRoute } = useCurrentVariantRoute(variant)
 
     <!-- Body -->
     <div
-      class="htw-border htw-border-gray-100 htw-bg-white htw-rounded-lg htw-h-full htw-p-4"
+      class="htw-border htw-border-gray-100 dark:htw-border-gray-600 htw-bg-white dark:htw-bg-gray-800 htw-rounded-lg htw-h-full htw-p-4"
       :class="{
-        'htw-border-primary-200': isActive,
+        'htw-border-primary-200 dark:htw-border-primary-500': isActive,
       }"
       @click.stop.prevent
     >
diff --git a/packages/histoire/src/client/app/components/StoryVariantItem.vue b/packages/histoire/src/client/app/components/StoryVariantItem.vue
index 3d26a789..f1615790 100644
--- a/packages/histoire/src/client/app/components/StoryVariantItem.vue
+++ b/packages/histoire/src/client/app/components/StoryVariantItem.vue
@@ -18,10 +18,8 @@ const { isActive, targetRoute } = useCurrentVariantRoute(variant)
   <div>
     <RouterLink
       :to="targetRoute"
-      class="htw-p-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:htw-bg-primary-900"
-      :class="{
-        'htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800': isActive,
-      }"
+      class="htw-p-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
+      active-class="htw-bg-primary-500 dark:htw-bg-primary-600 htw-text-white htw-font-bold"
     >
       {{ variant.title }}
     </RouterLink>
diff --git a/packages/histoire/src/client/app/components/StoryVariantSingleView.vue b/packages/histoire/src/client/app/components/StoryVariantSingleView.vue
index 5e35c4ef..e5809e48 100644
--- a/packages/histoire/src/client/app/components/StoryVariantSingleView.vue
+++ b/packages/histoire/src/client/app/components/StoryVariantSingleView.vue
@@ -17,7 +17,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="htw-border htw-border-gray-100 htw-rounded-lg htw-h-full">
+  <div class="htw-border htw-border-gray-100 dark:htw-border-gray-600 htw-rounded-lg htw-h-full">
     <BaseSplitPane
       save-id="story-single-responsive"
       :min="1"
@@ -44,7 +44,7 @@ defineProps({
         </div>
       </template>
       <template #last>
-        <div class="htw-w-full htw-h-full htw-bg-gray-200 dark:htw-bg-gray-800 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10" />
+        <div class="htw-w-full htw-h-full htw-bg-gray-200 dark:htw-bg-gray-800 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-200/30" />
       </template>
     </BaseSplitPane>
   </div>
diff --git a/packages/histoire/src/client/app/components/StoryView.vue b/packages/histoire/src/client/app/components/StoryView.vue
index 9ca6e5ff..8cea8199 100644
--- a/packages/histoire/src/client/app/components/StoryView.vue
+++ b/packages/histoire/src/client/app/components/StoryView.vue
@@ -61,10 +61,10 @@ watch(() => storyStore.currentStory, () => {
       class="htw-h-full"
     >
       <template #first>
-        <div class="htw-bg-gray-50 htw-h-full">
+        <div class="htw-bg-gray-50 htw-h-full dark:htw-bg-gray-900">
           <div
             v-if="storyStore.currentStory.layout.type === 'grid'"
-            class="htw-bg-gray-50 htw-h-full htw-overflow-y-auto"
+            class="htw-bg-gray-50 htw-h-full htw-overflow-y-auto dark:htw-bg-gray-900"
           >
             <div
               class="htw-grid htw-gap-4 htw-m-4"
@@ -89,7 +89,7 @@ watch(() => storyStore.currentStory, () => {
             :default-split="17"
           >
             <template #first>
-              <div class="htw-bg-white htw-h-full htw-overflow-y-auto">
+              <div class="htw-bg-white dark:htw-bg-gray-800 htw-h-full htw-overflow-y-auto">
                 <StoryVariantItem
                   v-for="(variant, index) of storyStore.currentStory.variants"
                   :key="index"
diff --git a/packages/histoire/src/client/app/components/base/BaseSplitPane.vue b/packages/histoire/src/client/app/components/base/BaseSplitPane.vue
index 57854731..22307584 100644
--- a/packages/histoire/src/client/app/components/base/BaseSplitPane.vue
+++ b/packages/histoire/src/client/app/components/base/BaseSplitPane.vue
@@ -138,7 +138,7 @@ onUnmounted(() => {
       class="htw-relative htw-top-0 htw-left-0 htw-z-20"
       :class="{
         'htw-pointer-events-none': dragging,
-        'htw-border-r htw-border-gray-200 dark:htw-border-gray-800': orientation === 'landscape'
+        'htw-border-r htw-border-gray-200 dark:htw-border-gray-600': orientation === 'landscape'
       }"
       :style="leftStyle"
     >
@@ -159,7 +159,7 @@ onUnmounted(() => {
       class="htw-relative htw-bottom-0 htw-right-0"
       :class="{
         'htw-pointer-events-none': dragging,
-        'htw-border-t htw-border-gray-200 dark:htw-border-gray-800': orientation === 'portrait'
+        'htw-border-t htw-border-gray-200 dark:htw-border-gray-600': orientation === 'portrait'
       }"
       :style="rightStyle"
     >
diff --git a/packages/histoire/src/client/app/components/ui/UIHeader.vue b/packages/histoire/src/client/app/components/ui/UIHeader.vue
new file mode 100644
index 00000000..d3076ca9
--- /dev/null
+++ b/packages/histoire/src/client/app/components/ui/UIHeader.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+
+const isDark = useDark({ valueDark: 'htw-dark' })
+const toggleDark = useToggle(isDark)
+
+const carbonIcon = computed(() => {
+  return isDark.value ? 'carbon:moon' : 'carbon:sun'
+})
+</script>
+
+<template>
+  <div
+    class="htw-border-gray-200 dark:htw-border-gray-600 htw-border-b htw-px-4 htw-py-4 htw-flex htw-items-center"
+  >
+    <div class="">
+      Histoire
+    </div>
+    <div class="htw-ml-auto">
+      <span
+        class="hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer"
+        @click="toggleDark()"
+      >
+        <Icon
+          :icon="carbonIcon"
+          class="htw-w-6 htw-h-6"
+        />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f7050958..a9c2b965 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,7 @@ importers:
 
   packages/histoire:
     specifiers:
+      '@iconify/vue': ^3.1.3
       '@types/node': ^14.14.21
       '@vitejs/plugin-vue': ^2.1.0
       '@vueuse/core': ^7.5.5
@@ -83,6 +84,7 @@ importers:
       vue: 3.2.29
       vue-router: 4.0.12_vue@3.2.29
     devDependencies:
+      '@iconify/vue': 3.1.3_vue@3.2.29
       '@types/node': 14.18.9
       autoprefixer: 10.4.2_postcss@8.4.5
       concurrently: 7.0.0
@@ -318,6 +320,17 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@iconify/vue/3.1.3_vue@3.2.29:
+    resolution: {integrity: sha512-tZ7+mh2HDy8pj7dajByn4bE72XIZM3l+F490VIAAYifwpqGnjqv9O60n1MPsV5dM7Q+FN6yVXZMdXT68l//WTw==}
+    peerDependencies:
+      vue: 3.x
+    dependencies:
+      cross-fetch: 3.1.5
+      vue: 3.2.29
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1144,6 +1157,14 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /cross-fetch/3.1.5:
+    resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
+    dependencies:
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2453,6 +2474,18 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+  /node-fetch/2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
   /node-releases/2.0.1:
     resolution: {integrity: sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==}
     dev: true
@@ -3188,6 +3221,10 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /tr46/0.0.3:
+    resolution: {integrity: sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=}
+    dev: true
+
   /tree-kill/1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -3406,6 +3443,17 @@ packages:
       '@vue/server-renderer': 3.2.29_vue@3.2.29
       '@vue/shared': 3.2.29
 
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=}
+    dev: true
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha1-lmRU6HZUYuN2RNNib2dCzotwll0=}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies: