From 87fa6a5c6ec5e3e42bba704b7fb38df082ab48e9 Mon Sep 17 00:00:00 2001
From: KobZ <62311724+devseckobz@users.noreply.github.com>
Date: Mon, 11 Mar 2024 15:55:28 +0800
Subject: [PATCH] Update server-side-rendering.md

Using useCookie composable for switching theme, on reload it will retain the previous selected theme.
---
 docs/guide/server-side-rendering.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
index b6002c7..90d63de 100644
--- a/docs/guide/server-side-rendering.md
+++ b/docs/guide/server-side-rendering.md
@@ -88,6 +88,33 @@ const { isDark } = useCustomTheme()
   </VApp>
 </template>
 ```
+## Vuetify Themes (useCookie)
+Another alternative method to toggle dark and light theme is to use Vuetify [useTheme](https://vuetifyjs.com/en/api/use-theme/) and Nuxt 3 [useCookie]([https://vuetifyjs.com/en/api/use-theme/](https://nuxt.com/docs/api/composables/use-cookie)) together
+```vue
+<script setup>
+  const theme = useTheme()
+  // set cookie name
+  const darkmode = useCookie('darkmode')
+
+  // check if darkmode cookie has a value if none it will use the default theme on your vuetify options
+  if(darkmode.value){
+    theme.global.name.value = darkmode.value
+  }
+
+  // to change theme between dark and light mode
+  function toggleDarkmode () {
+    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    darkmode.value = theme.global.name.value
+  }
+</script>
+
+<template>
+<!--Use this to toggle dark mode or light mode theme-->
+<v-btn>
+  Toggle Dark Theme
+</v-btn>
+</template>
+```
 
 ## Vuetify Display