search

jxnblk / mdx-deck

♠️ React MDX-based presentation decks
https://mdx-deck.jxnblk.com
MIT License
11.36k stars 603 forks source link

Theme UI Color modes not working in gatsby-theme when exporting theme from deck (v3) #519

Open michaellopez opened 5 years ago

michaellopez commented 5 years ago

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 exporting theme from a deck, following the theme documentation.

I expected all features of shadowing src/gatsby-plugin-theme-ui/index.js to be equal to exporting theme 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.

jxnblk commented 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

michaellopez commented 5 years ago

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.

michaellopez commented 5 years ago

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.

Codesandbox here

michaellopez commented 5 years ago

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