Changing theme of the website manually
Since i am into colors and everything, i was poking around
node_modules to change the current gatsby theme colors. Finally i found the .js file where the color details are specified and i started to playaround with it.
Here are the things, i tried.
# Original color theme
# What CSS key correspond to
# Light theme : 1
# Light theme : 2
# Light theme : 3
# Light theme : 4
# Light theme : 5
# Light theme : 6
# Dark theme : 1
# Dark theme : 2
# Dark theme : 3
This theme is inspired from Brittany Chiang her website is amazing in so many levels and it uses
# Dark theme : 4
# Dark theme : 5
# Dark theme : 6
# Dark mode inspirations
Hong Kong neon street colors
# You know who he winner is
- Light theme 2
- Dark theme 2
# Making these changes permanent
Above i made changes to files in
node_modules folder but it will get overridden if i do a
npm install elsewhere. To solve this problem Gatsby has a technique called shadowing
Below text is from Shadowing in Gatsby Themes
This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.
To override the file in
created a similar structure in
This worked and likewise you can shadow many different files and customize your site in Gatsby.