CODEWITHSUNDEEP
javascriptreactjsgatsbyblogs
clattenburg cake
clattenburg cake

Reputation: 1222

Gatsby Config Not Changing Color Theme

I'm new to static site development for blogs and am trying to use Gatsby. I've tried to change the background and theme color of a starter from pink (#ed64a6) to purple (#702da1). However when I put it into the gatsby-config.js and run gatsby develop nothing changes.

This is gatsby-config.js:

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-personal-website-starter`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#702da1`,
        theme_color: `#702da1`,
        display: `minimal-ui`,
        icon: `src/assets/images/gatsby-icon.png`
      }
    }

And the color from the header is still pink.

enter image description here

gatsby build and gatsby serve results in the same issue. This might seem like a silly question but what do I need to do in this case to change the color?

Upvotes: 1

Views: 552

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

background_color property from gatsby-plugin-manifest stands for PWA (Progressive Web Apps) features, not for the main background-color CSS property.

To change the styling for any component or element, just add a CSS/SCSS, JS, modules, etc:

import React from "react"
import Layout from "../components/layout"
import "./styles.css"   

export default function Home() {
  return <Layout>Hello world!</Layout>
}

In your styles.css:

a {
  color: red:
}

a.active{
  color: blue;
}

Keep in mind that Gatsby's <Link> component (because it extends from @reach/router from React) adds an additional feature to mark as active the current page (or partial path) with the activeClassName prop;

<Link
  to="/"
  {/* This assumes the `active` class is defined in your CSS */}
  activeClassName="active"
>

Upvotes: 1

Related Questions