Skip to content

Commit 4c856cd

Browse files
httpdsshttpdss
committed
🎨 Customize MkDocs theme to match site appearance and include Google Tag Manager
- Add theme overrides with custom directory structure - Implement Google Tag Manager integration (GTM-M4X52F2D) - Match styling from site/css/main.css with custom color scheme - Set dark mode as default with proper color variables - Add Inter font family and Fira Code for code blocks - Style navigation, headers, code blocks, and UI elements consistently - Include responsive design and custom scrollbar styling - Configure proper CSS custom properties for Material theme Fixes #80
1 parent ef12e07 commit 4c856cd

3 files changed

Lines changed: 326 additions & 6 deletions

File tree

‎mkdocs.yml‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,26 @@ repo_name: httpdss/struct
77
theme:
88
name: material
99
palette:
10+
# Palette toggle for dark mode (default)
11+
- media: "(prefers-color-scheme: dark)"
12+
scheme: slate
13+
primary: teal
14+
accent: indigo
15+
toggle:
16+
icon: material/brightness-4
17+
name: Switch to light mode
1018
# Palette toggle for light mode
11-
- scheme: default
12-
primary: blue
13-
accent: blue
19+
- media: "(prefers-color-scheme: light)"
20+
scheme: default
21+
primary: teal
22+
accent: indigo
1423
toggle:
1524
icon: material/brightness-7
1625
name: Switch to dark mode
17-
# Palette toggle for dark mode
26+
# Default dark mode fallback
1827
- scheme: slate
19-
primary: blue
20-
accent: blue
28+
primary: teal
29+
accent: indigo
2130
toggle:
2231
icon: material/brightness-4
2332
name: Switch to light mode
@@ -30,6 +39,7 @@ theme:
3039
- search.share
3140
- content.code.copy
3241
- content.code.annotate
42+
custom_dir: overrides
3343

3444
docs_dir: docs
3545
site_dir: site/docs
@@ -81,3 +91,6 @@ plugins:
8191
- search
8292
- git-revision-date-localized:
8393
enable_creation_date: true
94+
95+
extra_css:
96+
- stylesheets/extra.css

‎overrides/main.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{% extends "base.html" %}
2+
3+
{% block extrahead %}
4+
<!-- Google Tag Manager -->
5+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
6+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
7+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
8+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
9+
})(window,document,'script','dataLayer','GTM-M4X52F2D');</script>
10+
<!-- End Google Tag Manager -->
11+
{% endblock %}
12+
13+
{% block content %}
14+
<!-- Google Tag Manager (noscript) -->
15+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4X52F2D"
16+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
17+
<!-- End Google Tag Manager (noscript) -->
18+
19+
{{ super() }}
20+
{% endblock %}

