Configure a Gatsby Theme & File Shadowing

[00:00:00]
>> What I wanna do is, I wanna show what happens, like what if I wanna change this. So what if I decide that I want my header to be blue. If I wanna do that, well how do I even get to the code, if I had installed this as a package instead of installing it like having it in a mono repo like this.

[00:00:25]
I don't have access to this source code, so it might just out of luck do I need to fork this theme and make my own fortunately gatsby thought through this. Gatsby themes were designed by Christmas guardian John tender and a couple other really, really smart folks and they were kinda thinking okay, what is this experience gonna be?

[00:00:45]
And the concept they came up with is something they call shadowing. Which is the idea that I can selectively replace a file from a theme, by creating a specific path in my project. So let's do a little bit of file shadowing here. And what I'm gonna do is the reason we set up that variables dot CSS is so that we could only shadow the color variables.

[00:01:10]
And that's why it was important to make that just a tiny little file cuz, otherwise, we'd have to copy out the whole thing. So what I'm gonna do is I'm gonna take this variables file, I'm gonna copy it, so I'm just doing copy. And then in my site source folder, I'm gonna create a folder called gatsby-theme-shared-nav.

[00:01:31]
And then inside of that, we're going to treat this as if it were the source folder of gatsby-theme-shared-nav. So I wanna get into styles and then inside of that we're gonna put in variables.CSS. So lemme oops create a new folder called styles. And then inside of that, I'm gonna paste our variables.CSS, and I'm going to change our black to a dark blue.

[00:01:55]
That should be still be enough contrast to work. And I'm going to stop and restart because when you do shadowing you're changing the file system, you need to basically get gatsby to get a fresh look at it for that to work properly. So this is probably one of those like, it's not the most straightforward thing the first time you're looking at it, because basically what we just did, is we told gatsby use this theme.

[00:02:26]
But look in this folder where I named it specifically to match this theme and replace variables dot CSS into the theme with this file. And otherwise use it exactly the same, so the cumulative effect of what we've done, is if we were to just edit the theme. As far as the theme is concerned, this file no longer exists, it's now this one.

[00:02:52]
And that's how shadowing is designed. It's a really powerful approach that gives us the ability to modify themes without having to fully eject from them. There's a concept that I really like that I've written about in the past called progressive disclosure of complexity. And what progressive disclosure of complexity is this kind of concept of teaching.

[00:03:19]
And so this is in UX, Nielsen Norman group has written about it, and I've written about it in the terms of just kind of like teaching and learning in general. But the idea is that you let somebody get into something without having to touch anything. And then as they wanna get deeper into it, they can only get it the extra complexity that they need.

[00:03:43]
It's not all or nothing I think if you ever use create react app back in the day, the experience was you could use create react app until you wanted to change literally anything and then you had to eject and then you owned all of the code. For create react app, and it was separate from the create react app cord.

[00:04:00]
And so this was an idea, it was easy until you injected to all of the complexity. You either had full automation or fully manual. And with progressive disclosure, what you're getting is this concept of, I want automatic until I need to customize one thing, and then lemme make that one thing manual.

[00:04:19]
So that's what we're doing here. We've said I wanna use everything about this theme, except I wanna modify this color. So I shadow the variables, and then I can replace the colors that I want and if I want to do a full theme, I could do that as well.

[00:04:35]
And now the site is showing this dark blue. So that's a really kind of lightweight look at how shadowing works, any of the other examples that we could do would be a little heavier handed. Just because there's not too much going on in this theme. So I want to show something that would illustrate the concept without getting into the weeds.

[00:05:00]
And this is I think a pretty good look at it. So that's how file shadowing works.