Add business dashboard dark mode from Super Admin theme setting.

Login and in-app surfaces follow tenant themeMode, matching customer dark tokens, with themed switches and tighter card/table chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-31 13:40:40 +03:30
co-authored by Cursor
parent 65012717d0
commit e9400c2281
83 changed files with 586 additions and 193 deletions
@@ -158,7 +158,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -261,7 +261,7 @@
font-weight: 500;
line-height: 1.2;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 50px;
transition: border-color 0.15s, color 0.15s, background 0.15s;
@@ -318,7 +318,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
cursor: pointer;
@@ -363,7 +363,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -128,7 +128,7 @@
font-size: var(--field-font-size);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
}
.selectField {
@@ -72,7 +72,7 @@
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
}
.galleryThumbs {
@@ -86,7 +86,7 @@
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
}
.galleryThumb img {
@@ -76,7 +76,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
@@ -76,7 +76,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
@@ -433,7 +433,7 @@
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.4);
background: var(--surface);
}
.detailItemTop {
+14 -7
View File
@@ -15,12 +15,12 @@
width: 100%;
max-width: 420px;
padding: 24px 32px 28px;
background: rgba(255, 255, 255, 0.75);
background: var(--glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(31, 38, 135, 0.12);
box-shadow: var(--glass-shadow);
}
.brand {
@@ -176,8 +176,8 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.35);
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@@ -325,13 +325,20 @@ button.submitBtn {
.error {
font-size: 13px;
color: #b91c1c;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
line-height: 1.55;
color: #fecaca;
background: rgba(239, 68, 68, 0.16);
border: 1px solid rgba(248, 113, 113, 0.45);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
:global(html:not([data-theme='dark'])) .error {
color: #b91c1c;
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.25);
}
.info {
font-size: 13px;
color: var(--text-secondary);
@@ -84,7 +84,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
@@ -163,7 +163,7 @@
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--radius);
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
@@ -23,7 +23,7 @@
width: 100%;
max-width: 320px;
aspect-ratio: 1 / 1;
background: #ffffff;
background: var(--card-media-bg);
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
@@ -70,7 +70,7 @@
.thumb {
width: 52px;
height: 52px;
background: #fff;
background: var(--card-media-bg);
border: 2px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
overflow: hidden;
@@ -70,7 +70,7 @@
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -6,7 +6,7 @@
.gatewayCard,
.comingSoonCard {
background: rgba(255, 255, 255, 0.45);
background: var(--glass-bg);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--radius);
padding: 20px;
@@ -99,7 +99,7 @@
line-height: 1.4;
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -85,7 +85,7 @@
padding: 0 36px;
border-radius: 50px;
border: 1px solid rgba(var(--primary-rgb) / 0.3);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 8px 28px rgba(31, 38, 135, 0.12);
@@ -49,7 +49,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -56,7 +56,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
@@ -133,7 +133,7 @@
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
@@ -17,7 +17,7 @@
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;
@@ -60,7 +60,7 @@
font-family: var(--font-ui);
font-weight: 600;
color: var(--primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(var(--primary-rgb) / 0.35);
border-radius: var(--radius-sm);
cursor: pointer;
@@ -71,7 +71,7 @@
appearance: none;
-webkit-appearance: none;
padding-right: var(--select-padding-end);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;