vieter-v
/
v
2
0
Fork 0
Code Issues Pull Requests Releases Activity

vdoc: faster initialization of dark mode (#7369)

pull/7371/head
Daniel Däschle 2020-12-17 10:59:12 +01:00 committed by GitHub
parent 9528efe532
commit 1016b5073f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cmd/tools/vdoc-resources/dark-mode.js 100644
View File

@ -0,0 +1,6 @@
(function() {
var html = document.getElementsByTagName('html')[0];
if (localStorage.getItem('dark-mode') === 'true') {
html.classList.add('dark');
}
})();

5
cmd/tools/vdoc-resources/doc.js
View File

@ -64,7 +64,6 @@ function setupMobileToggle() {
} }
function setupDarkMode() { function setupDarkMode() {
var html = document.getElementsByTagName('html')[0];
var darkModeToggle = document.getElementById('dark-mode-toggle'); var darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', function() { darkModeToggle.addEventListener('click', function() {
html.classList.toggle('dark'); html.classList.toggle('dark');
@ -72,10 +71,6 @@ function setupDarkMode() {
localStorage.setItem('dark-mode', isDarkModeEnabled); localStorage.setItem('dark-mode', isDarkModeEnabled);
darkModeToggle.setAttribute('aria-checked', 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 // Check if css var() is supported and enable dark mode toggle
if (window.CSS && CSS.supports('color', 'var(--fake-var)')) { if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
darkModeToggle.style.visibility = 'unset'; darkModeToggle.style.visibility = 'unset';

8
cmd/tools/vdoc.v
View File

@ -35,7 +35,7 @@ enum HighlightTokenTyp {
} }
const ( 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'] allowed_formats = ['md', 'markdown', 'json', 'text', 'stdout', 'html', 'htm']
res_path = os.resource_abs_path('vdoc-resources') res_path = os.resource_abs_path('vdoc-resources')
vexe = pref.vexe_path() vexe = pref.vexe_path()
@ -488,10 +488,11 @@ fn (cfg DocConfig) gen_html(idx int) string {
cfg.assets['dark_icon']).replace('{{ menu_icon }}', cfg.assets['menu_icon']).replace('{{ head_assets }}', cfg.assets['dark_icon']).replace('{{ menu_icon }}', cfg.assets['menu_icon']).replace('{{ head_assets }}',
if cfg.inline_assets { if cfg.inline_assets {
'\n <style>' + cfg.assets['doc_css'] + '</style>\n <style>' + cfg.assets['normalize_css'] + '\n <style>' + cfg.assets['doc_css'] + '</style>\n <style>' + cfg.assets['normalize_css'] +
'</style>' '</style>\n <script>' + cfg.assets['dark_mode_js'] + '</script>'
} else { } else {
'\n <link rel="stylesheet" href="' + cfg.assets['doc_css'] + '" />\n <link rel="stylesheet" href="' + '\n <link rel="stylesheet" href="' + cfg.assets['doc_css'] + '" />\n <link rel="stylesheet" href="' +
cfg.assets['normalize_css'] + '" />' 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 { }).replace('{{ toc_links }}', if cfg.is_multi || cfg.docs.len > 1 {
modules_toc_str modules_toc_str
} else { } else {
@ -649,6 +650,7 @@ fn (mut cfg DocConfig) render_static() {
'doc_css': cfg.get_resource(css_js_assets[0], true) 'doc_css': cfg.get_resource(css_js_assets[0], true)
'normalize_css': cfg.get_resource(css_js_assets[1], true) 'normalize_css': cfg.get_resource(css_js_assets[1], true)
'doc_js': cfg.get_resource(css_js_assets[2], !cfg.serve_http) '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) 'light_icon': cfg.get_resource('light.svg', true)
'dark_icon': cfg.get_resource('dark.svg', true) 'dark_icon': cfg.get_resource('dark.svg', true)
'menu_icon': cfg.get_resource('menu.svg', true) 'menu_icon': cfg.get_resource('menu.svg', true)