fix(color-modes): properly use print mode even if its name is `initialColorModeName` #2090

hasparus · 2022-01-21T18:24:37Z

Fixes #1964.

📦 Published PR as canary version: 0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/color@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/components@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/core@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/css@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/custom-properties@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/editor@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install gatsby-plugin-theme-ui@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install gatsby-theme-style-guide@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install gatsby-theme-ui-layout@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/match-media@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/mdx@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/parse-props@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-base@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-bootstrap@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-bulma@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-dark@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-deep@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-funk@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-future@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-polaris@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-roboto@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-sketchy@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-swiss@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-system@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-tailwind@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/preset-tosh@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/presets@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/prism@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/sidenav@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/style-guide@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/tailwind@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/theme-provider@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install theme-ui@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
npm install @theme-ui/typography@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
# or 
yarn add @theme-ui/color-modes@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/color@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/components@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/core@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/css@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/custom-properties@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/editor@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add gatsby-plugin-theme-ui@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add gatsby-theme-style-guide@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add gatsby-theme-ui-layout@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/match-media@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/mdx@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/parse-props@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-base@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-bootstrap@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-bulma@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-dark@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-deep@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-funk@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-future@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-polaris@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-roboto@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-sketchy@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-swiss@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-system@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-tailwind@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/preset-tosh@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/presets@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/prism@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/sidenav@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/style-guide@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/tailwind@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/theme-provider@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add theme-ui@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0
yarn add @theme-ui/typography@0.14.0--canary.2090.55a1fbfa47decd8d745779790d9eb48a1efb60e6.0

Version

Published prerelease version: v0.14.0-develop.23

Changelog

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Brage (@braaar)

❤️ peterlits zo (@PeterlitsZo)

❤️ Ryan Turner (@rtturner)

❤️ Cannon Lock (@CannonLock)

🚀 Enhancement

feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
@theme-ui/tailwind
- feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
@theme-ui/custom-properties
- feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
@theme-ui/color-modes
- feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
theme-ui
- feat(theme-ui): Add sx prop to BaseStyles component #2081 (@lachlanjc)

🐛 Bug Fix

fix(docs): make layout more consistent #2168 (@hasparus)
feat(docs): Add custom content for sketchy preset demo #1236 (@atanasster @hasparus @lachlanjc)
fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
Release v0.13.2 #2075 (@lachlanjc @hasparus @braaar @dependabot[bot])
@theme-ui/color-modes
- fix(color-modes): properly use print mode even if its name is initialColorModeName #2090 (@hasparus)
gatsby-plugin-theme-ui
- fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138 (@LekoArts)
@theme-ui/style-guide
- fix(style-guide): use inherited fontSize for ColorPalette color labels #2135 (@braaar)
@theme-ui/components
- fix(components): Update IconButton type definition to include size prop #2121 (@rtturner)
- components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)
@theme-ui/sidenav
- fix(sidenav): Build with latest theme-ui version #2084 (@lachlanjc)

👨‍💻 Minor changes

Update jsx-pragma.mdx (@hasparus)
docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

docs(sx-prop): add more detail for responsive values. #2116 (@PeterlitsZo @lachlanjc)
docs(jsx-pragma): Add section on using with vite #2119 (@PeterlitsZo @lachlanjc)
docs: Clarify usage of theme prop in MDX Layout docs #2100 (@CannonLock)
docs(jsx): add some more detail to #with-swc section in jsx-pragma docs #2094 (@hasparus @lachlanjc)
e2e: Upgrade dependencies #2098 (@lachlanjc)
Set up CodeSandbox CI #2085 (@lachlanjc)
examples: Remove CodeSandbox starter example #2086 (@lachlanjc)
docs: Document default theme values #2087 (@lachlanjc)
@theme-ui/sidenav
- sidenav: Fix props leaking to DOM on Pagination component #2057 (@lachlanjc)

Authors: 9

@dependabot[bot]
Atanas Stoyanov (@atanasster)
Brage (@braaar)
Cannon Lock (@CannonLock)
Lachlan Campbell (@lachlanjc)
Lennart (@LekoArts)
peterlits zo (@PeterlitsZo)
Piotr Monwid-Olechnowicz (@hasparus)
Ryan Turner (@rtturner)

…e as initialColorModeName

vercel · 2022-01-21T18:24:40Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/5Jv3Pb6vWZMwQ9WX1QV1EGpxCQev
✅ Preview: https://theme-ui-git-printmode-fix-systemui.vercel.app

hasparus · 2022-01-21T18:25:24Z

packages/color-modes/test/custom-properties.tsx

+        text: '#fff',
+        background: '#000',
+        modes: {
+          light: {


This is a theme after mutation. Previous code assumed initial color mode is always at the root.

codesandbox-ci · 2022-01-21T18:25:43Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 154a971:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

hasparus · 2022-01-21T18:46:05Z

Hey @lachlanjc, could you give it a longer look? It's working locally for me, and the test I wrote seems to capture the problem, but it seems to be still broken in CodeSandbox CI examples :c

hasparus · 2022-03-21T12:54:36Z

🚀 PR was released in v0.14.0 🚀

fix(color-modes): properly use print mode even if its name is the sam…

154a971

…e as initialColorModeName

hasparus requested a review from lachlanjc January 21, 2022 18:24

hasparus commented Jan 21, 2022

View reviewed changes

hasparus marked this pull request as draft January 21, 2022 18:28

hasparus marked this pull request as ready for review January 21, 2022 18:46

hasparus merged commit f20e2ba into develop Mar 21, 2022

hasparus deleted the printmode-fix branch March 21, 2022 11:47

hasparus added the prerelease This change is available in a prerelease. label Mar 21, 2022

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(color-modes): properly use print mode even if its name is `initialColorModeName` #2090

fix(color-modes): properly use print mode even if its name is `initialColorModeName` #2090

hasparus commented Jan 21, 2022 •

edited

Loading

vercel bot commented Jan 21, 2022 •

edited

Loading

hasparus Jan 21, 2022

codesandbox-ci bot commented Jan 21, 2022

hasparus commented Jan 21, 2022

hasparus commented Mar 21, 2022

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

Conversation

hasparus commented Jan 21, 2022 • edited Loading

Version

🚀 Enhancement

🐛 Bug Fix

👨‍💻 Minor changes

🏠 Internal

Authors: 9

vercel bot commented Jan 21, 2022 • edited Loading

hasparus Jan 21, 2022

Choose a reason for hiding this comment

codesandbox-ci bot commented Jan 21, 2022

hasparus commented Jan 21, 2022

hasparus commented Mar 21, 2022

fix(color-modes): properly use print mode even if its name is `initialColorModeName` #2090

fix(color-modes): properly use print mode even if its name is `initialColorModeName` #2090

hasparus commented Jan 21, 2022 •

edited

Loading

vercel bot commented Jan 21, 2022 •

edited

Loading