diff --git a/cmd/tools/vdoc-resources/dark-mode.js b/cmd/tools/vdoc-resources/dark-mode.js
new file mode 100644
index 0000000000..075dbb539c
--- /dev/null
+++ b/cmd/tools/vdoc-resources/dark-mode.js
@@ -0,0 +1,6 @@
+(function() {
+ var html = document.getElementsByTagName('html')[0];
+ if (localStorage.getItem('dark-mode') === 'true') {
+ html.classList.add('dark');
+ }
+})();
diff --git a/cmd/tools/vdoc-resources/doc.js b/cmd/tools/vdoc-resources/doc.js
index 4ac62e61eb..4033799ca5 100644
--- a/cmd/tools/vdoc-resources/doc.js
+++ b/cmd/tools/vdoc-resources/doc.js
@@ -64,7 +64,6 @@ function setupMobileToggle() {
}
function setupDarkMode() {
- var html = document.getElementsByTagName('html')[0];
var darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', function() {
html.classList.toggle('dark');
@@ -72,10 +71,6 @@ function setupDarkMode() {
localStorage.setItem('dark-mode', isDarkModeEnabled);
darkModeToggle.setAttribute('aria-checked', isDarkModeEnabled)
});
- if (localStorage.getItem('dark-mode') === 'true') {
- html.classList.add('dark');
- }
-
// Check if css var() is supported and enable dark mode toggle
if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
darkModeToggle.style.visibility = 'unset';
diff --git a/cmd/tools/vdoc.v b/cmd/tools/vdoc.v
index 03d47cdcc6..79afb0212c 100644
--- a/cmd/tools/vdoc.v
+++ b/cmd/tools/vdoc.v
@@ -35,7 +35,7 @@ enum HighlightTokenTyp {
}
const (
- css_js_assets = ['doc.css', 'normalize.css', 'doc.js']
+ css_js_assets = ['doc.css', 'normalize.css', 'doc.js', 'dark-mode.js']
allowed_formats = ['md', 'markdown', 'json', 'text', 'stdout', 'html', 'htm']
res_path = os.resource_abs_path('vdoc-resources')
vexe = pref.vexe_path()
@@ -487,11 +487,12 @@ fn (cfg DocConfig) gen_html(idx int) string {
header_name).replace('{{ version }}', version).replace('{{ light_icon }}', cfg.assets['light_icon']).replace('{{ dark_icon }}',
cfg.assets['dark_icon']).replace('{{ menu_icon }}', cfg.assets['menu_icon']).replace('{{ head_assets }}',
if cfg.inline_assets {
- '\n \n '
+ '\n \n \n '
} else {
- '\n \n '
+ '\n \n \n\n '
}).replace('{{ toc_links }}', if cfg.is_multi || cfg.docs.len > 1 {
modules_toc_str
} else {
@@ -649,6 +650,7 @@ fn (mut cfg DocConfig) render_static() {
'doc_css': cfg.get_resource(css_js_assets[0], true)
'normalize_css': cfg.get_resource(css_js_assets[1], true)
'doc_js': cfg.get_resource(css_js_assets[2], !cfg.serve_http)
+ 'dark_mode_js': cfg.get_resource(css_js_assets[3], !cfg.serve_http)
'light_icon': cfg.get_resource('light.svg', true)
'dark_icon': cfg.get_resource('dark.svg', true)
'menu_icon': cfg.get_resource('menu.svg', true)