set sytem theme related to system custom-hook

useSetThemeRelatedToSystem.js

import {useState, useEffect} from "react";
import {getSystemTheme, watchSytemTheme, setTheme as setWebsiteTheme } from "functions-path" // you need export them separately. I changed name for prevent name collision with local state below.


// Creating custom hook - must be 'use' at the starting of function name

const useSetThemeRelatedToSystem = () => {

   // create theme state
  
  const [theme,setTheme] = useState("dark") // I prefer dark mode to inital state;
  
  // For first time;
  useEffect() {
    
    const currentSystemTheme = getSystemTheme();
    
    // This will only set local state above
    
    setTheme(currentSystemTheme);
    
    // This will set the root element's query
    setWebsiteTheme(currentSystemTheme)
    
    // Watch for system theme changes
    watchSystemTheme();
    
  , []} // empty array to run only on mounting
  
   
  
  return {theme} // If you want use theme other stuffs
  
  
}