feat: add the darkmode support

Author: xiaoluoboding

components.d.ts

@@ -16,6 +16,8 @@ declare module '@vue/runtime-core' {
     'Logos:nuxtIcon': typeof import('~icons/logos/nuxt-icon')['default']
     'Logos:vue': typeof import('~icons/logos/vue')['default']
     'Mdi:heart': typeof import('~icons/mdi/heart')['default']
+    'Ri:moonLine': typeof import('~icons/ri/moon-line')['default']
+    'Ri:sunLine': typeof import('~icons/ri/sun-line')['default']
     ToggleButton: typeof import('./src/components/ToggleButton.vue')['default']
   }
 }

package.json

@@ -44,12 +44,14 @@
     "@stitches/core": "^1.2.8",
     "@supabase/auth-ui-shared": "^0.1.6",
     "@supabase/supabase-js": "^2.31.0",
+    "@types/lodash.clonedeep": "^4.5.7",
     "@types/node": "^18.7.14",
     "@unocss/reset": "^0.45.18",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^9.1.1",
     "@vueuse/head": "^1.1.23",
     "highlight.js": "^11.6.0",
+    "lodash.clonedeep": "^4.5.0",
     "typescript": "^4.6.4",
     "unocss": "^0.55.0",
     "unplugin-icons": "^0.14.9",

packages/Auth.vue

@@ -66,20 +66,11 @@
 
 <script lang="ts" setup>
 import { provide, ref, watch, computed } from 'vue'
-import { Provider, SupabaseClient } from '@supabase/supabase-js'
-import {
-  I18nVariables,
-  OtpType,
-  ProviderScopes,
-  RedirectTo,
-  SocialLayout,
-  ViewType,
-  en,
-  merge
-} from '@supabase/auth-ui-shared'
+import { I18nVariables, ViewType, en, merge } from '@supabase/auth-ui-shared'
 import { createStitches } from '@stitches/core'
+import cloneDeep from 'lodash.clonedeep'
 
-import { Appearance, AuthViewKey } from './types'
+import { AuthProps, AuthViewKey } from './types'
 import SocialAuthContainer from './auth/SocialAuthContainer.vue'
 import EmailAuth from './auth/EmailAuth.vue'
 import SocialAuth from './auth/SocialAuth.vue'
@@ -88,37 +79,6 @@ import ForgottenPassword from './auth/ForgottenPassword.vue'
 import UpdatePassword from './auth/UpdatePassword.vue'
 import VerifyOtp from './auth/VerifyOtp.vue'
 
-interface AuthProps {
-  supabaseClient: SupabaseClient
-  socialLayout?: SocialLayout
-  providers?: Provider[]
-  providerScopes?: Partial<ProviderScopes>
-  queryParams?: {
-    [key: string]: string
-  }
-  view?: ViewType
-  redirectTo?: RedirectTo
-  appearance?: Appearance
-  onlyThirdPartyProviders?: boolean
-  magicLink?: boolean
-  showLinks?: boolean
-  otpType?: OtpType
-  additionalData?: {
-    [key: string]: any
-  }
-  /**
-   * This will toggle on the dark variation of the theme
-   */
-  dark?: boolean
-  /**
-   * Override the labels and button text
-   */
-  localization?: {
-    variables?: I18nVariables
-  }
-  theme?: 'default' | string
-}
-
 const props = withDefaults(defineProps<AuthProps>(), {
   view: 'sign_in',
   socialLayout: 'vertical',
@@ -156,16 +116,18 @@ const isSignView = computed(() => {
 })
 
 const theme = computed(() => {
+  const appearanceTheme = cloneDeep(props.appearance?.theme)
+  const appearanceVariables = cloneDeep(props.appearance?.variables)
   return merge(
-    props?.appearance?.theme?.default ?? {},
-    props?.appearance?.theme?.[props.theme] ?? {},
-    props?.appearance?.variables?.default ?? {},
-    props?.appearance?.variables?.[props?.theme] ?? {}
+    appearanceTheme?.default ?? {},
+    appearanceTheme?.[props.theme] ?? {},
+    appearanceVariables?.default ?? {},
+    appearanceVariables?.[props?.theme] ?? {}
   )
 })
 createStitches({ theme: theme.value })
 watch(
-  () => props.appearance,
+  () => [props.appearance, props.theme],
   () => {
     createStitches({ theme: theme.value })
   },

packages/types.ts

@@ -1,14 +1,19 @@
-import { CSSProperties, InjectionKey, Ref } from 'vue'
-import {
-  AuthProviders,
+import type { CSSProperties, InjectionKey, Ref } from 'vue'
+import type {
   BaseAppearance,
-  BaseAuth,
   I18nVariables,
+  OtpType,
+  ProviderScopes,
+  RedirectTo,
   SocialLayout,
   ViewType
 } from '@supabase/auth-ui-shared'
-import { SupabaseClient } from '@supabase/supabase-js'
-import type { Session, User } from '@supabase/supabase-js'
+import type {
+  Provider,
+  Session,
+  SupabaseClient,
+  User
+} from '@supabase/supabase-js'
 
 export interface Appearance extends BaseAppearance {
   style?: {
@@ -23,19 +28,23 @@ export interface Appearance extends BaseAppearance {
   }
 }
 
-export interface Auth extends BaseAuth {
-  appearance?: BaseAppearance
-}
-
-export interface AuthProps {
-  supabaseClient: SupabaseClient // Supabase Client
-  socialLayout?: SocialLayout // This determines how the social providers show be displayed
-  providers?: AuthProviders // This is a list of social providers to be used
-  view?: ViewType // This determines the type of auth component to be shown
-  redirectTo?: undefined | string // This will determine where to redirect the user to after some auth operations
-  onlyThirdPartyProviders?: boolean // This will toggle if to show just the social providers without the EmailAuth component
-  magicLink?: boolean // This will toggle the 'Send magic link' on the links
-  showLinks?: boolean // This will toggle the links on the auth component to change the auth view
+interface BaseAuth {
+  supabaseClient: SupabaseClient
+  socialLayout?: SocialLayout
+  providers?: Provider[]
+  providerScopes?: Partial<ProviderScopes>
+  queryParams?: {
+    [key: string]: string
+  }
+  view?: ViewType
+  redirectTo?: RedirectTo
+  onlyThirdPartyProviders?: boolean
+  magicLink?: boolean
+  showLinks?: boolean
+  otpType?: OtpType
+  additionalData?: {
+    [key: string]: any
+  }
   /**
    * This will toggle on the dark variation of the theme
    */
@@ -44,13 +53,15 @@ export interface AuthProps {
    * Override the labels and button text
    */
   localization?: {
-    lang?: 'en' | 'zh'
     variables?: I18nVariables
   }
-  appearance?: BaseAppearance
   theme?: 'default' | string
 }
 
+export interface AuthProps extends BaseAuth {
+  appearance?: BaseAppearance
+}
+
 export type AuthProvider =
   | 'google'
   | 'facebook'