Skip to content
bobby_dreamer
GithubLinkedIn

Changing theme of the website manually

— decisions, web-development, designs — 1 min read

Behaviour changes in each versions

  • 2021/10/17 - Shadowing works. Theme changes can be made to src\@lekoarts\gatsby-plugin-theme-ui\index.js
  • 2021/07/16 - In release @lekoarts/gatsby-theme-minimal-blog": "^3.0.2", theme changes are Non-Shadowing meaning you have to make changes in node_modules\@lekoarts\gatsby-theme-minimal-blog\src\gatsby-plugin-theme-ui\index.js.
  • Earlier version these changes can be shadowed and shadowed files were in src\@lekoarts\gatsby-plugin-theme-ui\index.js.

First lets see the themes and later we shall see the code changes.

# 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/* Add the below JSON node in colors:{ modes:{ /*add here*/ }} */
2

3      light:{
4        background: `#bddccc`, /* Background */        
5        primary: `#7400b8`,    /* Alink posted color */
6        secondary: `#ee4035`,   /* Alink top menu color */
7        divide: tailwind.colors.purple[6], /* HR color */
8      },
9

10/* Add fontWeight to styles:{ root:{ /* add here */ } } */
11fontWeight: 500,

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 the Non-Shadowing changes

Filepath : node_modules\@lekoarts\gatsby-theme-minimal-blog\src\gatsby-plugin-theme-ui\index.js

1colors: {
2    primary: tailwind.colors.purple[7],
3    secondary: `#5f6c80`,
4    toggleIcon: tailwind.colors.gray[8],
5    heading: tailwind.colors.black,
6    divide: tailwind.colors.gray[4],
7    modes: {
8      light:{
9        background: `#bddccc`, /* Background */        
10        primary: `#7400b8`,    /* Alink posted color */
11        secondary: `#ee4035`   /* Alink top menu color */
12      },      
13      dark: {
14        background: `#1e172c`,
15        primary: `#fad141`,
16        secondary: `#2ab7ca`,
17        heading: `#ff0080`,
18        toggleIcon: `#fdf498`,  
19        text: tailwind.colors.gray[4],        
20        divide: tailwind.colors.gray[8],
21        muted: tailwind.colors.gray[8],
22      },
23    },
24  },
25...
26  styles: {
27    root: {
28      color: `text`,
29      backgroundColor: `background`,
30      margin: 0,
31      padding: 0,
32      boxSizing: `border-box`,
33      textRendering: `optimizeLegibility`,
34      WebkitFontSmoothing: `antialiased`,
35      MozOsxFontSmoothing: `grayscale`,
36      fontWeight: 500,
37    },

# Next Steps