From 98e4cdf781980ffd2b5da4e4616e8d921acb2032 Mon Sep 17 00:00:00 2001 From: Ali khalili Date: Wed, 5 Nov 2025 17:18:26 +0330 Subject: [PATCH] feat: Add "Light Glass" theme --- src/context/theme.context.tsx | 1 + .../appearance/components/theme-selector.tsx | 17 +++-- src/styles/theme-colors.css | 1 + src/styles/theme/lightglass.css | 72 +++++++++++++++++++ 4 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 src/styles/theme/lightglass.css diff --git a/src/context/theme.context.tsx b/src/context/theme.context.tsx index baf7d88a..940f2d3e 100644 --- a/src/context/theme.context.tsx +++ b/src/context/theme.context.tsx @@ -15,6 +15,7 @@ export enum Theme { Light = 'light', Dark = 'dark', Glass = 'glass', + LightGlass = 'lightglass', Icy = 'icy', Zarna = 'zarna', } diff --git a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx index dcc634f2..2d42df17 100644 --- a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx +++ b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx @@ -8,11 +8,18 @@ export function ThemeSelector() { const themes = [ { id: 'glass', - name: 'شیشه‌ای', + name: 'شیشه‌ای تیره', icon: , buttonClass: 'backdrop-blur-md text-white bg-black/40', activeClass: 'ring-2 ring-blue-500', }, + { + id: 'lightglass', + name: 'شیشه‌ای روشن', + icon: , + buttonClass: 'backdrop-blur-md text-gray-800 bg-white/55', + activeClass: 'ring-2 ring-blue-500', + }, { id: 'icy', name: 'یخی (آزمایشی)', @@ -56,10 +63,10 @@ export function ThemeSelector() { key={item.id} 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'} - `} + 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'} + `} >
diff --git a/src/styles/theme-colors.css b/src/styles/theme-colors.css index 6fe860df..30d18c45 100644 --- a/src/styles/theme-colors.css +++ b/src/styles/theme-colors.css @@ -2,5 +2,6 @@ @import './theme/light.css'; @import './theme/dark.css'; @import './theme/glass.css'; +@import './theme/lightglass.css'; @import './theme/icy.css'; @import './theme/zarna.css'; \ No newline at end of file diff --git a/src/styles/theme/lightglass.css b/src/styles/theme/lightglass.css new file mode 100644 index 00000000..eae5af53 --- /dev/null +++ b/src/styles/theme/lightglass.css @@ -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); +}