Refactor Root layout theme and fonts. Encapsulate functions into separate files. Fix default theme handling when cookie is not set by fall-backing to the selected theme mode. (#103)

apps/web/lib/fonts.ts

@@ -1,5 +1,7 @@
 import { Inter as SansFont } from 'next/font/google';
 
+import { cn } from '@kit/ui/utils';
+
 /**
  * @sans
  * @description Define here the sans font.
@@ -21,3 +23,27 @@ const heading = sans;
 
 // we export these fonts into the root layout
 export { sans, heading };
+
+/**
+ * @name getClassName
+ * @description Get the class name for the root layout.
+ * @param theme
+ */
+export function getFontsClassName(theme?: string) {
+  const dark = theme === 'dark';
+  const light = !dark;
+
+  const font = [sans.variable, heading.variable].reduce<string[]>(
+    (acc, curr) => {
+      if (acc.includes(curr)) return acc;
+
+      return [...acc, curr];
+    },
+    [],
+  );
+
+  return cn('min-h-screen bg-background antialiased', ...font, {
+    dark,
+    light,
+  });
+}

apps/web/lib/root-theme.ts

@@ -0,0 +1,16 @@
+import { cookies } from 'next/headers';
+
+type Theme = 'light' | 'dark' | 'system';
+
+/**
+ * @name getRootTheme
+ * @description Get the root theme from the cookies or default theme.
+ * @returns The root theme.
+ */
+export async function getRootTheme() {
+  const cookiesStore = await cookies();
+
+  const themeCookie = cookiesStore.get('theme')?.value as Theme
+
+  return themeCookie ?? process.env.NEXT_PUBLIC_DEFAULT_THEME_MODE ?? 'light';
+}