jyapayne/Nim
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix JS error on index page and detect dark mode (#18191)

Browse source 
* Fix JS error on index page and detect dark mode

The theindex.html page doesn't have a dark mode switch so the main
function will error because `toggleSwitch` is not defined. Checks have
been added to prevent this from happening.

Also add automatic detection of system settings for dark-mode. This
could also be done with pure css, but then the dark mode variable
declarations would have to be duplicated to work with the switch so I
went with this approach.

* Fix nimdoc tests

* Fix rst2html tests
This commit is contained in:
drtheuns 2021-06-07 18:40:09 +02:00 • committed by GitHub
commit 51ab7ccec1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

13
nimdoc/test_out_index_dot_html/expected/index.html
View file

@ -34,7 +34,6 @@ function main() {
}
}
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
@ -45,13 +44,19 @@ function main() {
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
if (toggleSwitch !== null) {
toggleSwitch.addEventListener('change', switchTheme, false);
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
var currentTheme = localStorage.getItem('theme');
if (!currentTheme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
currentTheme = 'dark';
}
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
if (currentTheme === 'dark' && toggleSwitch !== null) {
toggleSwitch.checked = true;
}
}

13
nimdoc/test_out_index_dot_html/expected/theindex.html
View file

@ -34,7 +34,6 @@ function main() {
}
}
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
@ -45,13 +44,19 @@ function main() {
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
if (toggleSwitch !== null) {
toggleSwitch.addEventListener('change', switchTheme, false);
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
var currentTheme = localStorage.getItem('theme');
if (!currentTheme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
currentTheme = 'dark';
}
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
if (currentTheme === 'dark' && toggleSwitch !== null) {
toggleSwitch.checked = true;
}
}