menu
Channels
Team

Child Theming and Component Shadowing Changes

February 2, 2019 at 5:08pm

Child Theming and Component Shadowing Changes

February 2, 2019 at 5:08pm
Child theming is now enabled in the current Gatsby release, so upgrade if you want to try them out. Read the official blog post here: https://www.gatsbyjs.org/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/
There is an example of using child themes in the gatsby-theme-examples repo. https://github.com/ChristopherBiscardi/gatsby-theme-examples/pull/13
You can ask questions here or on Twitter if you like (https://twitter.com/chrisbiscardi/status/1091443578411266048)

February 3, 2019 at 7:55pm

February 8, 2019 at 11:27am
Does the component shadowing work for scoped theme packages? My theme is published privately on npm (/gatsby-theme-my-theme)
  • reply
  • like

February 12, 2019 at 2:52pm
What's the best way of merging shadowed changes with theme files?
I have a src/colors.js file in my theme. If I create a /src/theme-name/colors.js file in my site to update or add a single color, I would like to do it as colors = { ...originalColors, newColor: 'red' } to prevent duplicating all original values.
But I can't figure out how to access the original colors, since shadowing overrides the original file.
Edited
  • reply
  • like

March 6, 2019 at 2:43pm
did you find out whether / how this works with scoped themes? #lazy
  • reply
  • like
did you find out whether / how this works with scoped themes? #lazy
Sadly no
  • reply
  • like

March 13, 2019 at 5:05am
What have you tried? It should work the same as a normal package with the exception that when shadowing a file on disk you will end up with an extra folder. consider the following scoped theme /gatsby-theme-blog compared with the non-scoped theme gatsby-theme-blog-core.
src
├── @stuff
│ └── gatsby-theme-blog
│ └── components
│ └── Bio.js
├── gatsby-theme-blog-core
│ └── components
│ └── blog-post.js
  • reply
  • like

May 2, 2019 at 6:49pm
shadowing doesn't work in a monorepo with scoped packages btw, you could fix it by using the themeDir, instead of the themeName
  • reply
  • like
not sure about other implications
  • reply
  • like

May 28, 2019 at 6:26pm
OK there are two themes - I have two gatsby-config.js files for each theme, each has its own folder/file structure, each has its own schema with graphql queries, each has its own set of components as well. So now, how do I merge this? Remember, a merge here means, that a blog-theme could very well be a subset or a single (launch) page of a sub-folder of the main site (parent site). Does the Parent/Child theming concept really help here? I am a bit lost. Please give me the right handle to hold onto to get my merge be a success for those two starter themes.
  • reply
  • like

September 24, 2019 at 10:13am
, I have went through your blog post on shadowing as well as on this post for the same and still don't get 1 thing: how to shadow parent theme, as I would like to change the data model built on gatsby-theme-blog-core so that gatsby-theme-blog can have access to say "tags" "categories" "timeToRead", etc... any pointers so that I do all my data model in one place instead of having that all over my components?
Edited
  • reply
  • like