How to change the colors? about gatsby-theme-apollo

[trevorblades]

Hey @SvenAlHamad! You sure can change the color palette in this theme. You'll want to shadow gatsby-theme-apollo-core/utils/colors.

You can check out all of the available keys in the linked file. If you want to keep most of the colors intact but only change a few of them, you can shadow the file like so:

// src/gatsby-theme-apollo-core/utils/colors.js
const {colors} = require('gatsby-theme-apollo-core/src/utils/colors');

exports.colors = {
  ...colors, // spread in default color values
  primary: '#ff0000' // change the primary color to red
};

Here's what the result of this change looks like:

[wrod7]

that was it it! gonna play with it some more. Thanks again for this package!

[wrod7]

@trevorblades thanks for this. whats the next step after adding that colors.js file? do I need to edit something in the gatsby-config?

[trevorblades]

@wrod7 you shouldn't need to edit anything in your Gatsby config once you set up your custom colors.js file. Just restart your build and you should see the new colors 👍

Let me know if you're seeing something different!

[wrod7]

@trevorblades took a few restarts also had something wrong in the gatsby-config but its good now. thanks!

im having trouble setting up component shadowing. is there something in the config i need to change to make it shadowing work?

here is my tree:

|-- source
    |-- index.mdx
|-- src
    |-- assets
         |-- custom-logo.svg
    |-- gatsby-theme-apollo
        |-- components
            |-- logo.js
    |-- gatsby-theme-apollo-core
        |-- utils
            |-- colors.js
|-- gatsby-config.js

here is my config:

const themeOptions = require('gatsby-theme-apollo-docs/theme-options');

module.exports = {
  pathPrefix: '/docs',
  plugins: [
    {
      resolve: 'gatsby-theme-apollo-docs',
      options: {
        ...themeOptions,
        root: __dirname,
        siteName: 'Docs',
        subtitle: 'Platform',
        description: 'Description',
        githubRepo: '...',
        spectrumPath: '...',
        sidebarCategories: {
          null: ['index'],
        },
      },
    },
  ],
};

[trevorblades]

@wrod7 you've almost got it! If you want to shadow the logo, you'll want to do that in your src/gatsby-theme-apollo-core directory rather than the gatsby-theme-apollo one. I realized that the core theme docs were still telling users to shadow the logo in the way that you are, so I updated that section: https://github.com/apollographql/gatsby-theme-apollo/tree/master/packages/gatsby-theme-apollo-core#logotitle

Your directory structure should look like this when you're done:

|-- source
    |-- index.mdx
|-- src
    |-- assets
         |-- custom-logo.svg
    |-- gatsby-theme-apollo-core
        |-- components
            |-- logo.js
        |-- utils
            |-- colors.js
|-- gatsby-config.js

And your logo.js file could look like this:

export {ReactComponent as default} from '../assets/custom-logo.svg';