From 1016b5073f9a796fa18564c27aafff0cd51c3778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20D=C3=A4schle?= <daniel.daeschle@gmail.com>
Date: Thu, 17 Dec 2020 10:59:12 +0100
Subject: [PATCH] vdoc: faster initialization of dark mode (#7369)

---
 cmd/tools/vdoc-resources/dark-mode.js |  6 ++++++
 cmd/tools/vdoc-resources/doc.js       |  5 -----
 cmd/tools/vdoc.v                      | 12 +++++++-----
 3 files changed, 13 insertions(+), 10 deletions(-)
 create mode 100644 cmd/tools/vdoc-resources/dark-mode.js

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	<style>' + cfg.assets['doc_css'] + '</style>\n    <style>' + cfg.assets['normalize_css'] +
-			'</style>'
+		'\n    <style>' + cfg.assets['doc_css'] + '</style>\n    <style>' + cfg.assets['normalize_css'] +
+			'</style>\n	<script>' + cfg.assets['dark_mode_js'] + '</script>'
 	} else {
-		'\n	<link rel="stylesheet" href="' + cfg.assets['doc_css'] + '" />\n	<link rel="stylesheet" href="' +
-			cfg.assets['normalize_css'] + '" />'
+		'\n    <link rel="stylesheet" href="' + cfg.assets['doc_css'] + '" />\n	<link rel="stylesheet" href="' +
+			cfg.assets['normalize_css'] + '" />\n</style>\n    <script src="' + cfg.assets['dark_mode_js'] +
+			'"></script>'
 	}).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)