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.