From de40f560d85216f61bb777917946c3bcbc93aeb0 Mon Sep 17 00:00:00 2001 From: SevicheCC <91365763+Sevichecc@users.noreply.github.com> Date: Thu, 8 Jun 2023 02:51:25 +0800 Subject: [PATCH] feat: dark mode --- app/layout.tsx | 11 +++++++++-- components/Brand.tsx | 8 ++++---- components/CreatAppForm.tsx | 10 ++++++---- components/FormContainer.tsx | 2 +- components/scopes/ScopeSection.tsx | 2 +- components/ui/theme-provider.tsx | 9 +++++++++ next.config.js | 3 ++- package.json | 1 + pnpm-lock.yaml | 15 +++++++++++++++ 9 files changed, 48 insertions(+), 13 deletions(-) create mode 100644 components/ui/theme-provider.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 5e92573..b37091b 100644 --- a/app/layout.tsx +++ b/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({ @@ -18,11 +23,13 @@ export default function RootLayout({ - {children} + + {children} + ); diff --git a/components/Brand.tsx b/components/Brand.tsx index 203e693..6a1e351 100644 --- a/components/Brand.tsx +++ b/components/Brand.tsx @@ -12,7 +12,7 @@ const headlines = [ ]; const Brand = () => { return ( -
+

M-OAuth

@@ -68,7 +68,7 @@ const Brand = () => { width="15" height="15" alt="Github" - className="mr-2" + className="mr-2 dark:invert" /> Github @@ -80,7 +80,7 @@ const Brand = () => { width="15" height="15" alt="Codeberg" - className="mr-2" + className="mr-2 dark:invert" /> Codeberg @@ -89,7 +89,7 @@ const Brand = () => {