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 "@/styles/globals.css";
import { fontSans } from "@/lib/fonts"; import { fontSans } from "@/lib/fonts";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/ui/theme-provider";
export const metadata = { export const metadata = {
title: "M-OAuth", title: "M-OAuth",
description: description:
"Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.", "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({ export default function RootLayout({
@ -18,11 +23,13 @@ export default function RootLayout({
<head /> <head />
<body <body
className={cn( 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 fontSans.variable
)} )}
> >
{children} <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body> </body>
</html> </html>
); );

8
components/Brand.tsx
View file

@ -12,7 +12,7 @@ const headlines = [
]; ];
const Brand = () => { const Brand = () => {
return ( 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"> <h1 className="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
M-OAuth M-OAuth
</h1> </h1>
@ -68,7 +68,7 @@ const Brand = () => {
width="15" width="15"
height="15" height="15"
alt="Github" alt="Github"
className="mr-2" className="mr-2 dark:invert"
/> />
Github Github
</Button> </Button>
@ -80,7 +80,7 @@ const Brand = () => {
width="15" width="15"
height="15" height="15"
alt="Codeberg" alt="Codeberg"
className="mr-2" className="mr-2 dark:invert"
/> />
Codeberg Codeberg
</Button> </Button>
@ -89,7 +89,7 @@ const Brand = () => {
<ul className="flex flex-col gap-2 mb-2 justify-self-end"> <ul className="flex flex-col gap-2 mb-2 justify-self-end">
{headlines.map((headline) => ( {headlines.map((headline) => (
<li className="flex items-center gap-2" key={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} {headline}
</li> </li>
))} ))}

10
components/CreatAppForm.tsx
View file

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

2
components/FormContainer.tsx
View file

@ -24,7 +24,7 @@ const FormContainer = () => {
}); });
return ( return (
<> <>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Create an Application</CardTitle> <CardTitle>Create an Application</CardTitle>

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 { method, description, scopes, label } = info;
const isNested = scopes && scopes.length !== 0; const isNested = scopes && scopes.length !== 0;
return ( 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="flex justify-between">
<div className="items-top flex space-x-2 "> <div className="items-top flex space-x-2 ">
<Checkbox <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} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
reactStrictMode: true,
experimental: { experimental: {
appDir: true, 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", "eslint-config-next": "13.4.4",
"lucide-react": "^0.240.0", "lucide-react": "^0.240.0",
"next": "13.4.4", "next": "13.4.4",
"next-themes": "^0.2.1",
"postcss": "^8.4.24", "postcss": "^8.4.24",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",

15
pnpm-lock.yaml
View file

@ -52,6 +52,9 @@ dependencies:
next: next:
specifier: 13.4.4 specifier: 13.4.4
version: 13.4.4(react-dom@18.2.0)(react@18.2.0) 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: postcss:
specifier: ^8.4.24 specifier: ^8.4.24
version: 8.4.24 version: 8.4.24
@ -2637,6 +2640,18 @@ packages:
/natural-compare@1.4.0: /natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} 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): /next@13.4.4(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==} resolution: {integrity: sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==}
engines: {node: '>=16.8.0'} engines: {node: '>=16.8.0'}