diff --git a/plugins/setup-global-effects.client.ts b/plugins/setup-global-effects.client.ts
index ada7198a..832dc262 100644
--- a/plugins/setup-global-effects.client.ts
+++ b/plugins/setup-global-effects.client.ts
@@ -10,7 +10,7 @@ export default defineNuxtPlugin(() => {
     html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE)
   })
   watchEffect(() => {
-    html.classList.toggle('zen', userSettings.value.preferences.zenMode)
+    html.classList.toggle('zen', getPreferences(userSettings.value, 'zenMode'))
   })
   watchEffect(() => {
     Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v))