feat: dark mode

app/layout.tsx

@@ -1,11 +1,16 @@
 import "@/styles/globals.css";
 import { fontSans } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
+import { ThemeProvider } from "@/components/ui/theme-provider";
 
 export const metadata = {
   title: "M-OAuth",
   description:
     "Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
 };
 
 export default function RootLayout({
@@ -22,7 +27,9 @@ export default function RootLayout({
           fontSans.variable
         )}
       >
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           {children}
+        </ThemeProvider>
       </body>
     </html>
   );

components/Brand.tsx

@@ -12,7 +12,7 @@ const headlines = [
 ];
 const Brand = () => {
   return (
-    <section className="rounded-lg px-5 py-4 bg-slate-50">
+    <section className="rounded-lg px-5 py-4 bg-slate-50 dark:bg-muted">
       <h1 className="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
         M-OAuth
       </h1>
@@ -68,7 +68,7 @@ const Brand = () => {
                 width="15"
                 height="15"
                 alt="Github"
-                className="mr-2"
+                className="mr-2 dark:invert"
               />
               Github
             </Button>
@@ -80,7 +80,7 @@ const Brand = () => {
                 width="15"
                 height="15"
                 alt="Codeberg"
-                className="mr-2"
+                className="mr-2 dark:invert"
               />
               Codeberg
             </Button>
@@ -89,7 +89,7 @@ const Brand = () => {
           <ul className="flex flex-col gap-2 mb-2 justify-self-end">
             {headlines.map((headline) => (
               <li className="flex items-center gap-2" key={headline}>
-                <BadgeCheck className="-mt-[2px] h-5 w-5 stroke-green-600" />
+                <BadgeCheck className="-mt-[2px] h-5 w-5 stroke-green-600 dark:stroke-green-500" />
                 {headline}
               </li>
             ))}

components/CreatAppForm.tsx

@@ -132,7 +132,8 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                         className="mr-2"
                       />
                       Pleroma
-                    </span></SelectItem>
+                    </span>
+                  </SelectItem>
                   <SelectItem value="akkoma">
                     <span className="flex">
                       <Image
@@ -143,9 +144,9 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                         className="mr-2"
                       />
                       Akkoma
-                    </span></SelectItem>
+                    </span>
+                  </SelectItem>
                   <SelectItem value="misskey">
-                    
                     <span className="flex">
                       <Image
                         src="https://cdn.simpleicons.org/misskey"
@@ -155,7 +156,8 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                         className="mr-2"
                       />
                       Misskey
-                    </span></SelectItem>
+                    </span>
+                  </SelectItem>
                 </SelectContent>
               </Select>
               <FormMessage />

components/scopes/ScopeSection.tsx

@@ -21,7 +21,7 @@ const ScopeSection: React.FC<ScopeSectionProps> = ({ info, field }) => {
   const { method, description, scopes, label } = info;
   const isNested = scopes && scopes.length !== 0;
   return (
-    <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3">
+    <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3 dark:bg-muted">
       <div className="flex justify-between">
         <div className="items-top flex space-x-2 ">
           <Checkbox

components/ui/theme-provider.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
   experimental: {
     appDir: true,
   },
@@ -8,4 +9,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -28,6 +28,7 @@
     "eslint-config-next": "13.4.4",
     "lucide-react": "^0.240.0",
     "next": "13.4.4",
+    "next-themes": "^0.2.1",
     "postcss": "^8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pnpm-lock.yaml

@@ -52,6 +52,9 @@ dependencies:
   next:
     specifier: 13.4.4
     version: 13.4.4(react-dom@18.2.0)(react@18.2.0)
+  next-themes:
+    specifier: ^0.2.1
+    version: 0.2.1(next@13.4.4)(react-dom@18.2.0)(react@18.2.0)
   postcss:
     specifier: ^8.4.24
     version: 8.4.24
@@ -2637,6 +2640,18 @@ packages:
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  /next-themes@0.2.1(next@13.4.4)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+    peerDependencies:
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      next: 13.4.4(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /next@13.4.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==}
     engines: {node: '>=16.8.0'}