Как настроить цвет фона тела с помощью gatsby-plugin-theme-ui

Question

При создании темы Gatsby с помощью gatsby-plugin-theme-ui в документации указано, что вы можете настроить цвет фона тела, добавив его к своему объекту темы во вложенном объекте цветов. Похоже, это не имеет никакого эффекта. Другие переменные, такие как шрифты и стили, работают правильно, но я не могу изменить фон, кроме как настроить его на отдельных элементах. Есть ли дополнительный шаг, чтобы заставить это работать?

С помощью setInitialMode и определение темного режима позволило изменить фон, но это кажется хакерским решением, поскольку я не пытаюсь встроить переключение цвета темы.

Вот мой файл конфигурации темы в src/ каталог:

theme.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

index.js вsrc/gatsby-plugin-theme-ui/ каталог:

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это от темы-Ui документов, хотя они, кажется, не объясняют, как использовать после установки на всех.

Answer 2

Я все еще не могу заставить код работать. Обходной путь, который я нашел, - добавить initialColorMode: default и передать пустой объект режима в цвета. Это заставляет его правильно брать фон в этот момент от объекта цветов, но кажется хакерским.

export const theme = {
  initialColorMode: `default`,
  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: "white",
    text: "black",
    primary: "#111",
    accent: "white",
    modes: {},
  },
  sizes: {
    default: "90vw",
    max: "540px",
  },
}

Answer 3

Ты можешь использовать createGlobalStyleв компоненте Layout импортируйте его и настройте. В моем случае я использовал его, чтобы изменить цвет фона и применить градиент, вы можете проверить официальный сайт здесь.

      import React from "react"
import { LayoutWrapper } from "./styles"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    height: 100%;
    background: linear-gradient(to left, #ddd6f3 0%, #faaca8 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
`
export function Layout({ children }) {
  return (
    <LayoutWrapper>
      <GlobalStyle />
      <main>{children}</main>
    </LayoutWrapper>
  )
}

Answer 4

Оберните свойства стилей в корневой объект !!!

Это определенно проблема с пользовательским интерфейсом темы. в вашем объекте стилей в индексном файле пользовательского интерфейса темы. вам нужно обернуть стили в корень

Гэтсби-плагин-тема-пользовательский интерфейс / index.js

        color: {},
  breakpoints:[],
  styles: {
    root: { // wrap in root object. this is the way
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      minHeight: '100vh',
      backgroundColor: 'blue', // this is what you want
      h1: {
        variant: 'text.heading',
        fontSize: 5,
      },
      h2: {
        variant: 'text.heading',
        fontSize: 4,
      },
      ...rest
    },