Add typescript version of useDarkMode hook

Author: bozheville

src/pages/useDarkMode.md

@@ -10,6 +10,7 @@ links:
     name: donavon/use-dark-mode
     description: A more configurable implementation of this hook that syncs changes across browser tabs and handles SSR. Provided much of the code and inspiration for this post.
 code: "\/\/ Usage\r\nfunction App() {\r\n  const [darkMode, setDarkMode] = useDarkMode();\r\n\r\n  return (\r\n    <div>\r\n      <div className=\"navbar\">\r\n        <Toggle darkMode={darkMode} setDarkMode={setDarkMode} \/>\r\n      <\/div>\r\n      <Content \/>\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ Hook\r\nfunction useDarkMode() {\r\n  \/\/ Use our useLocalStorage hook to persist state through a page refresh.\r\n  \/\/ Read the recipe for this hook to learn more: usehooks.com\/useLocalStorage\r\n  const [enabledState, setEnabledState] = useLocalStorage('dark-mode-enabled');\r\n\r\n  \/\/ See if user has set a browser or OS preference for dark mode.\r\n  \/\/ The usePrefersDarkMode hook composes a useMedia hook (see code below).\r\n  const prefersDarkMode = usePrefersDarkMode();\r\n\r\n  \/\/ If enabledState is defined use it, otherwise fallback to prefersDarkMode.\r\n  \/\/ This allows user to override OS level setting on our website.\r\n  const enabled =\r\n    typeof enabledState !== 'undefined' ? enabledState : prefersDarkMode;\r\n\r\n  \/\/ Fire off effect that add\/removes dark mode class\r\n  useEffect(\r\n    () => {\r\n      const className = 'dark-mode';\r\n      const element = window.document.body;\r\n      if (enabled) {\r\n        element.classList.add(className);\r\n      } else {\r\n        element.classList.remove(className);\r\n      }\r\n    },\r\n    [enabled] \/\/ Only re-call effect when value changes\r\n  );\r\n\r\n  \/\/ Return enabled state and setter\r\n  return [enabled, setEnabledState];\r\n}\r\n\r\n\/\/ Compose our useMedia hook to detect dark mode preference.\r\n\/\/ The API for useMedia looks a bit weird, but that's because ...\r\n\/\/ ... it was designed to support multiple media queries and return values.\r\n\/\/ Thanks to hook composition we can hide away that extra complexity!\r\n\/\/ Read the recipe for useMedia to learn more: usehooks.com\/useMedia\r\nfunction usePrefersDarkMode() {\r\n  return useMedia(['(prefers-color-scheme: dark)'], [true], false);\r\n}"
+tsCode: "// Usage\r\nfunction App() {\r\n  const [darkMode, setDarkMode] = useDarkMode();\r\n\r\n  return (\r\n    <div>\r\n      <div className=\"navbar\">\r\n        <Toggle darkMode={darkMode} setDarkMode={setDarkMode} />\r\n      </div>\r\n      <Content />\r\n    </div>\r\n  );\r\n}\r\n\r\n// Hook\r\nfunction useDarkMode() {\r\n  // Use our useLocalStorage hook to persist state through a page refresh.\r\n  // Read the recipe for this hook to learn more: usehooks.com/useLocalStorage\r\n  const [enabledState, setEnabledState] = useLocalStorage<boolean>('dark-mode-enabled', false);\r\n\r\n  // See if user has set a browser or OS preference for dark mode.\r\n  // The usePrefersDarkMode hook composes a useMedia hook (see code below).\r\n  const prefersDarkMode = usePrefersDarkMode();\r\n\r\n  // If enabledState is defined use it, otherwise fallback to prefersDarkMode.\r\n  // This allows user to override OS level setting on our website.\r\n  const enabled = enabledState ?? prefersDarkMode;\r\n\r\n  // Fire off effect that add/removes dark mode class\r\n  useEffect(\r\n    () => {\r\n      const className = 'dark-mode';\r\n      const element = window.document.body;\r\n      if (enabled) {\r\n        element.classList.add(className);\r\n      } else {\r\n        element.classList.remove(className);\r\n      }\r\n    },\r\n    [enabled] // Only re-call effect when value changes\r\n  );\r\n\r\n  // Return enabled state and setter\r\n  return [enabled, setEnabledState];\r\n}\r\n\r\n// Compose our useMedia hook to detect dark mode preference.\r\n// The API for useMedia looks a bit weird, but that's because ...\r\n// ... it was designed to support multiple media queries and return values.\r\n// Thanks to hook composition we can hide away that extra complexity!\r\n// Read the recipe for useMedia to learn more: usehooks.com/useMedia\r\nfunction usePrefersDarkMode() {\r\n  return useMedia<boolean>(['(prefers-color-scheme: dark)'], [true], false);\r\n}"
 ---
 
 This hook handles all the stateful logic required to add a <b>☾ dark mode</b> toggle to your website. It utilizes localStorage to remember the user's chosen mode, defaults to their browser or OS level setting using the `prefers-color-scheme` media query and manages the setting of a `.dark-mode` className on `body` to apply your styles.