Skip to content

Commit 1a33e81

Browse files
Schero94Schero94
committed
fix: use props.theme.colors.neutral0 for dark mode card backgrounds
Replace var(--colors-neutral0, white) with ${(p) => p.theme.colors.neutral0} in all styled-components. CSS variables don't resolve in Strapi's dark mode, but props.theme does via ThemeProvider.
1 parent 17c9e44 commit 1a33e81

9 files changed

Lines changed: 24 additions & 24 deletions

File tree

‎admin/src/components/LicenseGuard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ModalOverlay = styled.div`
4848
`;
4949

5050
const ModalContent = styled(Box)`
51-
background: var(--colors-neutral0, white);
51+
background: ${(p) => p.theme.colors.neutral0};
5252
border-radius: 16px;
5353
width: 100%;
5454
max-width: 580px;

‎admin/src/components/SessionInfoPanel.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const BlockedWarning = styled(Box)`
3232

3333
const SessionCard = styled(Box)`
3434
padding: 16px;
35-
background: var(--colors-neutral0, white);
35+
background: ${(p) => p.theme.colors.neutral0};
3636
border-radius: 10px;
3737
border: 1px solid rgba(128, 128, 128, 0.2);
3838
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
@@ -88,7 +88,7 @@ const ActionButton = styled.button`
8888
transition: all 0.2s ease;
8989
9090
${props => props.$variant === 'danger' && `
91-
background: var(--colors-neutral0, white);
91+
background: ${(p) => p.theme.colors.neutral0};
9292
color: var(--colors-danger600, #DC2626);
9393
border: 2px solid var(--colors-danger600, #DC2626);
9494
@@ -99,7 +99,7 @@ const ActionButton = styled.button`
9999
`}
100100
101101
${props => props.$variant === 'success' && `
102-
background: var(--colors-neutral0, white);
102+
background: ${(p) => p.theme.colors.neutral0};
103103
color: var(--colors-success600, #16A34A);
104104
border: 2px solid var(--colors-success600, #16A34A);
105105

‎admin/src/components/StyledButtons.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ export const GradientButton = styled(Button)`
3636
// ================ SECONDARY BUTTON (Gradient Outline) ================
3737
export const SecondaryButton = styled(Button)`
3838
&& {
39-
background: var(--colors-neutral0, white);
39+
background: ${(p) => p.theme.colors.neutral0};
4040
color: var(--colors-secondary600, #7C3AED);
4141
font-weight: 600;
4242
border: 2px solid transparent;
43-
background-image: linear-gradient(var(--colors-neutral0, white), var(--colors-neutral0, white)), linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
43+
background-image: linear-gradient(${(p) => p.theme.colors.neutral0}, ${(p) => p.theme.colors.neutral0}), linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
4444
background-origin: border-box;
4545
background-clip: padding-box, border-box;
4646
padding: 10px 20px;

‎admin/src/pages/Analytics.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ const HeaderContent = styled(Flex)`
122122
`;
123123

124124
const Title = styled(Typography)`
125-
color: ${'var(--colors-neutral0, white)'};
125+
color: ${(p) => p.theme.colors.neutral0};
126126
font-size: 2.25rem;
127127
font-weight: 700;
128128
letter-spacing: -0.025em;
@@ -154,7 +154,7 @@ const StatsGrid = styled.div`
154154
`;
155155

156156
const StatCard = styled(Box)`
157-
background: ${'var(--colors-neutral0, white)'};
157+
background: ${(p) => p.theme.colors.neutral0};
158158
border-radius: ${theme.borderRadius.lg};
159159
padding: 32px;
160160
position: relative;
@@ -223,7 +223,7 @@ const StatLabel = styled(Typography)`
223223
`;
224224

225225
const ChartCard = styled(Box)`
226-
background: ${'var(--colors-neutral0, white)'};
226+
background: ${(p) => p.theme.colors.neutral0};
227227
border-radius: ${theme.borderRadius.lg};
228228
padding: 36px;
229229
box-shadow: ${theme.shadows.md};

‎admin/src/pages/HomePage.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ const StatsGrid = styled.div`
200200
`;
201201

202202
const StatCard = styled(Box)`
203-
background: var(--colors-neutral0, white);
203+
background: ${(p) => p.theme.colors.neutral0};
204204
border-radius: ${theme.borderRadius.lg};
205205
padding: 28px ${theme.spacing.lg};
206206
position: relative;
@@ -301,7 +301,7 @@ const StatLabel = styled(Typography)`
301301
`;
302302

303303
const DataTable = styled(Box)`
304-
background: var(--colors-neutral0, white);
304+
background: ${(p) => p.theme.colors.neutral0};
305305
border-radius: ${theme.borderRadius.lg};
306306
overflow: hidden;
307307
box-shadow: ${theme.shadows.sm};
@@ -359,7 +359,7 @@ const OnlineIndicator = styled.div`
359359
`;
360360

361361
const FilterBar = styled(Flex)`
362-
background: var(--colors-neutral0, white);
362+
background: ${(p) => p.theme.colors.neutral0};
363363
padding: ${theme.spacing.md} ${theme.spacing.lg};
364364
border-radius: ${theme.borderRadius.lg};
365365
margin-bottom: ${theme.spacing.lg};
@@ -392,7 +392,7 @@ const StyledSearchInput = styled.input`
392392
border-radius: ${theme.borderRadius.md};
393393
font-size: 0.875rem;
394394
transition: all ${theme.transitions.fast};
395-
background: var(--colors-neutral0, white);
395+
background: ${(p) => p.theme.colors.neutral0};
396396
color: var(--colors-neutral800);
397397
398398
&:focus {
@@ -491,7 +491,7 @@ const ClickableRow = styled(Tr)`
491491

492492
// Empty state background that works in dark mode
493493
const EmptyStateBox = styled(Box)`
494-
background: var(--colors-neutral0, white);
494+
background: ${(p) => p.theme.colors.neutral0};
495495
border-radius: ${theme.borderRadius.xl};
496496
border: 2px dashed rgba(128, 128, 128, 0.3);
497497
padding: 80px 32px;

‎admin/src/pages/License.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const StickySaveBar = styled(Box)`
5858
position: sticky;
5959
top: 0;
6060
z-index: 10;
61-
background: var(--colors-neutral0, white);
61+
background: ${(p) => p.theme.colors.neutral0};
6262
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
6363
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
6464
`;

‎admin/src/pages/Settings.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const StickySaveBar = styled(Box)`
6969
position: sticky;
7070
top: 0;
7171
z-index: 10;
72-
background: var(--colors-neutral0, white);
72+
background: ${(p) => p.theme.colors.neutral0};
7373
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
7474
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
7575
`;
@@ -810,7 +810,7 @@ const SettingsPage = () => {
810810
borderRadius: theme.borderRadius.lg,
811811
marginBottom: '32px',
812812
border: `2px solid ${'rgba(2, 132, 199, 0.12)'}`,
813-
background: `linear-gradient(135deg, ${'var(--colors-neutral0, white)'} 0%, ${'rgba(2, 132, 199, 0.06)'} 100%)`
813+
background: 'rgba(2, 132, 199, 0.04)'
814814
}}
815815
>
816816
<Flex direction="column" gap={4}>
@@ -1545,7 +1545,7 @@ const SettingsPage = () => {
15451545
fontSize: '14px',
15461546
lineHeight: '1.8',
15471547
color: 'var(--colors-neutral800)',
1548-
background: 'var(--colors-neutral0, white)',
1548+
background: 'transparent',
15491549
resize: 'vertical',
15501550
minHeight: '80px',
15511551
}}
@@ -1591,7 +1591,7 @@ const SettingsPage = () => {
15911591
fontSize: '14px',
15921592
lineHeight: '1.8',
15931593
color: 'var(--colors-neutral800)',
1594-
background: 'var(--colors-neutral0, white)',
1594+
background: 'transparent',
15951595
resize: 'vertical',
15961596
minHeight: '80px',
15971597
}}

‎admin/src/pages/SettingsNew.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const StickySaveBar = styled(Box)`
6060
position: sticky;
6161
top: 0;
6262
z-index: 10;
63-
background: var(--colors-neutral0, white);
63+
background: ${(p) => p.theme.colors.neutral0};
6464
border-bottom: 1px solid ${'rgba(128, 128, 128, 0.2)'};
6565
box-shadow: ${theme.shadows.sm};
6666
`;
@@ -214,7 +214,7 @@ const getDefaultTemplates = () => ({
214214
<h2 style="color: #dc2626;">[ALERT] Suspicious Login Detected</h2>
215215
<p>A potentially suspicious login was detected for your account.</p>
216216
217-
<div style="background: var(--colors-neutral0, white); padding: 15px; border-radius: 8px; margin: 20px 0;">
217+
<div style="background: ${(p) => p.theme.colors.neutral0}; padding: 15px; border-radius: 8px; margin: 20px 0;">
218218
<h3 style="margin-top: 0;">Account Information:</h3>
219219
<ul>
220220
<li><strong>Email:</strong> {{user.email}}</li>
@@ -269,7 +269,7 @@ Security: VPN={{reason.isVpn}}, Proxy={{reason.isProxy}}, Threat={{reason.isThre
269269
<h2 style="color: #0284c7;">[LOCATION] Login from New Location</h2>
270270
<p>Your account was accessed from a new location.</p>
271271
272-
<div style="background: var(--colors-neutral0, white); padding: 15px; border-radius: 8px; margin: 20px 0;">
272+
<div style="background: ${(p) => p.theme.colors.neutral0}; padding: 15px; border-radius: 8px; margin: 20px 0;">
273273
<h3 style="margin-top: 0;">Account:</h3>
274274
<p><strong>{{user.email}}</strong></p>
275275
@@ -312,7 +312,7 @@ If this was you, no action is needed.`,
312312
<h2 style="color: #d97706;">[WARNING] VPN/Proxy Detected</h2>
313313
<p>A login from a VPN or proxy service was detected on your account.</p>
314314
315-
<div style="background: var(--colors-neutral0, white); padding: 15px; border-radius: 8px; margin: 20px 0;">
315+
<div style="background: ${(p) => p.theme.colors.neutral0}; padding: 15px; border-radius: 8px; margin: 20px 0;">
316316
<h3 style="margin-top: 0;">Account:</h3>
317317
<p><strong>{{user.email}}</strong></p>
318318

‎admin/src/pages/UpgradePage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const TierWrapper = styled(Box)`
6666
`;
6767

6868
const TierCard = styled(Box)`
69-
background: var(--colors-neutral0, white);
69+
background: ${(p) => p.theme.colors.neutral0};
7070
border-radius: 16px;
7171
padding: 32px;
7272
border: 2px solid ${props => props.$featured ? 'var(--colors-primary600, #0EA5E9)' : 'rgba(128, 128, 128, 0.2)'};

0 commit comments

Comments
 (0)