Gatsby Config 不改变颜色主题

Question

我是博客静态站点开发的新手，正在尝试使用 Gatsby。我尝试将启动器的背景和主题颜色从粉红色 (#ed64a6) 更改为紫色 (#702da1)。但是，当我将其放入 gatsby-config.js 和运行 gatsby develop 时，没有任何变化。

这是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`
      }
    }

并且 header 的颜色仍然是粉红色。

gatsby build 和 gatsby serve 导致相同的问题。这似乎是一个愚蠢的问题，但在这种情况下我需要做什么才能更改颜色？

Answer 1

background_color 属性 from gatsby-plugin-manifest 代表PWA (Pprogressive Web Apps) features, 不是主要的 background-color CSS 属性.

要更改 styling for any component or element, 只需添加 CSS/SCSS、JS、模块等：

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

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

在你的 styles.css:

a {
  color: red:
}

a.active{
  color: blue;
}

请记住，Gatsby's <Link> 组件（因为它从 React 的 @reach/router 扩展而来）添加了一项附加功能，以使用 [=19= 将当前页面（或部分路径）标记为活动] prop;

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

Gatsby Config 不改变颜色主题

Gatsby Config Not Changing Color Theme

javascript

blogs

reactjs

gatsby