themes - 如何使用gatsby-plugin-theme-ui调整主体背景颜色

Question

使用 gatsby-plugin-theme-ui 构建 Gatsby 主题时，文档指出您可以通过将其添加到嵌套颜色对象中的主题对象来调整主体的背景颜色。这似乎没有效果。字体和样式等其他变量正确引入，但除了在单个元素上进行调整外，我似乎无法更改背景。是否需要额外的步骤才能让它发挥作用？

使用 setInitialMode 并定义暗模式能够更改背景，但这似乎是一个 hacky 解决方案，因为我没有尝试构建主题颜色切换。

这是我在src/目录下的主题配置文件:

主题.js

export const theme = {
  space: [0, 4, 8, 16, 32],
  fonts: {
    body: "Alegreya Sans SC, system-ui, sans-serif",
    heading: `Archivo Black, system-ui, sans-serif`,
  },
  fontSizes: [16, 18, 20, 22, 27, 36, 72],
  lineHeights: {
    body: 1.45,
    heading: 1.1,
  },
  colors: {
    background: "blue",
    text: "purple",
    primary: "purple",
  },
  sizes: {
    default: "90vw",
    max: "540px",
  },
  styles: {
    body: {
      margin: 0,
      padding: 0,
    },
    h1: {
      color: "primary",
      fontSize: 6,
      fontWeight: "bold",
      lineHeight: "heading",
      fontFamily: "heading",
    },
    ul: {
      borderTop: "1px solid",
      borderColor: "gray.0",
      listStyle: "none",
      padding: 0,
    },
    li: {
      borderBottom: "1px solid",
      borderColor: "gray.1",
      padding: 2,
      "&:focus-within,&:hover": {
        backgroundColor: "gray.0",
      },
    },
  },
}

export default theme

src/gatsby-plugin-theme-ui/目录下的

index.js:

import theme from "../theme"

export default theme

没有创建错误消息。无论输入什么颜色(十六进制、rgba 或其他颜色)，背景都保持默认颜色。

Answer 1

我想我想出了一个办法。

创建一个名为 Global 的组件。

import React from 'react'
import { Global } from '@emotion/core'

export default props =>
  <Global
    styles={theme => ({
      body: {
        color: theme.colors.text,
        backgroundColor: theme.colors.background,
      }
    })}
  />

然后将其导入到您的 index.js 中，如下所示。

// with your imports
import { Global } from '@emotion/core'

// then in the return portion of the function
return (
    <>
      <Global />
      {...otherComponents}
    </>
  )

组件 Global 的设置部分来自 theme-ui docs尽管他们似乎根本没有解释安装后如何使用。