feat(docs): add darkmode (#243)

Co-authored-by: QuiiBz <tom.lienrd@gmail.com>

docs/components/logo.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import Image from 'next/image';
+import { useTheme } from 'nextra-theme-docs';
+import { useEffect, useState } from 'react';
+
+const Logo = () => {
+  const { resolvedTheme } = useTheme();
+  const [src, setSrc] = useState('/logo-black.png');
+
+  useEffect(() => {
+    if (resolvedTheme === 'dark') {
+      setSrc('/logo-white.png');
+      return;
+    }
+
+    setSrc('/logo-black.png');
+  }, [resolvedTheme]);
+
+  return <Image src={src} alt="Next International logo" priority width={240} height={200} />;
+};
+
+export default Logo;

docs/next.config.js

@@ -2,9 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   webpack(config) {
-    const allowedSvgRegex = /components\/icons\/.+\.svg$/;
+    const allowedSvgRegex = /\.svg$/;
 
-    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test('.svg'));
+    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
     fileLoaderRule.exclude = allowedSvgRegex;
 
     config.module.rules.push({

docs/pages/docs/index.mdx

@@ -1,5 +1,5 @@
 import { Tabs, Tab, Cards, Card } from 'nextra/components'
-import { AppIcon, PagesIcon } from '../../components/icons'
+import { AppIcon, PagesIcon } from '@components/icons'
 
 # Get Started
 

docs/pages/index.mdx

@@ -3,10 +3,11 @@ title: Home
 ---
 
 import { Cards, Card } from 'nextra/components'
-import { AppIcon, PagesIcon } from '../components/icons'
+import Logo from '@components/logo'
+import { AppIcon, PagesIcon } from '@components/icons'
 
 <p align="center">
-  <img alt="" height="100px" src="/logo-black.png" />
+  <Logo />
   <br />
   <span>Type-safe internationalization (i18n) for Next.js</span>
 </p>

docs/theme.config.jsx

@@ -1,4 +1,4 @@
-import { useConfig } from 'nextra-theme-docs'
+import { useConfig } from 'nextra-theme-docs';
 import Image from 'next/image';
 
 export default {
@@ -10,7 +10,10 @@ export default {
   ),
   head: () => {
     const { title } = useConfig();
-    const socialCard = process.env.NODE_ENV === 'development' ? 'http://localhost:3000/og.jpg' : 'https://next-international.vercel.app/og.jpg';
+    const socialCard =
+      process.env.NODE_ENV === 'development'
+        ? 'http://localhost:3000/og.jpg'
+        : 'https://next-international.vercel.app/og.jpg';
 
     return (
       <>
@@ -39,9 +42,7 @@ export default {
   footer: {
     text: <span>MIT {new Date().getFullYear()} © next-international contributors.</span>,
   },
-  darkMode: false,
   nextThemes: {
     defaultTheme: 'light',
-    forcedTheme: 'light',
   },
 };

docs/tsconfig.json

@@ -15,7 +15,8 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@components/*": ["./components/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],