Customize the Theme

Use a Different Preset

The default preset is orga-theme-ui-preset. To use a different one, simply install the package.

npm install @theme-ui/preset-dark
# or with yarn
yarn add @theme-ui/preset-dark

And change the option (see details in Config and Options) defined in your gatsby-config.js, like so.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blorg`,
      options: {
        preset: `@theme-ui/preset-dark`,
      },
    },
  ],
}

Tweak a Preset

You can shadow the gatsby-plugin-theme-ui plugin to tweak on existing preset. Basically you can create a file within this project: src/gatsby-plugin-theme-ui/index.js, and go nuts in there. An example would look like this:

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

theme-ui is so powerful that itself is worth a lengthy article to talk about, if you are curious, take a look at the documentation from gatsby to learn more.

Change the Avatar

Prepare a photo of yourself, use it to replace file src/gatsby-theme-blorg/avatar.png. The new file could be any of the following format: jpeg, jpg, gif, png. What it actually does is shadowing a file from the theme, which is the core technique for Advanced Customization.