Skip to content

Instantly share code, notes, and snippets.

@lawrencecchen

lawrencecchen/useTheme.ts

Created August 16, 2022 00:14
Show Gist options
  • Save lawrencecchen/b9dd8f9558e9e0c8feac74d49f73dfdf to your computer and use it in GitHub Desktop.
Save lawrencecchen/b9dd8f9558e9e0c8feac74d49f73dfdf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lawrencecchen created this gist Aug 16, 2022.
    25 changes: 25 additions & 0 deletions useTheme.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    // npm i usehooks-ts
    import { useEffect } from "react";
    import { useDarkMode } from "usehooks-ts";

    export function useTheme() {
    const theme = useDarkMode();

    useEffect(() => {
    if (theme.isDarkMode) {
    document.body.classList.add("dark");
    } else {
    document.body.classList.remove("dark");
    }
    }, [theme.isDarkMode]);

    return theme;
    }

    // <body>
    // <script>
    // if (!!window.localStorage.getItem("usehooks-ts-dark-mode")) {
    // document.body.classList.add("dark");
    // }
    // </script>
    // </body>