diff --git a/packages/color-modes/src/custom-properties.ts b/packages/color-modes/src/custom-properties.ts index 574aed316..0692e0bdf 100644 --- a/packages/color-modes/src/custom-properties.ts +++ b/packages/color-modes/src/custom-properties.ts @@ -88,13 +88,20 @@ export const __createColorStyles = (theme: Theme = {}) => { const styles = __createColorProperties(colors, modes) if (printColorModeName) { - const mode = - printColorModeName === 'initial' || - printColorModeName === initialColorModeName - ? colors - : modes[printColorModeName] - styles['@media print'] = __objectToVars('colors', mode) + let printMode = modes[printColorModeName] + if (!printMode && printColorModeName === initialColorModeName) + printMode = colors + + if (printMode) { + styles['@media print'] = __objectToVars('colors', printMode) + } else { + console.error( + `Theme UI \`printColorModeName\` was not found in colors scale`, + { colors, printColorModeName } + ) + } } + const colorToVarValue = (color: string) => toVarValue(`colors-${color}`) return css({ diff --git a/packages/color-modes/test/custom-properties.tsx b/packages/color-modes/test/custom-properties.tsx index e52eea7e4..9341b6dfc 100644 --- a/packages/color-modes/test/custom-properties.tsx +++ b/packages/color-modes/test/custom-properties.tsx @@ -185,6 +185,7 @@ describe('__createColorStyles', () => { }, }, }) + expect(styles).toEqual({ color: 'var(--theme-ui-colors-text)', backgroundColor: 'var(--theme-ui-colors-background)', @@ -201,6 +202,31 @@ describe('__createColorStyles', () => { }) }) + test('creates styles for print color mode if its name is the same as initialColorModeName', () => { + const styles = __createColorStyles({ + config: { + initialColorModeName: 'light', + useColorSchemeMediaQuery: true, + printColorModeName: 'light', + }, + colors: { + text: '#fff', + background: '#000', + modes: { + light: { + text: '#000', + background: '#fff', + }, + }, + }, + }) + + expect(styles['@media print']).toEqual({ + '--theme-ui-colors-text': '#000', + '--theme-ui-colors-background': '#fff', + }) + }) + test('creates styles for initial print color mode', () => { const styles = __createColorStyles({ config: {