Skip to content

feat: Add "Light Glass" theme #326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
imseyed wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Add "Light Glass" theme #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98e4cdf
feat: Add "Light Glass" theme
imseyed Nov 5, 2025
3521d5b
Merge branch 'main' into feature/light-glass-theme
imseyed Nov 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/context/theme.context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export enum Theme {
Light = 'light',
Dark = 'dark',
Glass = 'glass',
LightGlass = 'lightglass',
Icy = 'icy',
Zarna = 'zarna',
esteghlal = 'esteghlal',
Expand Down
112 changes: 62 additions & 50 deletions src/layouts/setting/tabs/appearance/components/theme-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,52 +60,51 @@ interface Props {

export function ThemeSelector({ fetched_themes }: Props) {
const { setTheme, theme } = useTheme()
const [themes, setThemes] = useState<ThemeItem[]>(defaultThemes)
const [selected, setSelected] = useState<ThemeItem | null>(null)

function onClick(item: ThemeItem) {
setTheme(item.id)
setSelected(item)
Analytics.event('theme_selected')
}

useEffect(() => {
const currentTheme = themes.find((t) => t.id === theme)
if (currentTheme) {
setSelected(currentTheme)
}
}, [themes])

useEffect(() => {
if (fetched_themes.length) {
const mapped: ThemeItem[] = fetched_themes.map((item) => ({
id: item.value,
name: item.name ?? 'بدون نام',
icon: <IoMdStar size={14} />,
description: item?.description || 'تم خریداری شده',
}))
setThemes([...defaultThemes, ...mapped])
}
}, [fetched_themes])

const handleMoreClick = () => {
Analytics.event('theme_market_opened')
callEvent('openMarketModal')
}

const renderThemePreview = (item: ThemeItem) => (
<Tooltip content={item.description}>
<div className="flex items-center gap-2">
<span
className="flex items-center justify-center w-5 h-5 rounded-full bg-content bg-glass text-primary"
data-theme={item.id}
>
{item.icon}
</span>
<span className="w-32 text-xs truncate">{item.description}</span>
</div>
</Tooltip>
)
const themes = [
{
id: 'glass',
name: 'شیشه‌ای تیره',
icon: <MdOutlineBlurOn size={18} />,
buttonClass: 'backdrop-blur-md text-white bg-black/40',
activeClass: 'ring-2 ring-blue-500',
},
{
id: 'lightglass',
name: 'شیشه‌ای روشن',
icon: <MdOutlineBlurOn size={18} />,
buttonClass: 'backdrop-blur-md text-gray-800 bg-white/55',
activeClass: 'ring-2 ring-blue-500',
},
{
id: 'icy',
name: 'یخی (آزمایشی)',
icon: <MdOutlineBlurOn size={18} />,
buttonClass:
'backdrop-blur-md text-gray-800 bg-white/50 border border-white/20',
activeClass: 'ring-2 ring-blue-500',
},
{
id: 'light',
name: 'روشن',
icon: <IoMdSunny size={18} />,
buttonClass: 'bg-gray-100 text-gray-800 border border-gray-200',
activeClass: 'ring-2 ring-blue-500',
},
{
id: 'dark',
name: 'تیره',
icon: <IoMdMoon size={18} />,
buttonClass: 'text-white',
activeClass: 'ring-2 ring-blue-500',
},
{
id: 'zarna',
name: 'زرنا',
icon: <IoMdStar size={18} />,
buttonClass: 'text-content',
activeClass: 'ring-2 ring-blue-500',
},
]

return (
<SectionPanel title="انتخاب تم" delay={0.2} size="sm">
Expand All @@ -118,10 +117,23 @@ export function ThemeSelector({ fetched_themes }: Props) {
isActive={selected?.id === item.id}
onClick={() => onClick(item)}
key={item.id}
className="w-full !h-20 !max-h-20 !min-h-20"
label={item.name}
description={renderThemePreview(item)}
/>
onClick={() => setTheme(item.id)}
className={`
relative flex flex-col p-2 rounded-lg transition-all cursor-pointer duration-300 shadow-md hover:shadow-lg bg-base-100 justify-center
${item.buttonClass}
${theme === item.id ? item.activeClass : 'hover:ring-2 hover:ring-blue-300'}
`}
>
<div className="flex items-center gap-2">
<span className="flex items-center justify-center w-8 h-8 rounded-full bg-black/10">
{item.icon}
</span>
<span className="text-xs font-medium">{item.name}</span>
{theme === item.id && (
<div className="absolute w-2 h-2 bg-blue-500 rounded-full top-2 right-2" />
)}
</div>
</div>
))}
<div
className="flex items-center justify-center w-full h-20 text-xs border border-content border-muted gap-0.5 text-muted hover:!text-primary cursor-pointer hover:!border-primary transition-all duration-200 rounded-xl"
Expand Down
1 change: 1 addition & 0 deletions src/styles/theme-colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import './theme/light.css';
@import './theme/dark.css';
@import './theme/glass.css';
@import './theme/lightglass.css';
@import './theme/icy.css';
@import './theme/zarna.css';
@import './theme/esteghlal.css';
72 changes: 72 additions & 0 deletions src/styles/theme/lightglass.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@plugin "daisyui/theme" {
name: "lightglass";
default: false;
--color-base-100: rgba(255, 255, 255, 0.75);
--color-base-200: rgba(255, 255, 255, 0.6);
--color-base-300: rgba(0, 0, 0, 0.05);
--color-base-content: rgba(0, 0, 0, 0.85);

--color-primary: rgba(var(--brand-primary-rgb), 0.9);
--color-primary-focus: rgba(var(--brand-primary-rgb), 1);
--color-primary-content: rgba(255, 255, 255, 1);

--color-secondary: rgba(var(--brand-secondary-rgb), 0.8);
--color-secondary-focus: rgba(var(--brand-secondary-rgb), 0.9);
--color-secondary-content: rgba(255, 255, 255, 1);

--color-accent: rgba(34, 197, 94, 0.8);
--color-accent-focus: rgba(22, 163, 74, 0.9);
--color-accent-content: rgba(255, 255, 255, 1);

--color-error: rgba(239, 68, 68, 0.8);
--color-success: rgba(34, 197, 94, 0.8);
--color-warning: rgba(245, 158, 11, 0.8);
--color-warning-content: #271b06;
--color-info: rgba(59, 130, 246, 0.8);

--glass: true;
--glass-opacity: 35%;
--glass-border-opacity: 20%;
--glass-reflex-degree: 120%;
--glass-reflex-opacity: 10%;
--glass-blur: 32px;
}

[data-theme="lightglass"] .menu,
[data-theme="lightglass"] .navbar,
[data-theme="lightglass"] .modal-box,
[data-theme="lightglass"] .drawer-side,
[data-theme="lightglass"] .collapse {
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.65);
}

[data-theme="lightglass"] .search-box {
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);
background-color: rgba(255, 255, 255, 0.7);
}

[data-theme="lightglass"] .widget-wrapper,
[data-theme="lightglass"] .bg-glass,
[data-theme="lightglass"] .tooltip {
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
background-color: rgba(255, 255, 255, 0.55);
}

[data-theme="lightglass"] #bookmarks .bg-widget:hover .flex {
color: #ffffff;
}


[data-theme="lightglass"] .modal-box {
-webkit-backdrop-filter: blur(40px) saturate(200%);
backdrop-filter: blur(40px) saturate(200%);
background-color: rgba(255, 255, 255, 0.65);
}

[data-theme="lightglass"] select {
background-color: rgba(255, 255, 255, 1);
}