Theme configuration

Layout settings#

Layout settings are the interface on which you modify your layout.

All of these settings can be changed in any settings layer, read more about settings layers.

Example#

settings: {
  toc: false,
  colors: {
    primary: '#f76957',
  }
}

About partials#

Partial settings work slightly differently than other settings:

To overwrite a partial, pass in a function (e.g. toc: () => <p>hello</p>). This will also show the partial.
Set a partial to true to show the partial, but not change its contents (e.g. toc: true).
Set a partial to false to hide the partial, but not change its contents (e.g. toc: false).
To use the settings from the upper layer. Just don't set the settings (or set it to undefined).

You can read more about layout partials in the layout settings guide.

When you overwrite a partial, you can use useGuiderPage() to get the current page information. (Read more here).

Reference#

tocboolean | () => ReactNode

The table of contents partial. Check this section for information on how to use partials.

sidebarboolean | () => ReactNode

The sidebar partial. Check this section for information on how to use partials.

navigationboolean | () => ReactNode

The navigation/header partial. Check this section for information on how to use partials.

contentFooterboolean | () => ReactNode

The content footer partial. Check this section for information on how to use partials.

pageFooterboolean | () => ReactNode

The page footer partial. Check this section for information on how to use partials.

pageEndboolean | () => ReactNode

The page end partial. Check this section for information on how to use partials.

logoboolean | () => ReactNode

The logo partial. Check this section for information on how to use partials.

pageLayout() => ReactNode

The page layout partial. Check this section for information on how to use partials.

This partial cannot be hidden, the layout wraps the entire site.

backgroundPatternboolean | string

the background pattern settings, set it flare to have a nice shard of light on your page background.

Just like partials, you can use true and false to show or hide the partial.

colorsobject

The layout colors, this is how you customize the theme colors.

Discover the theme colors in this guide.

social()

guider()