Skip to content

Commit f67e199

Browse files
adenlalladenlall
committed
🐞 fix user theme
1 parent fd210f4 commit f67e199

File tree

11 files changed

+240
-32
lines changed

11 files changed

+240
-32
lines changed

‎app/layout.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { AniListProvider } from '@/components/providers/AniListProvider';
22
import './globals.css'
3-
import NavBar from '@/components/main/NavBar';
4-
export default function RootLayout({
3+
import { currentTheme } from '@/utils/themes';
4+
import { cookies } from 'next/headers';
5+
export default async function RootLayout({
56
children,
67
}: {
78
children: React.ReactNode;
8-
}) {
9+
}) {
10+
const theme = (await cookies()).get(currentTheme)?.value
911
return (
10-
<html lang="en">
12+
<html data-theme={theme} lang="en">
1113
<body>
1214
<AniListProvider>{children}</AniListProvider>
1315
</body>

‎app/settings/page.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import List from "@/components/@HooKit/AnimeListWrapper";
2+
import ThemesList from "@/components/@HooKit/Themes/ThemesList";
3+
import ColoredText from "@/components/ColoredText";
14
import AuthBadgs, { AUTH_BADGE_FRAGMENT } from "@/components/main/profile/AuthBadgs"
25
import { AuthBadgeFragment, SettingsQuery } from "@/lib/types/anilist";
36
import { Anilist } from "@/utils/anilist";
@@ -15,6 +18,16 @@ export default async () => {
1518
);
1619

1720
return <div className="container mx-auto md:px-4 py-8">
18-
<AuthBadgs generate={false} {...queryRes.Viewer as AuthBadgeFragment} />
21+
<AuthBadgs generate={false} {...queryRes.Viewer as AuthBadgeFragment} />
22+
<List>
23+
<List.Header>
24+
<ColoredText className={"pt-4 pl-4"}>
25+
<h2 className="text-4xl font-extrabold text-center">Change App Theme!</h2>
26+
</ColoredText>
27+
<List.List className="[display:flex!important] flex-wrap gap-2">
28+
<ThemesList style={{ width: '10rem' }} />
29+
</List.List>
30+
</List.Header>
31+
</List>
1932
</div>
2033
}

‎bun.lockb

387 Bytes
Binary file not shown.

‎components/@HooKit/AnimeListWrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface SubComponentProps {
1313

1414
const List = ({ children, className }: ComponentProps) => {
1515
return (
16-
<div className={clsx("my-4 p-2 w-auto bg-base-200 rounded-lg", className)}>
16+
<div className={clsx("my-4 p-2 w-auto bg-base-200 rounded-box", className)}>
1717
{children}
1818
</div>
1919
);

‎components/@HooKit/Themes/ThemesList.tsx

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
"use client"
22

33
import { currentTheme, themes } from "@/utils/themes";
4-
import { useEffect } from "react";
4+
import { CSSProperties, useEffect } from "react";
5+
import { Cookies } from "typescript-cookie";
56

6-
export default function ThemesList({ width }:{ width?:string|number|null} ) {
7+
export default function ThemesList({ style }: { style?: CSSProperties | undefined }) {
78

8-
useEffect(()=>{
9-
document.querySelector('html')?.setAttribute('data-theme', localStorage[currentTheme]??currentTheme);
10-
},[])
11-
const setheme = (item:string) => {
9+
useEffect(() => {
10+
document.querySelector('html')?.setAttribute('data-theme', localStorage[currentTheme] ?? currentTheme);
11+
}, []);
12+
const setheme = (item: string) => {
13+
Cookies.set(currentTheme, item)
1214
localStorage[currentTheme] = item;
1315
document.querySelector('html')?.setAttribute('data-theme', item);
1416
}
@@ -17,24 +19,48 @@ export default function ThemesList({ width }:{ width?:string|number|null} ) {
1719
<>
1820
{
1921
themes.map((obj)=>obj.name).map((theme) => (
20-
<button key={crypto.randomUUID()} onClick={() => { setheme(theme) }} className={"outline-base-content overflow-hidden rounded-box text-left " + (width ?? "w-full")} data-theme={theme}>
21-
<div data-theme={theme} className="bg-base-100 text-base-content w-full cursor-pointer font-sans rounded-box">
22-
<div className="grid grid-cols-5 grid-rows-3">
23-
<div className="col-span-5 row-span-3 row-start-1 flex items-center md:gap-2 gap-1 md:px-4 px-1 md:py-2 py-1">
24-
<div className="md:flex hidden flex-grow text-sm">{theme}</div>
25-
<div className="flex h-full flex-shrink-0 flex-wrap md:gap-1">
26-
<div className="bg-primary md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none rounded-tr-box rounded-br-box"></div>
27-
<div className="bg-secondary md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none"></div>
28-
<div className="bg-accent md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none"></div>
29-
<div className="bg-neutral md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none rounded-tl-box rounded-bl-box"></div>
30-
</div>
31-
</div>
32-
</div>
33-
</div>
22+
<button
23+
key={crypto.randomUUID()}
24+
onClick={() => { setheme(theme) }}
25+
className={"outline-base-content overflow-hidden rounded-lg text-left w-full"}
26+
style={style}
27+
data-theme={theme}
28+
>
29+
<NewThemeElement theme={theme} />
3430
</button>
3531
))
3632
}
3733
</>
3834
)
3935

36+
}
37+
38+
const NewThemeElement = ({ theme }: { theme: string }) => {
39+
return <div data-theme={theme} className="bg-base-100 text-base-content w-full cursor-pointer font-sans">
40+
<div className="flex-center p-3 px-3">
41+
<div className="md:flex hidden flex-grow text-sm">{theme}</div>
42+
<div className="grid grid-cols-2 grid-rows-2 gap-2 h-full">
43+
<div className="bg-primary w-3 h-3 rounded-lg"></div>
44+
<div className="bg-secondary w-3 h-3 rounded-lg"></div>
45+
<div className="bg-accent w-3 h-3 rounded-lg"></div>
46+
<div className="bg-neutral-content w-3 h-3 rounded-lg"></div>
47+
</div>
48+
</div>
49+
</div>
50+
}
51+
52+
const ThemeElement = ({ theme }: { theme: string }) => {
53+
return <div data-theme={theme} className="bg-base-100 text-base-content w-full cursor-pointer font-sans rounded-box">
54+
<div className="grid grid-cols-5 grid-rows-3">
55+
<div className="col-span-5 row-span-3 row-start-1 flex items-center md:gap-2 gap-1 md:px-4 px-1 md:py-2 py-1">
56+
<div className="md:flex hidden flex-grow text-sm">{theme}</div>
57+
<div className="flex h-full flex-shrink-0 flex-wrap md:gap-1">
58+
<div className="bg-primary md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none rounded-tr-box rounded-br-box"></div>
59+
<div className="bg-secondary md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none"></div>
60+
<div className="bg-accent md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none"></div>
61+
<div className="bg-neutral md:w-2 w-4 h-4 md:h-5 md:rounded rounded-none rounded-tl-box rounded-bl-box"></div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
4066
}

‎components/ColoredText.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import clsx from "clsx"
12
import { CSSProperties, ReactNode } from "react"
23

3-
export default ({ text, children, className, containerStyle }: { text?: string | undefined, children?: ReactNode, className?: string | null, containerStyle?: CSSProperties | undefined }) => {
4+
export default ({ text, children, className, containerStyle, parentClassName }: { parentClassName?: string, text?: string | undefined, children?: ReactNode, className?: string | null, containerStyle?: CSSProperties | undefined }) => {
45
return (
56

6-
<span className="inline-grid">
7+
<span className={clsx("inline-grid", parentClassName)}>
78
<span
89
className="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-xl [transform:translate3d(0,0,0)] [-webkit-text-fill-color:transparent] before:content-[attr(data-text)] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
910
aria-hidden="true"

‎components/main/profile/AuthBadgs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export const AUTH_BADGE_FRAGMENT = gql`
2121

2222
export default ({ generate = true, ...viewer }: AuthBadgeFragment & { generate?: boolean }) => {
2323
return <div className="flex justify-between items-center md:flex-row flex-col md:mb-0 mb-6">
24-
<div className="flex items-center space-x-4 mb-8">
25-
<div className="avatar group">
24+
<div className="flex items-center space-x-4 mb-8 group">
25+
<div className="avatar">
2626
<ProfileSettingsRouter />
2727
<div className="w-24 rounded-full">
2828
<img

‎components/main/profile/PickupAnimes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export default () => {
2525
</ColoredText>
2626
</div>
2727
) : (
28-
<div className={clsx("bg-base-200 rounded-lg p-4", isLoading ? "blur-sm" : null)}>
29-
<ColoredText className={"mt-2 ml-2 text-2xl font-extrabold"}>Selected Animes :</ColoredText>
28+
<div className={clsx("bg-base-200 rounded-box p-4", isLoading ? "blur-sm" : null)}>
29+
<ColoredText className={"mt-2 ml-5 text-3xl font-extrabold"}>Selected Animes :</ColoredText>
3030
<List.List>
3131
{items.map(item => (
3232
<AnimeCard key={item.id} removeAction={true} id={item.id || 0} {...item.data} />

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"next": "15.1.6",
2020
"react": "^19.0.0",
2121
"react-dom": "^19.0.0",
22+
"typescript-cookie": "^1.0.6",
2223
"zustand": "^5.0.3"
2324
},
2425
"devDependencies": {

‎tailwind.config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Config } from "tailwindcss";
2+
import { themes } from "./utils/themes";
23

34
export default {
45
content: [
@@ -17,4 +18,7 @@ export default {
1718
plugins: [
1819
require('daisyui'),
1920
],
21+
daisyui: {
22+
themes: themes.map((obj) => obj.theme)
23+
}
2024
} satisfies Config;

0 commit comments

Comments
 (0)