Xiaoxing's Notes

Changing the Colors

December 12, 2020
371 words
1 minutes

This is a tip post for building your website with org-mode and gatsby.

Leverage the Power

One of the biggest bright sides of building a tool within an active community like JavaScript and Gatsby is that you get to leverage the tremendous power with minimal effort. Various drawbacks of the community aside, the sheer amount of userbase can create a virtuous circle which accelerate the development of ideas and tools quite well. It's hard to design an extensible ecosystem, but I think Gatsby did an outstanding job. Without boring you with the technical details, but in my opinion, they did it so well that lots of awesome projects proactively trying to play nice or even merge with the ecosystem. One of them is theme-ui, which is the star of this post.

Let's Change Some Colors

You should already have your website project setup and running. If not, you can follow a couple of simple steps described here and get it running quickly, then come back.

Create a file at src/gatsby-plugin-theme-ui/index.js. This file is shadowing a file of the gatsby theme-ui plugin.

// src/gatsby-plugin-theme-ui/index.js
export default {
    colors: {
        text: 'midnightblue',
        background: 'seashell',
    }
}

If I do this to my own website while running in dev mode (npm run develop), it instantly changes it's color.

this post with some tweaks on colors

About Dark Mode

If you toggle between default and dark mode, you will find that the color change only applies to the default mode. To modify dark mode, you probably already guessed it.

export default {
  colors: {
    text: 'midnightblue',
    background: 'seashell',
    modes: {
      dark: {
        text: 'seashell',
        background: 'midnightblue',
      }
    }
  }
}

To see a list of all the customisable attributes, take a look at the default theme-ui preset used by gatsby orga theme. You can overwrite any part of it by inserting the attributes in your own src/gatsby-plugin-theme-ui/index.js file. Your file will be merged on to the default preset.

Power of Total Control

It doesn't stop at colors; you will be able to tweak surprising amount without writing any real code (yeah, it's a .js file, but it's basically a big JSON object). You can tweak individual HTML tags, or even add your own CSS in the theme. theme-ui is powerful, and it's a modern way of styling websites.

Read more stories about "emacs" ->