Skip to content

Commit 8aec525

Browse files
Monil-KTXMonil-KTX
authored
Fix/make theme related changes (#207)
* fix: remove unnecessary line in analytics event handling * feat: add theme persistence functionality and integrate with MkDocs
1 parent aa888d4 commit 8aec525

File tree

4 files changed

+107
-69
lines changed

4 files changed

+107
-69
lines changed

‎docs/js/search-tracking.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,7 @@
101101
// pageType, // docs / blog / marketing (uncomment if needed)
102102
...payload,
103103
}),
104-
});
105104
});
106-
107105
} catch (error) {
108106
console.warn("Analytics API error:", error);
109107
}

‎docs/js/theme.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// Simple theme persistence - leverages MkDocs Material's built-in theme system
2+
(function () {
3+
// Apply saved theme immediately to prevent flash
4+
function applySavedTheme() {
5+
const savedScheme = localStorage.getItem("theme-preference");
6+
if (savedScheme) {
7+
document.documentElement.setAttribute(
8+
"data-md-color-scheme",
9+
savedScheme
10+
);
11+
// Set the correct radio button as checked
12+
var paletteForm = document.querySelector(
13+
'form[data-md-component="palette"]'
14+
);
15+
if (paletteForm) {
16+
var inputs = paletteForm.querySelectorAll('input[name="__palette"]');
17+
inputs.forEach(function (input) {
18+
if (input.getAttribute("data-md-color-scheme") === savedScheme) {
19+
input.checked = true;
20+
} else {
21+
input.checked = false;
22+
}
23+
});
24+
}
25+
}
26+
}
27+
28+
// Save theme preference when changed
29+
function attachPaletteListeners() {
30+
var paletteForm = document.querySelector(
31+
'form[data-md-component="palette"]'
32+
);
33+
if (!paletteForm) return false;
34+
// avoid attaching twice to the same form
35+
if (paletteForm.getAttribute("data-theme-listeners") === "1") return true;
36+
var inputs = paletteForm.querySelectorAll('input[name="__palette"]');
37+
inputs.forEach(function (input) {
38+
input.addEventListener("change", function () {
39+
if (this.checked) {
40+
var scheme = this.getAttribute("data-md-color-scheme");
41+
document.documentElement.setAttribute("data-md-color-scheme", scheme);
42+
localStorage.setItem("theme-preference", scheme);
43+
}
44+
});
45+
});
46+
paletteForm.setAttribute("data-theme-listeners", "1");
47+
return true;
48+
}
49+
50+
// Observe changes to the documentElement attribute for scheme changes
51+
function observeSchemeAttribute() {
52+
const observer = new MutationObserver(function (mutations) {
53+
mutations.forEach(function (mutation) {
54+
if (mutation.attributeName === "data-md-color-scheme") {
55+
const scheme = document.documentElement.getAttribute(
56+
"data-md-color-scheme"
57+
);
58+
if (scheme) {
59+
localStorage.setItem("theme-preference", scheme);
60+
}
61+
}
62+
});
63+
});
64+
observer.observe(document.documentElement, {
65+
attributes: true,
66+
attributeFilter: ["data-md-color-scheme"],
67+
});
68+
}
69+
70+
// Watch the body for insertions/replacements of the palette form and re-attach listeners
71+
function observeBodyForPalette() {
72+
// Try attach immediately in case it's already present
73+
attachPaletteListeners();
74+
75+
const bodyObserver = new MutationObserver(function (mutations) {
76+
// If nodes are added/removed we attempt to (re)attach listeners
77+
for (var i = 0; i < mutations.length; i++) {
78+
var mutation = mutations[i];
79+
if (
80+
mutation.type === "childList" &&
81+
(mutation.addedNodes.length || mutation.removedNodes.length)
82+
) {
83+
// small debounce: try attach; attachPaletteListeners is idempotent
84+
attachPaletteListeners();
85+
}
86+
}
87+
});
88+
bodyObserver.observe(document.body || document.documentElement, {
89+
childList: true,
90+
subtree: true,
91+
});
92+
}
93+
94+
// Setup theme persistence (apply + observe)
95+
function setupThemePersistence() {
96+
applySavedTheme();
97+
observeSchemeAttribute();
98+
observeBodyForPalette();
99+
}
100+
101+
// Initial setup
102+
setupThemePersistence();
103+
104+
// Re-apply on every DOMContentLoaded (instant navigation)
105+
document.addEventListener("DOMContentLoaded", setupThemePersistence);
106+
})();

‎docs/js/zinc.js‎

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -150,70 +150,3 @@
150150
handleTracking();
151151
})();
152152

153-
// Simple theme persistence - leverages MkDocs Material's built-in theme system
154-
(function() {
155-
// Apply saved theme immediately to prevent flash
156-
function applySavedTheme() {
157-
const savedScheme = localStorage.getItem('theme-preference');
158-
if (savedScheme) {
159-
document.documentElement.setAttribute('data-md-color-scheme', savedScheme);
160-
// Set the correct radio button as checked
161-
var paletteForm = document.querySelector('form[data-md-component="palette"]');
162-
if (paletteForm) {
163-
var inputs = paletteForm.querySelectorAll('input[name="__palette"]');
164-
inputs.forEach(function(input) {
165-
if (input.getAttribute('data-md-color-scheme') === savedScheme) {
166-
input.checked = true;
167-
} else {
168-
input.checked = false;
169-
}
170-
});
171-
}
172-
}
173-
}
174-
175-
// Save theme preference when changed
176-
function observeThemeChanges() {
177-
// Attach change event to theme radio buttons
178-
var paletteForm = document.querySelector('form[data-md-component="palette"]');
179-
if (paletteForm) {
180-
var inputs = paletteForm.querySelectorAll('input[name="__palette"]');
181-
inputs.forEach(function(input) {
182-
input.addEventListener('change', function() {
183-
if (this.checked) {
184-
var scheme = this.getAttribute('data-md-color-scheme');
185-
document.documentElement.setAttribute('data-md-color-scheme', scheme);
186-
localStorage.setItem('theme-preference', scheme);
187-
}
188-
});
189-
});
190-
}
191-
// Also keep the MutationObserver for manual changes
192-
const observer = new MutationObserver(function(mutations) {
193-
mutations.forEach(function(mutation) {
194-
if (mutation.attributeName === 'data-md-color-scheme') {
195-
const scheme = document.documentElement.getAttribute('data-md-color-scheme');
196-
if (scheme) {
197-
localStorage.setItem('theme-preference', scheme);
198-
}
199-
}
200-
});
201-
});
202-
observer.observe(document.documentElement, {
203-
attributes: true,
204-
attributeFilter: ['data-md-color-scheme']
205-
});
206-
}
207-
208-
// Setup theme persistence (apply + observe)
209-
function setupThemePersistence() {
210-
applySavedTheme();
211-
observeThemeChanges();
212-
}
213-
214-
// Initial setup
215-
setupThemePersistence();
216-
217-
// Re-apply on every DOMContentLoaded (instant navigation)
218-
document.addEventListener('DOMContentLoaded', setupThemePersistence);
219-
})();

‎mkdocs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ extra_javascript:
2323
# - js/vector_co.js
2424
- js/search-close-minimal.js
2525
- js/search-tracking.js
26+
- js/theme.js
2627
# - js/toc-highlight.js
2728
- https://buttons.github.io/buttons.js
2829
# - js/reo.js

0 commit comments

Comments
 (0)