Config

Config file define settings for a theme such as typography, color schemes, and layout options.


Overview

The config.json file is an integral part of a theme’s structure, allowing for the customization of various theme settings. This file contains settings that control aspects such as typography, color schemes, and layout options.

File Structure

The config.json file is typically located in the config directory of the theme:

theme/
├── config.json

Theme Metadata

The metadata section of the config.json file provides essential information about the theme.

{
    "name": "Theme Name",
    "description": "Theme Description",
    "version": "Theme Version",
    "author": "Theme Author",
    "defaultTemplates": {
        "blog": "Path to Blog Template",
        "post": "Path to Post Template"
    },
    "sections": {
        // Theme customization sections go here
    }
}

Fields

  • name: The official name of the theme.
  • description: A brief description of the theme.
  • version: The current version number of the theme.
  • author: The name of the theme’s author or developer.
  • defaultTemplates: An object defining the default templates for different types of pages.
  • sections: An object containing the customizable sections of the theme.

Theme Sections

Theme sections are used to group related settings together. Each section can contain multiple settings.

Example Section: Color Scheme

{
    "sections": {
        "colorScheme": {
            "name": "Color Scheme",
            "description": "Customize the color scheme of the theme.",
            "fields": [
                  {
                    "id": "primaryColor",
                    "name": "Primary Color",
                    "type": "color",
                    "cssVar": "primary-color",
                    "defaultValue": "#1a1b1b",
                    "description": "The main color used for buttons, links, and other interactive elements."
                },
                {
                    "id": "secondaryColor",
                    "name": "Secondary Color",
                    "type": "color",
                    "cssVar": "secondary-color",
                    "defaultValue": "#FFFFFF",
                    "description": "A secondary color used for borders, backgrounds, and other non-interactive elements."
                },
            ]
        }
    }
}

Default Templates

The defaultTemplates object maps different types of pages to their respective default template files.

Fields

  • blog: Path to the default blog page template.
  • post: Path to the default static page template.