Support backgroundColor config at theme.config.tsx

[devjiwonchoi]

Description

Support config for backgroundColor in theme.config.tsx

Type

type HexColorCode = `#${string}` // can be replaced with `string`

type DocsThemeConfig = {
  // ...
  backgroundColor?: {
    dark?:
      | HexColorCode
      | { header?: HexColorCode; body?: HexColorCode; footer?: HexColorCode }
    light?:
      | HexColorCode
      | { header?: HexColorCode; body?: HexColorCode; footer?: HexColorCode }
  }
}

Usage

// theme.config.tsx

import { DocsThemeConfig } from 'nextra-theme-docs'

const config: DocsThemeConfig = {
  // ...
  backgroundColor: {
    // changes color of header, body, and footer at once
    dark: '#000',
    light: '#fff',
  },

  // or deeper config

  backgroundColor: {
    dark: {
      header: '#000', // NavBar
      body: '#000',
      footer: '#000',
    },
    light: {
      header: '#fff', // NavBar
      body: '#fff',
      footer: '#fff',
    },
  },
}

export default config

Related Issues

#820 #1817 #2122

[yan-pi]

I think it should support css and tailwind configuration too.

[hariria]

The best way right now is likely via css override. See this example from Nextra v3

https://github.com/shuding/nextra/blob/v3/examples/swr-site/styles.css