refactor: implement light/dark themes using cookies

theme/theme.client.ts

@@ -0,0 +1,9 @@
+import UniversalCookie from 'universal-cookie'
+
+import { DEFAULT_THEME } from '@/utils/constants'
+import type { CookiesStore, Theme } from '@/utils/constants'
+
+export const useTheme = (cookiesStore: CookiesStore): Theme => {
+  const universalCookie = new UniversalCookie(cookiesStore)
+  return universalCookie.get('theme') ?? DEFAULT_THEME
+}

theme/theme.server.ts

@@ -0,0 +1,21 @@
+'use server'
+
+import { cookies } from 'next/headers'
+
+import type { Theme } from '@/utils/constants'
+import { COOKIE_MAX_AGE, DEFAULT_THEME, THEMES } from '@/utils/constants'
+
+export const setTheme = (theme: Theme): void => {
+  cookies().set('theme', theme, {
+    path: '/',
+    maxAge: COOKIE_MAX_AGE
+  })
+}
+
+export const getTheme = (): Theme => {
+  const theme = cookies().get('theme')?.value ?? DEFAULT_THEME
+  if (THEMES.includes(theme as Theme)) {
+    return theme as Theme
+  }
+  return DEFAULT_THEME
+}