From f149e37d612f690ca3bada2134430be7f68dfdac Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 11 Jul 2022 21:30:20 +0200
Subject: [PATCH] feat(gui-v2): add dark mode to state and some styles

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/nc-gui-v2/app.vue                    |  2 ++
 packages/nc-gui-v2/assets/style-v2.css        | 17 +++++++++-------
 .../components/general/ColorModeSwitcher.vue  | 20 +++++++++++++++++++
 .../nc-gui-v2/components/general/Sponsors.vue |  6 +++---
 packages/nc-gui-v2/composables/useColors.ts   |  4 ++--
 .../nc-gui-v2/composables/useGlobalState.ts   |  5 +++--
 packages/nc-gui-v2/pages/projects/index.vue   |  6 +++---
 .../nc-gui-v2/pages/projects/index/list.vue   |  2 +-
 packages/nc-gui-v2/plugins/state.ts           | 11 ++++++++++
 9 files changed, 55 insertions(+), 18 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/general/ColorModeSwitcher.vue

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index b1bfa2bd5a..8fffa96dad 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -43,6 +43,8 @@ const signOut = () => {
           <release-info />
           -->
 
+          <general-color-mode-switcher v-model="$state.darkMode.value" />
+
           <general-language class="mr-3" />
 
           <template v-if="$state.signedIn.value">
diff --git a/packages/nc-gui-v2/assets/style-v2.css b/packages/nc-gui-v2/assets/style-v2.css
index 3106098b2a..473ab73867 100644
--- a/packages/nc-gui-v2/assets/style-v2.css
+++ b/packages/nc-gui-v2/assets/style-v2.css
@@ -2,25 +2,28 @@ html,
 body,
 #__nuxt,
 .v-application__wrap {
-    margin: 0 !important;
-    height: 100vh;
-    width: 100vw;
+    @apply m-0 h-[100vh] w-[100vw] bg-white dark:(bg-black text-white);
 }
 
-html, body {
-    @apply scrollbar-thin-primary;
+nav,
+nav .v-list {
+    @apply dark:(bg-gray-900 text-white)
+}
+
+.v-divider {
+    @apply dark:bg-white
 }
 
 .page-enter-active,
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-    transition: opacity .5s
+    @apply transition-opacity duration-300 ease-in-out;
 }
 
 .page-enter,
 .page-leave-active,
 .layout-enter,
 .layout-leave-active {
-    opacity: 0
+    @apply opacity-0;
 }
diff --git a/packages/nc-gui-v2/components/general/ColorModeSwitcher.vue b/packages/nc-gui-v2/components/general/ColorModeSwitcher.vue
new file mode 100644
index 0000000000..0fb6bfd30c
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ColorModeSwitcher.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import MaterialSymbolsLightMode from '~icons/material-symbols/light-mode'
+import MaterialSymbolsDarkMode from '~icons/material-symbols/dark-mode'
+interface Props {
+  modelValue: boolean
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const toggleMode = () => {
+  emits('update:modelValue', !modelValue)
+}
+</script>
+
+<template>
+  <MaterialSymbolsLightMode v-if="modelValue" class="md:text-xl cursor-pointer" @click="toggleMode" />
+  <MaterialSymbolsDarkMode v-else class="md:text-xl cursor-pointer" @click="toggleMode" />
+</template>
diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index 1371e4c074..ee48e10b3e 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -9,8 +9,8 @@ const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <v-card :rounded="0" max-width="300" class="pb-3" href="https://github.com/sponsors/nocodb" target="_blank">
-    <v-img src="/ants-leaf-cutter.jpeg" :cover="true" :aspect-ratio="1" :height="nav ? 80 : ''" class="mt-0" />
+  <v-card :rounded="0" class="dark:bg-gray-900" href="https://github.com/sponsors/nocodb" target="_blank">
+    <v-img src="/ants-leaf-cutter.jpeg" :cover="true" :aspect-ratio="1" :height="nav ? 80 : ''" />
 
     <v-card-title v-if="!nav" class="pb-2">
       {{ $t('msg.info.sponsor.header') }}
@@ -21,7 +21,7 @@ const { nav = false } = defineProps<Props>()
     </v-card-text>
 
     <v-card-actions class="justify-center">
-      <v-btn color="primary">
+      <v-btn class="dark:(!text-white) text-primary">
         <MdiHeartsCard class="text-red-500 mr-2" />
         {{ $t('activity.sponsorUs') }}
       </v-btn>
diff --git a/packages/nc-gui-v2/composables/useColors.ts b/packages/nc-gui-v2/composables/useColors.ts
index aa6d605fa4..7448ad7c1c 100644
--- a/packages/nc-gui-v2/composables/useColors.ts
+++ b/packages/nc-gui-v2/composables/useColors.ts
@@ -9,11 +9,11 @@ export default function useColors(darkMode?: MaybeRef<boolean>) {
   let mode = $ref(unref(darkMode))
   const { $state } = useNuxtApp()
 
-  if (!mode) mode = $state.darkMode.value
+  if (typeof mode === 'undefined') mode = $state.darkMode.value
 
   scope.run(() => {
     watch($state.darkMode, (newMode) => {
-      mode = newMode
+      if (typeof mode === 'undefined') mode = newMode
     })
 
     watchEffect(() => {
diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState.ts
index d8bbfaae10..ec937f8d83 100644
--- a/packages/nc-gui-v2/composables/useGlobalState.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState.ts
@@ -26,7 +26,8 @@ export const useGlobalState = (): GlobalState => {
   /** get the preferred languages of a user, according to browser settings */
   const preferredLanguages = $(usePreferredLanguages())
   /** get the preferred dark mode setting, according to browser settings */
-  const darkMode = $(usePreferredDark())
+  const prefersDarkMode = $(usePreferredDark())
+
   /** reactive timestamp to check token expiry against */
   const timestamp = $(useTimestamp({ immediate: true, interval: 100 }))
 
@@ -62,7 +63,7 @@ export const useGlobalState = (): GlobalState => {
   }, 'en' /** fallback locale */)
 
   /** State */
-  const initialState: State = { token: null, user: null, lang: preferredLanguage, darkMode }
+  const initialState: State = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
   const storage = $(useStorage<State>(storageKey, initialState))
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 49e76cbc88..886688f3a6 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -30,7 +30,7 @@ const navDrawerOptions = [
 
 const route = useRoute()
 
-const { $api } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
 
 const response = await $api.project.list({})
 const projects = $ref(response.list)
@@ -46,7 +46,7 @@ const activePage = $ref(navDrawerOptions[0].title)
             <v-menu class="select-none">
               <template #activator="{ props }">
                 <div
-                  class="mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold hover:bg-gray-200/20"
+                  class="bg-white mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold hover:(!bg-gray-100)"
                   @click="props.onClick"
                 >
                   <MdiPlus class="text-primary text-2xl" />
@@ -73,7 +73,7 @@ const activePage = $ref(navDrawerOptions[0].title)
           </div>
 
           <div class="advance-menu flex-1">
-            <v-list class="flex flex-col gap-1" color="primary">
+            <v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'default' : 'primary'">
               <!-- todo: v-list-item-group doesn't seem to work with vuetify 3 yet ... -->
               <v-list-item
                 v-for="item in navDrawerOptions"
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index 44f883b55b..ef76a70b88 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -28,7 +28,7 @@ const openProject = async (project: ProjectType) => {
 
     <template v-for="project of projects" :key="project.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm) p-2 transition-color ease-in duration-100"
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
         @click="openProject(project)"
       >
         <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index 15eb2d79f1..36b60df19c 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -1,4 +1,5 @@
 import { defineNuxtPlugin } from '#app'
+import { useDark, watch } from '#imports'
 import { useGlobalState } from '~/composables/useGlobalState'
 
 /**
@@ -15,9 +16,19 @@ import { useGlobalState } from '~/composables/useGlobalState'
  */
 export default defineNuxtPlugin((nuxtApp) => {
   const storage = useGlobalState()
+  const darkMode = useDark()
 
   /** set i18n locale to stored language */
   nuxtApp.vueApp.i18n.locale.value = storage.lang.value
 
+  /** set current dark mode from storage */
+  watch(
+    storage.darkMode,
+    (newMode) => {
+      darkMode.value = newMode
+    },
+    { immediate: true },
+  )
+
   nuxtApp.provide('state', storage)
 })