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 "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/yellow.css";
@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 { NuqsAdapter } from 'nuqs/adapters/next/app'
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
@ -30,12 +32,13 @@ export default async function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
const token = (await cookies()).get("token")?.value || "";
const refreshToken = (await cookies()).get("refresh_token")?.value || "";
const user = await getLoginUser({ token, refreshToken }).then(res => res.data).catch(() => null);
return (
<html lang={await getFirstLocale() || "en"} className="h-full">
<html lang={await getFirstLocale() || "en"} className="h-full" user-color="blue">
<body
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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.623 0.214 259.815);
}
.dark {
.dark[user-color="blue"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.723 0.219 149.579);
}
.dark {
.dark[user-color="green"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.705 0.213 47.604);
}
.dark {
.dark[user-color="orange"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.637 0.237 25.331);
}
.dark {
.dark[user-color="red"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.645 0.246 16.439);
}
.dark {
.dark[user-color="rose"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.606 0.25 292.717);
}
.dark {
.dark[user-color="violet"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--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;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
@ -33,7 +33,7 @@
--sidebar-ring: oklch(0.795 0.184 86.047);
}
.dark {
.dark[user-color="violet"] {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);

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

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