From ac19cd14a4261009479953304bfad38aa87320c2 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Sat, 30 Dec 2023 11:24:38 +0000
Subject: [PATCH] fix-deepsource

---
 .../src/client/theme-switcher/theme-switcher.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
index 289399cc..c65c527b 100644
--- a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
+++ b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
@@ -32,11 +32,11 @@ export interface UpdateProps {
   th: string;
 }
 
-function updateDOM(
+const updateDOM = (
   { resolvedTheme, resolvedColorScheme, resolvedColorSchemePref, th }: UpdateProps,
   isSystemDark: boolean,
   targetSelector?: string,
-) {
+) => {
   [document.querySelector(targetSelector || "#nextjs-themes"), document.documentElement].forEach(target => {
     /** ensuring that class 'dark' is always present when dark color scheme is applied to support Tailwind  */
     if (target)
@@ -49,9 +49,8 @@ function updateDOM(
 
   /** store system preference for computing data-theme on server side */
   document.cookie = `data-color-scheme-system=${isSystemDark ? "dark" : "light"}`;
-}
+};
 
-// todo: customizable transition time
 const disableAnimation = (themeTransition = "none") => {
   const css = document.createElement("style");
   const transition = `transition: ${themeTransition} !important;`;
@@ -70,6 +69,10 @@ const disableAnimation = (themeTransition = "none") => {
   };
 };
 
+/**
+ * You can use this hook in place of `<ThemeSwitcher />` component.
+ * Please note that you need to add "use client" on top of the component in which you are using this hook.
+ */
 export function useThemeSwitcher(props: ThemeSwitcherProps) {
   const [setStorage, ...depArray] = useTheme(state => [
     state.setStorage,
@@ -106,6 +109,10 @@ export function useThemeSwitcher(props: ThemeSwitcherProps) {
   }, [props.forcedColorScheme, props.forcedTheme, props.targetSelector, ...depArray]);
 }
 
+/**
+ * Use this component in your layout - `app/layout.tsx` or your custom layout or in `_app.tsx` file.
+ * @component
+ */
 export function ThemeSwitcher(props: ThemeSwitcherProps) {
   useThemeSwitcher(props);
   return null;