Skip to content

Commit 7ee659c

Browse files
committed
fix(themes): update dark palette support for other enabled values
1 parent a072393 commit 7ee659c

File tree

1 file changed

+26
-12
lines changed

1 file changed

+26
-12
lines changed

core/src/utils/theme.ts

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -265,26 +265,40 @@ export const generateGlobalThemeCSS = (theme: any): string => {
265265
// Generate CSS variables for the light color palette
266266
const lightTokensCSS = generateCSSVars(palette.light);
267267

268+
// Generate CSS variables for the dark color palette
269+
const darkTokensCSS = generateCSSVars(palette.dark);
270+
271+
// Include CSS variables for the dark color palette instead of
272+
// the light palette if dark palette enabled is 'always'
273+
const paletteTokensCSS = palette.dark.enabled === 'always' ? darkTokensCSS : lightTokensCSS;
274+
268275
let css = `
269276
${CSS_ROOT_SELECTOR} {
270277
${defaultTokensCSS}
271-
${lightTokensCSS}
278+
${paletteTokensCSS}
272279
}
273280
`;
274281

275-
// Generate CSS variables for the dark color palette if it
276-
// is enabled for system preference
282+
// Include CSS variables for the dark color palette inside of a
283+
// class if dark palette enabled is 'class'
284+
if (palette.dark.enabled === 'class') {
285+
css += `
286+
.ion-palette-dark {
287+
${darkTokensCSS}
288+
}
289+
`;
290+
}
291+
292+
// Include CSS variables for the dark color palette inside of the
293+
// dark color scheme media query if dark palette enabled is 'system'
277294
if (palette.dark.enabled === 'system') {
278-
const darkTokensCSS = generateCSSVars(palette.dark);
279-
if (darkTokensCSS.length > 0) {
280-
css += `
281-
@media (prefers-color-scheme: dark) {
282-
${CSS_ROOT_SELECTOR} {
283-
${darkTokensCSS}
284-
}
295+
css += `
296+
@media (prefers-color-scheme: dark) {
297+
${CSS_ROOT_SELECTOR} {
298+
${darkTokensCSS}
285299
}
286-
`;
287-
}
300+
}
301+
`;
288302
}
289303

290304
// Add color classes

0 commit comments

Comments
 (0)