@mbao01/common 0.0.32 → 0.0.33

package/dist/types/utilities/theme.d.ts

@@ -1,3 +1,4 @@
 export type Theme = "dark" | "light";
+export declare const THEME_COOKIE_NAME = "data-theme";
 export declare const getTheme: () => Theme | null;
 export declare const saveTheme: (theme: Theme) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -95,6 +95,7 @@
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "universal-cookie": "^7.1.4",
     "vaul": "^0.9.0"
   },
   "devDependencies": {
@@ -142,5 +143,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "3646dbdb6bcfc492b8ec63094f6d16f98c73d4dc"
+  "gitHead": "169aeecca51d4544bfed02de64e0d9806dd83c6c"
 }

package/src/utilities/theme.ts

@@ -1,17 +1,19 @@
+import Cookies from "universal-cookie";
+
 export type Theme = "dark" | "light";
 
+export const THEME_COOKIE_NAME = "data-theme";
+
 export const getTheme = () => {
   if (typeof window === "undefined") return null;
 
-  let t = window.localStorage.getItem("__theme") as Theme;
-  if (!t)
-    t = window.matchMedia("(prefers-color-scheme: dark)")?.matches
-      ? "dark"
-      : "light";
-  return t;
+  const cookies = new Cookies();
+  const theme = cookies.get(THEME_COOKIE_NAME) as Theme;
+  return theme;
 };
 
 export const saveTheme = (theme: Theme) => {
-  document.body.setAttribute("data-theme", theme);
-  window.localStorage.setItem("__theme", theme);
+  const cookies = new Cookies();
+  cookies.set(THEME_COOKIE_NAME, theme, { secure: true });
+  document.body.setAttribute(THEME_COOKIE_NAME, theme);
 };