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

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

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

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>

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>

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(() => {

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

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"

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>

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