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.

1bdv2\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\gatsby-plugin-theme-ui\index.js

Here are the things, i tried.

# Original color theme

Light
Light

Dark
This uses

1modes: {
2 dark: {
3 text: tailwind.colors.gray[4],
4 primary: tailwind.colors.purple[5],
5 secondary: `#7f8ea3`,
6 toggleIcon: tailwind.colors.gray[4],
7 background: `#1A202C`,
8 heading: tailwind.colors.white,
9 divide: tailwind.colors.gray[8],
10 muted: tailwind.colors.gray[8],
11 },
12 },

Dark

# What CSS key correspond to

1background: page background
2primary: post links / selected text
3secondary: tags, header links
4heading: headings
5toggleIcon: light/dark mode

# Light theme : 1

This uses

1light:{
2 background: `#e8e6d9`,
3 secondary: `#f23807`
4 }

Light

# Light theme : 2

This uses

1light:{
2 background: `#d0e1f9`,
3 secondary: `#ee4035`
4 }

Light

# Light theme : 3

This uses

1light:{
2 background: `#dcf3e8`,
3 primary: `#f11818`,
4 secondary: `#f11818`,
5 heading: `#2f41cd`,
6 }

Light

# Light theme : 4

This uses

1light:{
2 background: `#ffd8d8`,
3 primary: `#0bbd59`,
4 secondary: `#0bbd59`,
5 heading: `#2f41cd`,
6 }

Light

# Light theme : 5

This uses

1light:{
2 background: `#28e49a`,
3 heading: `#000000`,
4 primary: `#ff0000`,
5 secondary: `#ffffff`
6 }

Light

# Light theme : 6

This uses

1light:{
2 background: `#e4f7b5`,
3 heading: `#0b1ac3`,
4 primary: `#8f85c2`,
5 secondary: `#e41b3f`
6 }

Light

# Light theme : 7

This uses

1# Below fontWeight was newly added in the root as the header link were by default 400,
2# which was very thin for this color.
3 styles: {
4 root: {
5 fontWeight: 500,
6 }
7 }
8
9# Body background and posted link color, it was very hard to find constrasting color for this background
10# has to settle with this primary color.
11 modes: {
12 light:{
13 background: `#bddccc`, /* Background */
14 primary: `#7400b8`, /* Alink posted color */
15 },
16 }

Light

# Dark theme : 1

This uses

1dark:{
2 background: `#1e172c`,
3 secondary: `#f725a0`,
4 primary: `#0cb2c0`,
5 }

Dark

# Dark theme : 2

This uses

1dark:{
2 primary: `#fad141`,
3 background: `#1e172c`,
4 secondary: `#2ab7ca`,
5 heading: `#ff0080`,
6 toggleIcon: `#fdf498`,
7 }

Dark

# Dark theme : 3

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

1dark:{
2 background: `#0a192f`,
3 primary: `#fad141`,
4 secondary: `#64ffda`,
5 heading: `#ccd6f6`,
6 toggleIcon: `#fdf498`,
7 }

Dark

# Dark theme : 4

1dark:{
2 primary: `#c61a0c`,
3 background: `#002a3a`,
4 secondary: `#f6411f`,
5 heading: `#ffac00`,
6 toggleIcon: `#fdf498`,
7 }

Dark

# Dark theme : 5

1dark:{
2 primary: `#ffc884`,
3 background: `#30157d`,
4 secondary: `#fbff00`,
5 heading: `#ffffff`,
6 toggleIcon: `#fdf498`,
7 }

Dark

# Dark theme : 6

1dark:{
2 primary: `#f8c7b6`,
3 background: `#21403a`,
4 secondary: `#ffd758`,
5 heading: `#53c07f`,
6 toggleIcon: `#fdf498`,
7 }

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 (till 28/Nov/2020)
  2. Light theme 7
  3. 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

1bdv2\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\gatsby-plugin-theme-ui\index.js

created a similar structure in

1bdv2\src\gatsby-plugin-theme-ui\index.js

This worked and likewise you can shadow many different files and customize your site in Gatsby.