SevicheCC/m-oauth
1
0
Fork 0
mirror of https://github.com/Sevichecc/m-oauth.git synced 2025-04-30 06:59:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: dark mode

Browse source
This commit is contained in:
SevicheCC 2023-06-08 02:51:25 +08:00
parent 9ef0d899e2
commit de40f560d8
Signed by: SevicheCC
GPG key ID: C577000000000000
9 changed files with 48 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/layout.tsx
View file

@ -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({
<head />
<body
className={cn(
"grid min-h-screen place-content-center place-items-center bg-background px-2 font-sans antialiased md:px-5 md:pb-10 md:pt-5",
"grid min-h-screen place-content-center place-items-center bg-background px-2 font-sans antialiased md:px-5 md:pb-10 md:pt-5",
fontSans.variable
)}
>
{children}
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
);

8
components/Brand.tsx
View file

@ -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>
))}

10
components/CreatAppForm.tsx
View file

@ -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 />

2
components/scopes/ScopeSection.tsx
View file

@ -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

9
components/ui/theme-provider.tsx Normal file
View file

@ -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>
}

3
next.config.js
View file

@ -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;

1
package.json
View file

@ -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",

15
pnpm-lock.yaml
View file

@ -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'}