DocServe/teedoc.gitee.io-main/docs/get_started/en/plugins/themes.md

---

title: teedoc theme plugin keywords: teedoc, theme plugin, themes, plugin

desc: teedoc theme plugin

teedoc-plugin-theme-default: default theme plugin

Plugin configuration

Configure the plugin in site_config.json

    "plugins": {
        "teedoc-plugin-theme-default":{
            "from": "pypi",
            "config": {
                "dark": true,
                "default_dark": false,
                "mobile_navbar_collapsed": true,
                "toc_depth": 4,
                "env":{
                    "main_color": "#4caf7d",
                    "sidebar_width": "300px"
                },
                "css": "/static/css/custom.css",
                "js": "/static/js/custom.js",
                "code_highlight_css":  "/static/css/prism.css",
                "code_highlight_js": "/static/js/prism.js"
            }
        }
    }

• dark: support dark mode switch
• default_dark: default use dark mode
• mobile_navbar_collapsed: collapse navbar by default on mobile phone
• toc_depth: table of article conent's depth, default to 4, that is show H1~H4 headers
• show_print_page: show print page button, visitor click or push Ctrl+P to print
• main_color: theme main color
• sidebar_width: sidebar default width, format can be like"300px", 300, "30%"
• css: css file URL, which can override the default style and will be inserted into the head tag of the page
• js: js file URL, can write js program, it will be loaded at the end of the page

The default code highlighting uses prismjs, and the support of some common languages ​​is checked by default. js file + css file totals about 100KiB, if you need the code If you can’t highlight, or want to save traffic or reduce loading time, you can go to here Check the default check and check the language and Function, finally get a css file and a js file in the static/js directory, and then set the URL in site_config.json:

    "route": {
        "assets": {
            "/static/": "static"
        }
    }

this config will due to files in static dir will be copied to static dir of out dir.

• code_highlight_css: code highlighting css file URL, will replace the default highlighting css file, and will be inserted into the head tag of the page
• code_highlight_js: code highlighting js file URL, will replace the default highlighting js file, and will be loaded at the end of the page

Supports day and night modes. The night mode will add a dark class to the body. If you want the css style of the night mode, you can modify it based on this class name

class support

The theme supports several commonly used class and id, which can be set in config.json(/config.yaml) or the class and id keywords in the .md file. You can use this style directly

For example, set in config.json

{
     "class": "md_page",
     "navbar": {
         ...
     }
}

Or add in the header of the md file

---
title: title
class: heading_no_counter
---

Then the html tags of all generated pages under this document will contain this class. For example, md_page will make the content displayed in the center instead of left-aligned

class has:

• md_page: Ordinary markdown files are rendered into html pages, you can add this class, it will be displayed in the center instead of left-aligned
• heading_no_counter: Cancel automatic heading numbering