Page design variations broken when directly linked after build

[ibjorn]

I've run into an issue which I cannot find a solution to and it's starting to feel a bit overwhelming and like I've hit a brick wall.

This problem only comes up in production, no issues in development, which makes it quite hard to troubleshoot.

I have slight variations in my design for different parts our site, like our portfolio page, blog pages, etc. It's subtle changes like, the nav 'color' needing to be either black or white, different background colours and 'color' on the body and footer and so on.

Just to add some complexity, I have theme-ui with gatsby-plugin-theme-ui and gatsby-plugin-transition-link installed.

My header and footer have been the real headache as they sit in my layout component.

I've tried a few possible solutions but keep running into the same brick wall:

1. Check what my location.pathname includes with a conditional then pass the colours to my components.
2. When that didn't work, I figured, perhaps using the title in a conditional might have more success and I figured out how to get that in my pageContext, but ended up with the same result.
3. Currently I'm passing a page style in my pageContext and set up variants in my theme, but still the same result.

I'm not really sure what direction to go from here. I've done tons of reading and research on this but I really am not sure what direction to go, especially considering the extensions mentioned above.

I've read about Gatsby themes, which seem like a solution, but I'm still struggling to wrap my head around how they work.

Is this something that could be solved with something like a state provider using React's Context?

Have I stumbled onto a bug by chance or some kind of conflict between extensions?

Here's my installation info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 81.0.4044.138
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.75)
  npmPackages:
    gatsby: ^2.30.2 => 2.30.2 
    gatsby-background-image: ^1.3.1 => 1.3.1 
    gatsby-image: ^2.9.0 => 2.9.0 
    gatsby-plugin-force-trailing-slashes: ^1.0.4 => 1.0.4 
    gatsby-plugin-google-gtag: ^2.6.0 => 2.6.0 
    gatsby-plugin-manifest: ^2.10.0 => 2.10.0 
    gatsby-plugin-offline: ^3.8.0 => 3.8.0 
    gatsby-plugin-react-helmet: ^3.8.0 => 3.8.0 
    gatsby-plugin-sharp: ^2.12.1 => 2.12.1 
    gatsby-plugin-sitemap: ^2.10.0 => 2.10.0 
    gatsby-plugin-theme-ui: ^0.3.5 => 0.3.5 
    gatsby-plugin-transition-link: ^1.20.5 => 1.20.5 
    gatsby-source-filesystem: ^2.9.0 => 2.9.0 
    gatsby-source-wordpress-experimental: ^6.2.0 => 6.2.0 
    gatsby-theme-style-guide: ^0.3.5 => 0.3.5 
    gatsby-transformer-sharp: ^2.10.1 => 2.10.1 
  npmGlobalPackages:
    gatsby-cli: 2.17.1
    gatsby: 2.19.5

Any advice, or a point in the right direction would be greatly appreciated! I have a private repo on my own server for this project as it's for my own company and want to keep it private while it's new. But am willing to share if needed. I also have the site live if that helps for showing the issue.

[ibjorn]

I just want to add, something else I've been wondering about, but not sure how to implement. Perhaps I should be getting my pageContext in my pages, then pass it on to the layout component for my conditionals to pass on to my header and footer? But the thing is, with gatsby-plugin-transitional-link, I'm not wrapping my page templates with a layout, so how do I pass the context? Global state?