Customozing Layouts about gatsby-theme-try-ghost HOT 3 CLOSED

It's possible and absolutely recommended to use shadowing for customizing this theme. Read this article about component shadowing to get started quickly.

The structure of this mono repo is not relevant for for your path layouts (just forget the directory structure of gatsby-theme-try-ghost for a moment). Just think of every package as a standalone program (like you would with any other npm package that you import).

Just have a look at gatsby-starter-try-ghost. The starter uses the base theme gatsby-theme-try-ghost and another theme gatsby-theme-ghost-dark-mode. The dark-mode theme shadows some of the base theme components. First, observe that you need both packages in package.json. Second, you need to configure them in gatsby-config.js.

The base theme gatsby-theme-try-ghost contains a file called DocumentHead.js which is shadowed by the dark-mode theme. The original path is:

gatsby-theme-try-ghost
└── src
    └── components
        └── common
            └── DocumentHead.js

To shadow DocumentHead.js in gatsby-theme-ghost-dark-mode the file must be placed in

gatsby-theme-ghost-dark-mode
└── src
    └── gatsby-theme-try-ghost
        └── components
            └── common
                └──DocumentHead.js

So basically, you need to create directory named exactly as the base theme, put it under src/ and follow the same directory structure as in the base theme. Hope that makes sense to you.

If your customizations could be used by many people, please consider to contribute to this project by sending a PR. I'd be happy to discuss with you if it fits into this project.

from gatsby-theme-try-ghost.

I think you mean

gatsby-theme-ghost-dark-mode
└── src
    └── gatsby-theme-try-ghost
        └── components
            └── common
                └──DocumentHead.js

instead of

gatsby-theme-ghost-dark-mode
└── src
    └── gatsby-theme-ghost-dark-mode
        └── components
            └── common
                └──DocumentHead.js

if I understood correctly

from gatsby-theme-try-ghost.

Thanks for catching this. I corrected it in the original post.

from gatsby-theme-try-ghost.