Skip to main content

Theme Configuration

createTheme()​

The createTheme() function is a utility function that creates a new theme configuration object by merging the provided theme configuration with a base theme. The resulting theme configuration object can then be used to configure the look and feel of your site.

To use the createTheme() function, you will need to invoke it in your theme.ts file located in your source directory.

The createTheme() function takes in two optional arguments:

  • A theme configuration object: This is where you can set some or all of the theme properties.
  • A base theme: This is an optional argument that can be used to extend a theme from. If not provided, it defaults to a blank theme.

Theme Configuration Object​

The theme configuration object is where you can set properties for your theme. The following properties can be set in the theme configuration object:

  • contentStyleSheet: (ContentStyleSheet) Content stylesheet.
caution

contentStyleSheet is marked as in line for deprecation. We recommend avoid using this property.

  • _document: (object)
    • Head: (ComponentType) Component to be added to the document's Head
  • Footer: (ComponentType) Site Footer Component
  • globalStyleSheet: (GlobalStylesProps['styles'] | undefined) Global stylesheet. Styles applied globally.
  • Header: (ComponentType) Site Header Component
  • MUIThemeProvider: (ComponentType) Material UI Theme Provider Component
  • OnPageChangeLoadingIndicator: (ComponentType<{ children: ReactNode }>) On Page Change Loading Indicator Component. Will be displayed while pages are transitioning.
  • options: (GenericRecord | undefined) Theme options.
  • pageTypes: (object) Page Types Templates. It defines a set of templates for each page type. Contains a required "default" named template per page type.
    • article: (object)
      • templates: ([IArticleTemplate & DefaultNameRecord, ...Array<IArticleTemplate>]) Article page type templates array. A default template is required as first member of array.
      • getTemplate: (GetArticleTemplate) Article Template Getter Function. Defines logic to get article templates.
    • author: (object)
      • templates: ([IAuthorTemplate & DefaultNameRecord, ...Array<IAuthorTemplate>]) Author page type templates array. A default template is required as first member of array.
      • getTemplate: (GetAuthorTemplate) Author Template Getter Function. Defines logic to get author templates.
    • category: (object)
      • templates: ([ICategoryTemplate & DefaultNameRecord, ...Array<ICategoryTemplate>]) Category page type templates array. A default template is required as first member of array.
      • getTemplate: (GetCategoryTemplate) Category Template Getter Function. Defines logic to get category templates.
    • page: (object)
      • templates: ([IPageTemplate & DefaultNameRecord, ...Array<IPageTemplate>]) Page page type templates array. A default template is required as first member of array.
      • getTemplate: (GetPageTemplate) Page Template Getter Function. Defines logic to get page templates.
    • tag: (object)
      • templates: ([ITagTemplate & DefaultNameRecord, ...Array<ITagTemplate>]) Tag page type templates array. A default template is required as first member of array.
      • getTemplate: (GetTagTemplate) Tag Template Getter Function. Defines logic to get tag templates.
  • blocks: (object | undefined)
    • components: (Partial<Components> | undefined) Custom block components

Base Theme​

The base theme is an optional argument that is used as a starting point for your theme. It is a theme configuration that you can extend from. If no base theme is provided, a blank theme will be used.

Example Usage​

import createTheme from '@orgnc/core/lib/themes/createTheme';
import baseTheme from 'path/to/baseTheme';

const theme = createTheme(
  {
    // Theme configuration here (optional)
  },
  baseTheme, // Base theme here (optional)
);

export default theme;