snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-26 11:06:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 添加新的颜色样式，更新全局样式和组件以支持更多用户颜色选项

Browse Source
This commit is contained in:
远野千束
2025-09-25 19:18:09 +08:00
parent e6e7ee64a2
commit 751ce7878b
11 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/app/globals.css
View File

@ -1,6 +1,13 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
@import "./styles/blue.css";
@import "./styles/green.css";
@import "./styles/orange.css";
@import "./styles/red.css";
@import "./styles/rose.css";
@import "./styles/violet.css"; @import "./styles/violet.css";
@import "./styles/yellow.css";
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));

5
web/src/app/layout.tsx
View File

@ -10,6 +10,8 @@ import { Toaster } from "@/components/ui/sonner"
import { getLoginUser } from "@/api/user"; import { getLoginUser } from "@/api/user";
import { NuqsAdapter } from 'nuqs/adapters/next/app' import { NuqsAdapter } from 'nuqs/adapters/next/app'
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
@ -30,12 +32,13 @@ export default async function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const token = (await cookies()).get("token")?.value || ""; const token = (await cookies()).get("token")?.value || "";
const refreshToken = (await cookies()).get("refresh_token")?.value || ""; const refreshToken = (await cookies()).get("refresh_token")?.value || "";
const user = await getLoginUser({ token, refreshToken }).then(res => res.data).catch(() => null); const user = await getLoginUser({ token, refreshToken }).then(res => res.data).catch(() => null);
return ( return (
<html lang={await getFirstLocale() || "en"} className="h-full"> <html lang={await getFirstLocale() || "en"} className="h-full" user-color="blue">
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >

4
web/src/app/styles/blue.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="blue"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.623 0.214 259.815); --sidebar-ring: oklch(0.623 0.214 259.815);
} }
.dark { .dark[user-color="blue"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

4
web/src/app/styles/green.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="green"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.723 0.219 149.579); --sidebar-ring: oklch(0.723 0.219 149.579);
} }
.dark { .dark[user-color="green"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

4
web/src/app/styles/orange.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="orange"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.705 0.213 47.604); --sidebar-ring: oklch(0.705 0.213 47.604);
} }
.dark { .dark[user-color="orange"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

4
web/src/app/styles/red.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="red"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.637 0.237 25.331); --sidebar-ring: oklch(0.637 0.237 25.331);
} }
.dark { .dark[user-color="red"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

4
web/src/app/styles/rose.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="rose"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.645 0.246 16.439); --sidebar-ring: oklch(0.645 0.246 16.439);
} }
.dark { .dark[user-color="rose"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

4
web/src/app/styles/violet.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="violet"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.606 0.25 292.717); --sidebar-ring: oklch(0.606 0.25 292.717);
} }
.dark { .dark[user-color="violet"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

4
web/src/app/styles/yellow.css
View File

@ -1,4 +1,4 @@
:root { :root[user-color="violet"] {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.795 0.184 86.047); --sidebar-ring: oklch(0.795 0.184 86.047);
} }
.dark { .dark[user-color="violet"] {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885); --card: oklch(0.21 0.006 285.885);

11
web/src/components/layout/nav/avatar-with-dropdown-menu.tsx
View File

@ -37,8 +37,10 @@ export function AvatarWithDropdownMenu() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-auto" align="start"> <DropdownMenuContent className="w-auto" align="start">
{user && <DropdownMenuLabel> {user &&
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm"> <>
<DropdownMenuLabel>
<div className="flex items-center gap-2 p-0 text-left text-sm">
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{formatDisplayName(user)}</span> <span className="truncate font-medium">{formatDisplayName(user)}</span>
<span className="text-muted-foreground truncate text-xs"> <span className="text-muted-foreground truncate text-xs">
@ -46,11 +48,12 @@ export function AvatarWithDropdownMenu() {
</span> </span>
</div> </div>
</div> </div>
</DropdownMenuLabel>} </DropdownMenuLabel>
<DropdownMenuSeparator /></>}
{user && {user &&
<> <>
<DropdownMenuGroup> <DropdownMenuGroup className="p-0">
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link href={`/u/${user?.username}`}>Profile</Link> <Link href={`/u/${user?.username}`}>Profile</Link>
</DropdownMenuItem> </DropdownMenuItem>

7
web/src/types/css.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
declare module "*.css";
declare module "*.scss";
declare module "*.sass";
declare module "*.less";
declare module "*.styl";
declare module "*.module.css";
declare module "*.module.scss";