Global Settings

Every WriteDocs documentation site requires a config.json file to handle the essential configuration settings. Explore the available attributes below to get started.

Key details

Click on each key on the JSON examples below (indicated by the Click here! tag below) to see details about each.

Basic version

1{
2  "websiteName": "MyCompany Docs",
3  "description": "Project Description",
4  "images": {
5    "logo": "media/logo.png",
6    "favicon": "media/favicon.ico"
7  },
8  "styles": {
9    "mainColor": "#3778fd"
10  },
11  "homepage": "/introduction",
12  "navbar": [
13    {
14      "label": "Guides",
15      "sidebarRef": "docs"
16    }
17  ],
18  "sidebars": [
19    {
20      "sidebarRef": "docs",
21      "categories": [
22        {
23          "categoryName": "Getting Started",
24          "pages": [
25            "getting-started/overview",
26            {
27              "page": "getting-started/quickstart/quickstart",
28              "groupName": "Quickstart",
29              "subpages": [
30                "getting-started/quickstart/beginners-guide"
31              ]
32            },
33            "getting-started/global-settings"
34          ]
35        }
36      ]
37    }
38  ]
39}
Click here!

Full Version

1{
2  "websiteName": "MyCompany Docs",
3  "description": "Project Description",
4  "images": {
5    "logo": "media/logo.png",
6    "favicon": "media/favicon.ico",
7    "darkLogo": "",
8    "metadata": "media/metadata-cover.png",
9    "background": "media/background.png",
10    "darkBackground": "media/darkmode-background.png"
11  },
12  "styles": {
13    "mainColor": "#3778fd",
14    "darkModeMainColor": "",
15    "navbarColor": "#000",
16    "navbarDarkModeColor": "#3778fd",
17    "backgroundDarkModeColor": "#000",
18    "logoSize": "large",
19    "pagination": false
20  },
21  "colorMode": {
22    "default": "dark",
23    "switchOff": true
24  },
25  "apiFiles": [
26    "example.yml"
27  ],
28  "codeLanguages": [
29    "python",
30    "javascript"
31  ],
32  "homepage": "/introduction",
33  "changelog": true,
34  "externalLinks": [
35    {
36      "link": "https://github.com/orgs/writedocs/repositories",
37      "name": "Github",
38      "style": "button"
39    }
40  ],
41  "integrations": {
42    "gtag": "replace_with_your_gtag",
43    "posthog": {
44      "api_key": "replace_with_your_posthog_api_key",
45      "api_host": "replace_with_your_posthog_api_host"
46    },
47    "askAi": {
48      "freshdesk": "WIDGET_ID",
49      "helpscout": "BEACON_ID",
50      "hubspot": "HUB_ID",
51      "intercom": "APP_ID",
52      "zendesk": "SNIPPET_KEY"
53    }
54  },
55  "navbar": [
56    {
57      "label": "Guides",
58      "sidebarRef": "docs"
59    },
60    {
61      "label": "API Reference",
62      "dropdown": [
63        {
64          "label": "v1.0",
65          "sidebarRef": "apiReference"
66        }
67      ]
68    }
69  ],
70  "sidebars": [
71    {
72      "sidebarRef": "docs",
73      "categories": [
74        {
75          "categoryName": "Getting Started",
76          "pages": [
77            "getting-started/overview",
78            {
79              "page": "getting-started/quickstart/quickstart",
80              "groupName": "Quickstart",
81              "subpages": [
82                "getting-started/quickstart/beginners-guide"
83              ]
84            },
85            "getting-started/global-settings"
86          ]
87        }
88      ]
89    },
90    {
91      "sidebarRef": "apiReference",
92      "categories": [
93        {
94          "categoryName": "Example",
95          "pages": [
96            "reference/example/get-items",
97            "reference/example/create-item"
98          ]
99        }
100      ]
101    }
102  ]
103}
Click here!

Custom CSS

WriteDocs allows you to customize your documentation with your own CSS styles. You can add your configurations to the custom.css file, in the root of your project.

Custom CSS

h1 {
  color: #0029F5;
}

Darkmode: To change darkmode CSS configurations, follow the example below, adding data-theme dark before the element/class/id:

[data-theme="dark"]
  h1 {
    color: #0029F5;
}

Creating CSS variables: You can use the following examples to create your own variables:

Light Mode

:root {
  --my-new-color: #0029F5;
}

Dark Mode

[data-theme="dark"] {
  --my-new-color: #0029F5;
}