0
# Theme Configuration
1
2
Complete customization of the Material Design theme including visual appearance, navigation behavior, typography, and user interface features. The theme system provides extensive configuration options through the `mkdocs.yml` file.
3
4
## Capabilities
5
6
### Basic Theme Setup
7
8
Core theme configuration that activates Material Design styling and sets fundamental appearance options.
9
10
```yaml { .api }
11
theme:
12
name: material # Required: Activates Material theme
13
language: en # Optional: UI language (default: en)
14
direction: ltr # Optional: Text direction (ltr/rtl, default: ltr)
15
custom_dir: overrides # Optional: Custom template directory
16
```
17
18
### Color Palette Configuration
19
20
Comprehensive color theming with support for light/dark mode switching and accent colors.
21
22
```yaml { .api }
23
theme:
24
palette:
25
# Single palette
26
- scheme: default # Color scheme (default/slate)
27
primary: indigo # Primary color
28
accent: indigo # Accent color
29
30
# Multi-palette with toggle
31
- scheme: default
32
primary: indigo
33
accent: indigo
34
toggle:
35
icon: material/brightness-7
36
name: Switch to dark mode
37
- scheme: slate
38
primary: indigo
39
accent: indigo
40
toggle:
41
icon: material/brightness-4
42
name: Switch to light mode
43
```
44
45
**Available Colors**: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, blue grey, black, white
46
47
### Typography Configuration
48
49
Font configuration for text and code elements with support for Google Fonts integration.
50
51
```yaml { .api }
52
theme:
53
font:
54
text: Roboto # Text font family
55
code: Roboto Mono # Code font family
56
```
57
58
**Popular Font Options**:
59
- Text: Roboto, Open Sans, Ubuntu, Source Sans Pro, Noto Sans
60
- Code: Roboto Mono, JetBrains Mono, Fira Code, Source Code Pro
61
62
### Navigation Features
63
64
Advanced navigation functionality including tabs, sections, expansion, and search integration.
65
66
```yaml { .api }
67
theme:
68
features:
69
# Navigation
70
- navigation.tabs # Enable top-level tabs
71
- navigation.tabs.sticky # Sticky navigation tabs
72
- navigation.sections # Enable navigation sections
73
- navigation.expand # Expand navigation by default
74
- navigation.prune # Prune navigation for large sites
75
- navigation.indexes # Enable section index pages
76
- navigation.top # Back-to-top button
77
- navigation.footer # Footer navigation
78
- navigation.tracking # Anchor tracking in URL
79
80
# Table of contents
81
- toc.follow # Follow table of contents
82
- toc.integrate # Integrate TOC in navigation
83
84
# Search
85
- search.highlight # Highlight search terms
86
- search.share # Search sharing button
87
- search.suggest # Search suggestions
88
89
# Header
90
- header.autohide # Auto-hide header on scroll
91
92
# Content
93
- content.tabs.link # Link content tabs
94
- content.tooltips # Enable tooltips
95
- content.footnote.tooltips # Footnote tooltips
96
- content.code.copy # Code copy button
97
- content.code.select # Code selection
98
- content.code.annotate # Code annotations
99
```
100
101
### Icon Configuration
102
103
Icon system configuration including logo, favicon, and icon font selection.
104
105
```yaml { .api }
106
theme:
107
icon:
108
logo: material/library # Logo icon
109
repo: fontawesome/brands/git-alt # Repository icon
110
edit: material/pencil # Edit icon
111
view: material/eye # View icon
112
admonition:
113
note: octicons/tag-16
114
abstract: octicons/checklist-16
115
info: octicons/info-16
116
tip: octicons/squirrel-16
117
success: octicons/check-16
118
question: octicons/question-16
119
warning: octicons/alert-16
120
failure: octicons/x-circle-16
121
danger: octicons/zap-16
122
bug: octicons/bug-16
123
example: octicons/beaker-16
124
quote: octicons/quote-16
125
```
126
127
### Logo and Favicon
128
129
Brand identity configuration for logos and favicons.
130
131
```yaml { .api }
132
theme:
133
logo: assets/logo.png # Logo image path
134
favicon: assets/favicon.png # Favicon path
135
```
136
137
## Usage Examples
138
139
### Complete Theme Configuration
140
141
```yaml
142
theme:
143
name: material
144
language: en
145
direction: ltr
146
features:
147
- navigation.tabs
148
- navigation.sections
149
- navigation.expand
150
- navigation.top
151
- search.highlight
152
- search.share
153
- content.code.copy
154
palette:
155
- scheme: default
156
primary: indigo
157
accent: indigo
158
toggle:
159
icon: material/brightness-7
160
name: Switch to dark mode
161
- scheme: slate
162
primary: indigo
163
accent: indigo
164
toggle:
165
icon: material/brightness-4
166
name: Switch to light mode
167
font:
168
text: Roboto
169
code: Roboto Mono
170
icon:
171
logo: material/library
172
repo: fontawesome/brands/github
173
favicon: assets/favicon.png
174
```
175
176
### Minimal Theme Configuration
177
178
```yaml
179
theme:
180
name: material
181
palette:
182
scheme: default
183
primary: blue
184
```
185
186
### Advanced Corporate Theme
187
188
```yaml
189
theme:
190
name: material
191
custom_dir: overrides
192
language: en
193
features:
194
- navigation.tabs
195
- navigation.tabs.sticky
196
- navigation.sections
197
- navigation.expand
198
- navigation.top
199
- search.highlight
200
- search.share
201
- content.code.copy
202
- content.tabs.link
203
palette:
204
scheme: default
205
primary: custom
206
accent: custom
207
font:
208
text: Source Sans Pro
209
code: JetBrains Mono
210
logo: assets/corporate-logo.svg
211
favicon: assets/corporate-favicon.ico
212
```