Migrate to Turborepo (#1251)

apps/frontend/src/composables/theme.js

@@ -0,0 +1,58 @@
+export const useTheme = () =>
+  useState('theme', () => {
+    const colorMode = useCookie('color-mode', {
+      maxAge: 60 * 60 * 24 * 365 * 10,
+      sameSite: 'lax',
+      secure: true,
+      httpOnly: false,
+      path: '/',
+    })
+
+    if (!colorMode.value) {
+      colorMode.value = {
+        value: 'dark',
+        preference: 'system',
+      }
+    }
+
+    if (colorMode.value.preference !== 'system') {
+      colorMode.value.value = colorMode.value.preference
+    }
+
+    return colorMode.value
+  })
+
+export const updateTheme = (value, updatePreference = false) => {
+  const theme = useTheme()
+  const cosmetics = useCosmetics()
+
+  const themeCookie = useCookie('color-mode', {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: 'lax',
+    secure: true,
+    httpOnly: false,
+    path: '/',
+  })
+
+  if (value === 'system') {
+    theme.value.preference = 'system'
+
+    const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
+    if (colorSchemeQueryList.matches) {
+      theme.value.value = 'light'
+    } else {
+      theme.value.value = cosmetics.value.preferredDarkTheme
+    }
+  } else {
+    theme.value.value = value
+    if (updatePreference) theme.value.preference = value
+  }
+
+  if (process.client) {
+    document.documentElement.className = `${theme.value.value}-mode`
+  }
+
+  themeCookie.value = theme.value
+}
+
+export const DARK_THEMES = ['dark', 'oled', 'retro']