Open michaellopez opened 5 years ago
IIRC I don't think you can specify color modes from the deck's exported theme since it's a nested theme under the base one
Ok. Yeah that's kind of my conclusion as well. I just instinctively thought it should work.
Is it this line that documents this? (from https://theme-ui.com/guides/nested-theme-providers/#how-contexts-merge)
The inner Theme Provider will not create a new color mode state, but inherit this from the parent.
So I guess there is no way of specifying color modes on a per deck basis then.
I found a work around. I don't think its a bad approach, but would like your input @jxnblk just to make sure I'm not doing something bad.
I basically applied the approach detailed in https://styled-system.com/guides/color-modes as a Provider
for my mdx deck theme.
If its an OK approach, can that logic/Provider be extracted into core and run conditionally if any colors modes are set in the mdx deck theme? I'm thinking maybe in the deck template or deck component
I am unable to get Theme UI Color Mode working with
gatsby-theme-mdx-deck
.It works properly when shadowing
src/gatsby-plugin-theme-ui/index.js
in the consuming Gatsby site. But not when exportingtheme
from a deck, following the theme documentation.I expected all features of shadowing
src/gatsby-plugin-theme-ui/index.js
to be equal to exportingtheme
on a per deck basis. Is this not the case?I setup two codesandboxes, the only difference is how the theme is added
Theme exported from deck (not working): https://codesandbox.io/s/gatsby-theme-mdx-deck-color-modes-gvop6 Shadowing gatsby-plugin-theme-ui (working): https://codesandbox.io/s/gatsby-theme-mdx-deck-color-modes-4jczj
I've been trying to debug this for quite some time now, but I am at my wits end. I would appreciate any advice or pointers if this is supposed to work and I'll submit a PR if I can get it working.