feat: Add dark mode (fix #2) (#12)

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",

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"

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 }}

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
  >

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>

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>

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"

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"
  >

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>