refactor: use next-theme-provider

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "next": "^15.2.0",
+    "next-theme-provider": "^1.0.0",
     "react": "^19.0.0",
     "react-aria": "^3.37.0",
     "react-aria-components": "^1.6.0",
@@ -43,6 +44,7 @@
     "lint": "next lint",
     "start": "next start",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "ts-check": "tsc --noEmit"
   }
 }

src/app/layout.tsx

@@ -1,13 +1,12 @@
-import { loadTheme } from "@/app/actions";
 import { Header } from "@/component/header/header";
 import { Noscript } from "@/component/noscript";
 import { AppRouterProvider } from "@/component/provider/app-router-provider";
-import { ThemeProvider } from "@/component/provider/theme-provider";
 import { cn } from "@/util/cn";
 import type { Metadata } from "next";
+import { loadTheme, ThemeProvider } from "next-theme-provider";
 import { DM_Sans } from "next/font/google";
 import "./globals.css";
-import { memo, ReactNode } from "react";
+import { memo, type ReactNode } from "react";
 
 const dmSans = DM_Sans({
   display: "swap",

src/app/not-found.tsx

@@ -1,5 +1,5 @@
 import { AppLink } from "@/component/app-link";
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { memo } from "react";
 
 export const metadata: Metadata = {

src/component/app-checkbox.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "@/util/cn";
 import { memo } from "react";
-import { Checkbox, CheckboxProps } from "react-aria-components";
+import { Checkbox, type CheckboxProps } from "react-aria-components";
 
 export const AppCheckbox = memo(({ children, ...props }: CheckboxProps) => {
   return (

src/component/app-focus-ring.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/util/cn";
 import { memo } from "react";
-import { FocusRing, FocusRingProps } from "react-aria";
+import { FocusRing, type FocusRingProps } from "react-aria";
 
 export const AppFocusRing = memo((props: FocusRingProps) => {
   return (

src/component/app-link.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { AppFocusRing } from "@/component/app-focus-ring";
 import { memo } from "react";
-import { Link, LinkProps } from "react-aria-components";
+import { Link, type LinkProps } from "react-aria-components";
 
 export const AppLink = memo((props: LinkProps) => {
   return (

src/component/app-meter.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Meter, MeterProps } from "react-aria-components";
+import { Meter, type MeterProps } from "react-aria-components";
 
 type Props = MeterProps & {
   percentage: number;

src/component/header/theme-toggle.tsx

@@ -2,26 +2,13 @@
 import { AppFocusRing } from "@/component/app-focus-ring";
 import { IconMoon } from "@/component/svg/icon-moon";
 import { IconSun } from "@/component/svg/icon-sun";
-import { useContextTheme } from "@/hook/use-context-theme";
-import { THEME } from "@/type/theme";
 import { cn } from "@/util/cn";
+import { useThemeContext } from "next-theme-provider";
 import { memo } from "react";
 import { ToggleButton } from "react-aria-components";
 
 export const ThemeToggle = memo(() => {
-  const { setTheme } = useContextTheme();
-
-  const handleChange = (): void => {
-    const theme = document.documentElement.getAttribute("data-theme");
-    if (theme === null) throw new Error('Missing "data-theme" attribute');
-
-    const isDark =
-      (theme === THEME.SYSTEM &&
-        matchMedia("(prefers-color-scheme: dark)").matches) ||
-      theme === THEME.DARK;
-
-    setTheme(isDark ? THEME.LIGHT : THEME.DARK);
-  };
+  const { toggleTheme } = useThemeContext();
 
   return (
     <AppFocusRing>
@@ -31,7 +18,7 @@ export const ThemeToggle = memo(() => {
           "grid place-items-center bg-neutral-100 dark:bg-neutral-700",
           "size-8 rounded-6 tb:h-11 tb:w-11 tb:rounded-8",
         )}
-        onChange={handleChange}
+        onChange={toggleTheme}
       >
         {[IconSun, IconMoon].map((Icon, index) => {
           const isSun = index === 0;

src/component/provider/app-router-provider.tsx

@@ -4,7 +4,7 @@
  */
 "use client";
 import { useRouter } from "next/navigation";
-import { memo, ReactNode } from "react";
+import { memo, type ReactNode } from "react";
 import { RouterProvider } from "react-aria-components";
 
 declare module "react-aria-components" {

src/component/svg/icon-chevron.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/util/cn";
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement> & {
   direction: "up" | "down";

src/component/svg/icon-info-circle.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/svg/icon-moon.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/svg/icon-sun.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/svg/logomark.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/svg/shape-character-count.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/svg/shape-sentence-count.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/svg/shape-word-count.tsx

@@ -1,4 +1,4 @@
-import { memo, SVGAttributes } from "react";
+import { memo, type SVGAttributes } from "react";
 
 type Props = SVGAttributes<SVGElement>;
 

src/component/text-analyzer/letter-stats-section.tsx

@@ -1,7 +1,7 @@
 import { AppFocusRing } from "@/component/app-focus-ring";
 import { AppMeter } from "@/component/app-meter";
 import { IconChevron } from "@/component/svg/icon-chevron";
-import { LetterStats } from "@/type/letter-stats";
+import type { LetterStats } from "@/type/letter-stats";
 import { memo, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 

tsconfig.json

@@ -11,6 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "verbatimModuleSyntax": false,
     "jsx": "preserve",
     "incremental": true,
     "plugins": [