Change the Theme of Antd when using GatsbyJS

gatsbyjs themes
gatsby-plugin-less
gatsby build
antd-theme
gatsby docs
blank gatsby template
gatsby-starter-blog
gatsby examples

This GatsbyJS/antd plugin page (https://github.com/bskimball/gatsby-plugin-antd/issues/2) makes it seem that there is a way to edit ant.design (antd) themes when using GatsbyJS. The code that is provided is

plugins: [
  {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
  }
]

But there is no additional information. Where would one make changes to things like the theme primary color (as described: https://ant.design/docs/react/customize-theme). The ant.design page (https://ant.design/docs/react/customize-theme) says to make the primary color change by doing the following:

"theme": {
  "primary-color": "#1DA57A",
},

It is not clear in what file such a variable would be set in GatbsyJS.

GitHub repo with an example: https://github.com/uciska/gatsby-less-v2. To get Antd working changes must be made to three Gatsby files.

Example gastby-config.js:

module.exports = {
  siteMetadata: {
    title: 'My site'
  },
  plugins: [
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#da3043',
          'font-family': 'Arial',
          'layout-body-background': '#66ff79'
        }
      }
    }
  ]
}

Example gastby-node.js:

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: 'babel-plugin-import',
    options: {
      libraryName: 'antd',
      style: true
    }
  })
}

Example package.json:

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "antd": "^3.6.4",
    "babel-plugin-import": "^1.8.0",
    "gatsby": "next",
    "gatsby-plugin-less": "next",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-apollo": "^2.1.11"
  }
}

Theme UI, Theme UI is a library for styling React apps with user-configurable MDX and using configurations and themes from Typography.js. This allows components within your site to add styles based on a predefined set of values. If you import styles from 'antd/dist/antd.css', change it to antd/dist/antd.less. Official Themes 🌈 # We have some official themes, try them out and give us some feedback! 🌑 Dark Theme (supported in 4.0.0+) 📦 Compact Theme (supported in 4.1.0+) ☁️ Aliyun Console Theme (Beta) Use dark or compact theme # Method 1: using Umi 3

This configuration worked for me. I haven't added babel-plugin-import & haven't modified gatsby-node.js file.

Here is my package.json file

{
  "name": "web-master",
  "private": true,
  "description": "Become a fullstack developer",
  "version": "1.0",
  "author": "Vishal Shetty",
  "dependencies": {
    "gatsby": "^2.19.7",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-manifest": "^2.2.39",
    "gatsby-plugin-offline": "^3.0.32",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-sharp": "^2.3.13",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "antd": "^3.26.12",
    "gatsby-plugin-antd": "^2.1.0",
    "gatsby-plugin-less": "^3.0.19",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  }
}

My gatsby-config.js file

module.exports = {
  siteMetadata: {
    title: `WebMaster`,
    description: `Become a fullstack developer`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      },
    },
    {
      resolve: "gatsby-plugin-antd",
      options: {
        style: true,
      },
    },
    {
      resolve: "gatsby-plugin-less",
      options: {
        javascriptEnabled: true,
        modifyVars: {
          "primary-color": "#E4572E",
        },
      },
    },
  ],
}

Look out for the plugins gatsby-plugin-antd and gatsby-plugin-less configuration.

That's it and it works.

Using a Theme, In this tutorial, you'll learn how to use Gatsby themes by creating a new site using the official Gatsby blog theme. Create a new site Replace your avatar. The blog description: "A collection of my thoughts and writings.",. Using a Gatsby theme, all of your default configuration (shared functionality, data sourcing, design) is abstracted out of your site, and into an installable package. This means that the configuration and functionality isn’t directly written into your project, but rather versioned, centrally managed, and installed as a dependency.

Kudos to @cannin for his original answer. I have updated it with the latest lib name and reorg the text.

To use ANTD with Gatsby and overwrite original styling

  1. Add dependencies yarn add babel-plugin-import less-loader antd gatsby-plugin-less
  2. Update Gatsby's setting: gastby-config.js add to the plugins array

    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#663399',
          'font-family': 'Arial',
          'layout-body-background': '#66ff79'
        }
      },
    },
    

    gastby-node.js

    exports.onCreateBabelConfig = ({ actions }) => {
      actions.setBabelPlugin({
        name: 'babel-plugin-import',
        options: {
          libraryName: 'antd',
          style: true
        }
      })
    }
    
  3. Example of using antd in component. This primary button shall display in Gatsby purple #663399

    import React from "react"
    import Layout from '../components/layout'
    import {Button} from 'antd'
    
    export default () => (
      <Layout>
        <div>
          <h1>ANTD</h1>
          <p>Such wow. Very React.</p>
          <Button type="primary">Button</Button>
        </div>
      </Layout>
    )
    

Themes API Reference, You can use options to make filesystem sourcing configurable, accept different nav menu items, change branding colors from the default, and  If you import styles by specifying the style option of babel-plugin-import, change it from 'css' to true, which will import the less version of antd. If you import styles from 'antd/dist/antd.css', change it to antd/dist/antd.less. When using dva-cli@0.7.0+, you should add the theme block to .roadhogrc instead of package.json.

gatsby-plugin-dark-mode, Browser code for toggling and persisting the theme (from Dan Abramov's Automatic use of a dark mode theme (via the prefers-color-scheme CSS media query) if the current theme name and a toggleTheme function to change the theme. Change directory and install theme; In this example, our theme is gatsby-theme-blog. You can replace that reference with whatever your theme is named. Add theme to gatsby-config.js; Follow the instructions found in the README of the theme you’re using to determine what configuration it requires.

Themes Conventions, As methodologies for building Gatsby Themes begin to formalize and Changing queries since a user could be using the original data in  In this tutorial, you’ll learn how to use Gatsby themes by creating a new site using the official Gatsby blog theme. Create a new site using the blog theme starter. Creating a site using a theme starter starts the same way as using a regular Gatsby starter: Run the site

Converting a Starter to a Theme, This guide will walk you through the main steps of converting your… A theme is a type of plugin that includes a gatsby-config.js file and adds original starter repo and run the risk of overwriting some of their own changes. Using the above scheme can realize the function of online theme change, but at the same time introduce some new problems. So we don't recommend using it in a production environment. Pro v4 will refine it. First of all, antd-pro-merge-less will cause some of the introduction of less to fail. And it is difficult to check.

Comments
  • You do not need to edit gatsby-node if you are using gatsby-plugin-antd
  • @cannin Why do we need to include less-loader? Doesn't gatsby-plugin-less add it for us?
  • @BrianKimball I used gatsby-plugin-antd, but still need to edit gatsby-node.js to take effect.
  • This works for me too thanks!
  • Why do you need to install less-loader? Shouldn't less and gatsby-plugin-less be enough.