Skip to content

bobby_dreamer

Changing theme of the website manually

decisions, web-development, designs1 min read

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

Light
Light

Dark
This uses

Dark

# What CSS key correspond to

# Light theme : 1

This uses

Light

# Light theme : 2

This uses

Light

# Light theme : 3

This uses

Light

# Light theme : 4

This uses

Light

# Light theme : 5

This uses

Light

# Light theme : 6

This uses

Light

# Dark theme : 1

This uses

Dark

# Dark theme : 2

This uses

Dark

# Dark theme : 3

This theme is inspired from Brittany Chiang her website is amazing in so many levels and it uses

Dark

# Dark theme : 4

Dark

# Dark theme : 5

Dark

# Dark theme : 6

Dark

# Dark mode inspirations

Hong Kong neon street colors Hong Kong 1 Hong Kong 2

# You know who he winner is

  1. Light theme 2
  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.