Skip to content

About This Site

Build Tool

Tool
MkDocs
Theme
Material for MkDocs
Programming Language
Python3
Markdown

Installation

Text Only
1
pip install mkdocs-material mkdocs-git-revision-date-localized-plugin mkdocs-git-authors-plugin mkdocs-rss-plugin

Custom Color Scheme

Important

You should check the following information before modifing default settings

Offical Document of Material for MkDocs

1. insert a new file in as /docs/stylesheets/extra.css with the following css code

CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
:root > * {
    --md-primary-fg-color:        #b62172;
    --md-primary-fg-color--light: #c31176;
    --md-primary-fg-color--dark:  #ec1e93;
}

[data-md-color-scheme="slate"] {
    --md-hue: 330;

    // Default color shades
    --md-default-fg-color:             hsla(var(--md-hue), 75%, 100%, 1);
    --md-default-fg-color--light:      hsla(var(--md-hue), 75%, 100%, 0.85);
    --md-default-fg-color--lighter:    hsla(var(--md-hue), 75%, 100%, 0.65);
    --md-default-fg-color--lightest:   hsla(var(--md-hue), 75%, 100%, 0.35);
    --md-default-bg-color:             hsla(var(--md-hue), 5%, 0%, 1);
    --md-default-bg-color--light:      hsla(var(--md-hue), 5%, 0%, 0.80);
    --md-default-bg-color--lighter:    hsla(var(--md-hue), 5%, 0%, 0.40);
    --md-default-bg-color--lightest:   hsla(var(--md-hue), 5%, 0%, 0.20);

    // Code color shades
    --md-code-fg-color:                hsla(var(--md-hue), 18%, 90%, 1);
    --md-code-bg-color:                hsla(var(--md-hue), 0%, 8%, 1);

    // Code highlighting color shades
    --md-code-hl-color:                hsla( 90, 100%, 50%, 1);
    --md-code-hl-number-color:         hsla(180, 100%, 70%, 1);
    --md-code-hl-special-color:        hsla(300, 100%, 50%, 1);
    --md-code-hl-function-color:       hsla(200, 100%, 50%, 1);
    --md-code-hl-constant-color:       hsla(180, 100%, 70%, 1);
    --md-code-hl-keyword-color:        hsla( 30, 100%, 70%, 1);
    --md-code-hl-string-color:         hsla( 30, 100%, 70%, 1);
    --md-code-hl-name-color:           var(--md-default-fg-color);
    --md-code-hl-operator-color:       hsla(180, 100%, 50%, 1);
    --md-code-hl-punctuation-color:    var(--md-default-fg-color);
    --md-code-hl-comment-color:        hsla(150, 100%, 50%, 1);
    --md-code-hl-generic-color:        var(--md-default-fg-color);
    --md-code-hl-variable-color:       var(--md-default-fg-color);

    // Admonition color shades
    --md-admonition-fg-color:          var(--md-default-fg-color);
    --md-admonition-bg-color:          var(--md-default-bg-color);   

    // Footer color shades
    --md-footer-bg-color:              hsla(var(--md-hue), 10%, 0%, 1);
    --md-footer-bg-color--dark:        hsla(var(--md-hue), 10%, 0%, 1);    
}

.md-grid {
  max-width: initial;
}

2. insert the following option into /mkdocs.yml.

Text Only
1
2
extra_css:
  - stylesheets/extra.css

Configuration

Here is my configuration file. You fill in your informations.

Text Only
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
site_name: _______
copyright: _______
repo_name: _______
repo_url: _______
edit_uri: _______

nav:
    - _______
    - _______
    - _______

plugins:
  - search
  - git-authors:
      show_contribution: true
  - git-revision-date-localized:
      enable_creation_date: true
      type: iso_date

theme:
  name: material

  logo: favicon_io/android-chrome-512x512.png
  favicon: favicon_io/favicon-32x32.png

  icon:
      repo: fontawesome/brands/github

  palette:

    # Palette toggle for dark mode
    - scheme: slate
      toggle:
        icon: material/brightness-7
        name: Switch to light mode

    # Palette toggle for light mode
    - scheme: default
      toggle:
        icon: material/weather-night
        name: Switch to dark mode

  language: en

  features:
    - navigation.instant
    - navigation.tracking
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.expand
    - navigation.prune
    - navigation.indexes
    - navigation.top
    - search.suggest
    - search.highlight
    - header.autohide
    - content.code.annotate 
    - content.tabs.link
    - toc.integrate
    - toc.follow

extra_css:
  - stylesheets/extra.css

extra:

  social:
      - icon: fontawesome/brands/github
        link: https://github.com/ _______
        name: Visit My _______ 's Github repository

markdown_extensions:

  # Python Markdown
  - abbr
  - admonition
  - attr_list
  - def_list
  - footnotes
  - md_in_html
  - toc:
      permalink: true

  # Python Markdown Extensions
  - pymdownx.arithmatex:
      generic: true
  - pymdownx.betterem:
      smart_enable: all
  - pymdownx.caret
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tilde
  - pymdownx.snippets
Last update: 2023-06-28
Created: 2023-06-28