‎overrides/stylesheets/extra.css‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
/* STRUCT MkDocs Custom Theme - Matching main site styling */
2+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500&display=swap');
3+
4+
/* CSS Custom Properties - Matching main site */
5+
:root {
6+
/* Colors from main site */
7+
--md-primary-fg-color: #00ff88;
8+
--md-primary-fg-color--light: #00ff88;
9+
--md-primary-fg-color--dark: #00cc6a;
10+
--md-accent-fg-color: #0066ff;
11+
--md-accent-fg-color--transparent: rgba(0, 102, 255, 0.1);
12+
13+
/* Dark theme colors */
14+
--md-default-bg-color: #0a0a0a;
15+
--md-default-fg-color: #ffffff;
16+
--md-default-fg-color--light: #b0b0b0;
17+
--md-default-fg-color--lighter: #888888;
18+
--md-default-fg-color--lightest: #666666;
19+
20+
/* Code colors */
21+
--md-code-bg-color: #1a1a1a;
22+
--md-code-fg-color: #00ff88;
23+
24+
/* Typography */
25+
--md-text-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
26+
--md-code-font: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace;
27+
}
28+
29+
/* Base styling overrides */
30+
[data-md-color-scheme="slate"] {
31+
--md-hue: 232;
32+
--md-default-bg-color: #0a0a0a;
33+
--md-default-fg-color: #ffffff;
34+
--md-default-fg-color--light: #b0b0b0;
35+
--md-default-fg-color--lighter: #888888;
36+
--md-default-fg-color--lightest: #666666;
37+
--md-code-bg-color: #1a1a1a;
38+
--md-code-fg-color: #00ff88;
39+
}
40+
41+
/* Body and container styling */
42+
body {
43+
font-family: var(--md-text-font);
44+
background-color: var(--md-default-bg-color);
45+
color: var(--md-default-fg-color);
46+
}
47+
48+
.md-container {
49+
background-color: var(--md-default-bg-color);
50+
}
51+
52+
.md-main {
53+
background-color: var(--md-default-bg-color);
54+
}
55+
56+
/* Header styling */
57+
.md-header {
58+
background-color: #1a1a1a;
59+
color: var(--md-default-fg-color);
60+
border-bottom: 1px solid #333333;
61+
}
62+
63+
.md-header__title {
64+
color: var(--md-primary-fg-color);
65+
font-weight: 600;
66+
}
67+
68+
/* Navigation styling */
69+
.md-nav {
70+
background-color: var(--md-default-bg-color);
71+
}
72+
73+
.md-nav__title {
74+
color: var(--md-default-fg-color);
75+
font-weight: 600;
76+
}
77+
78+
.md-nav__item .md-nav__link {
79+
color: var(--md-default-fg-color--light);
80+
}
81+
82+
.md-nav__item .md-nav__link:hover {
83+
color: var(--md-primary-fg-color);
84+
}
85+
86+
.md-nav__item .md-nav__link--active {
87+
color: var(--md-primary-fg-color);
88+
}
89+
90+
/* Content area styling */
91+
.md-content {
92+
background-color: var(--md-default-bg-color);
93+
}
94+
95+
.md-typeset {
96+
color: var(--md-default-fg-color);
97+
}
98+
99+
/* Headings */
100+
.md-typeset h1,
101+
.md-typeset h2,
102+
.md-typeset h3,
103+
.md-typeset h4,
104+
.md-typeset h5,
105+
.md-typeset h6 {
106+
color: var(--md-default-fg-color);
107+
font-weight: 600;
108+
}
109+
110+
.md-typeset h1 {
111+
color: var(--md-primary-fg-color);
112+
}
113+
114+
/* Paragraphs and text */
115+
.md-typeset p {
116+
color: var(--md-default-fg-color--light);
117+
}
118+
119+
/* Links */
120+
.md-typeset a {
121+
color: var(--md-accent-fg-color);
122+
}
123+
124+
.md-typeset a:hover {
125+
color: var(--md-primary-fg-color);
126+
}
127+
128+
/* Code styling */
129+
.md-typeset code {
130+
background-color: var(--md-code-bg-color);
131+
color: var(--md-code-fg-color);
132+
border: 1px solid #333333;
133+
border-radius: 4px;
134+
padding: 2px 8px;
135+
font-family: var(--md-code-font);
136+
}
137+
138+
.md-typeset pre {
139+
background-color: var(--md-code-bg-color);
140+
border: 1px solid #333333;
141+
border-radius: 8px;
142+
}
143+
144+
.md-typeset pre code {
145+
background: none;
146+
border: none;
147+
color: var(--md-default-fg-color);
148+
}
149+
150+
/* Search styling */
151+
.md-search__form {
152+
background-color: #1a1a1a;
153+
border: 1px solid #333333;
154+
}
155+
156+
.md-search__input {
157+
background-color: transparent;
158+
color: var(--md-default-fg-color);
159+
}
160+
161+
.md-search__input::placeholder {
162+
color: var(--md-default-fg-color--lighter);
163+
}
164+
165+
/* Footer */
166+
.md-footer {
167+
background-color: #1a1a1a;
168+
border-top: 1px solid #333333;
169+
}
170+
171+
.md-footer__meta {
172+
background-color: #0a0a0a;
173+
}
174+
175+
/* Sidebar */
176+
.md-sidebar {
177+
background-color: var(--md-default-bg-color);
178+
}
179+
180+
.md-sidebar--secondary {
181+
background-color: var(--md-default-bg-color);
182+
}
183+
184+
/* Tables */
185+
.md-typeset table:not([class]) {
186+
border: 1px solid #333333;
187+
}
188+
189+
.md-typeset table:not([class]) th {
190+
background-color: #1a1a1a;
191+
color: var(--md-default-fg-color);
192+
border-bottom: 1px solid #333333;
193+
}
194+
195+
.md-typeset table:not([class]) td {
196+
border-top: 1px solid #333333;
197+
color: var(--md-default-fg-color--light);
198+
}
199+
200+
/* Admonitions */
201+
.md-typeset .admonition {
202+
border-left: 4px solid var(--md-primary-fg-color);
203+
background-color: #1a1a1a;
204+
border-radius: 0 8px 8px 0;
205+
}
206+
207+
.md-typeset .admonition-title {
208+
color: var(--md-default-fg-color);
209+
font-weight: 600;
210+
}
211+
212+
/* Buttons and form elements */
213+
.md-button {
214+
background-color: var(--md-primary-fg-color);
215+
color: #0a0a0a;
216+
border-radius: 8px;
217+
font-weight: 500;
218+
}
219+
220+
.md-button:hover {
221+
background-color: var(--md-primary-fg-color--dark);
222+
}
223+
224+
/* Tabs */
225+
.md-tabs {
226+
background-color: #1a1a1a;
227+
border-bottom: 1px solid #333333;
228+
}
229+
230+
.md-tabs__item {
231+
color: var(--md-default-fg-color--light);
232+
}
233+
234+
.md-tabs__link:hover {
235+
color: var(--md-primary-fg-color);
236+
}
237+
238+
.md-tabs__link--active {
239+
color: var(--md-primary-fg-color);
240+
}
241+
242+
/* Custom scrollbar */
243+
::-webkit-scrollbar {
244+
width: 8px;
245+
}
246+
247+
::-webkit-scrollbar-track {
248+
background: #1a1a1a;
249+
}
250+
251+
::-webkit-scrollbar-thumb {
252+
background: #333333;
253+
border-radius: 4px;
254+
}
255+
256+
::-webkit-scrollbar-thumb:hover {
257+
background: #888888;
258+
}
259+
260+
/* Responsive adjustments */
261+
@media screen and (max-width: 76.1875em) {
262+
.md-nav--primary .md-nav__title {
263+
background-color: var(--md-primary-fg-color);
264+
color: #0a0a0a;
265+
}
266+
}
267+
268+
/* Additional Material theme overrides for better integration */
269+
.md-typeset .highlight {
270+
background-color: var(--md-code-bg-color);
271+
border: 1px solid #333333;
272+
border-radius: 8px;
273+
}
274+
275+
.md-typeset .highlight pre {
276+
background: none;
277+
border: none;
278+
}
279+
280+
/* Make sure dark mode is properly applied */
281+
@media (prefers-color-scheme: dark) {
282+
:root {
283+
--md-default-bg-color: #0a0a0a;
284+
--md-default-fg-color: #ffffff;
285+
}
286+
}
287+

0 commit comments

Comments
 (0)