Dark mode has been added. Close #105.

[rybak]

Demo:

https://user-images.githubusercontent.com/624072/112754974-f3291680-8fde-11eb-8167-030c1abd58c7.mp4

[rybak]

Force pushed minor fixes and code cleanup. $ git diff 7225576 9a6c8af:

diff --git a/bingo.css b/bingo.css
index 02aead3..37bd9cc 100644
--- a/bingo.css
+++ b/bingo.css
@@ -751,7 +751,7 @@ select, input[type="text"] {

 /* for smooth transition between colour themes */
 .smooth-transition * {
-       transition-property: background-color, color, filter;
+       transition-property: background-color, color, border, filter;
        transition-duration: 0.4s;
        transition-timing-function: ease-in;
 }
diff --git a/bingo.js b/bingo.js
index f4b200f..775c366 100644
--- a/bingo.js
+++ b/bingo.js
@@ -87,7 +87,7 @@ $(document).click(function(event) {
 $(document).ready(function()
 {
        // Set the background to a random image
-       $("body").addClass("bg" + (Math.floor(Math.random() * 10) + 1));
+       document.body.className += "bg" + (Math.floor(Math.random() * 10) + 1);

        // By default hide the tooltips
        $(".tooltip").hide();

[rybak]

New commit fixes an animation glitch that I noticed after some testing.

[rybak]

New commits improve the goal export dialog. It is off-topic to dark mode, but it's easier to do it in this pull request due to merge conflicts.

[rybak]

New commit simplifies code for tooltips.

[rybak]

Force pushed to drop commit 6d28235a57a3c7cbe481b02d08552b7a3209318e from this PR due to a semantic conflict with changes in #121. See comment for details.

Range-diff:

$ git range-diff f04b0b7...6114250
1:  6d28235 < -:  ------- js: load only URL settings on URL change
2:  1d29a4c = 1:  f637144 css: show export above pause menu
3:  c039779 = 2:  c5747b4 use CSS for showing export
4:  f04b0b7 = 3:  6114250 hide tooltips by default using CSS

[rybak]

Dropped another commit due to conflicts with #121 – c5747b4 (aka c039779). Explained in discussion.

[rybak]

Dropped the third commit to simplify merge conflict resolution with #121.

Range diff for the last two force pushes:

$ git range-diff 6114250...f637144
1:  c5747b4 < -:  ------- use CSS for showing export
2:  6114250 < -:  ------- hide tooltips by default using CSS

[rybak]

Dropped 28290c6392a063534f3095acef13df3ce1e5d5ce for good measure. A similar change to z-index would be done by commit 69934da6 in #121.

Now this PR doesn't have off-topic changes on top of the dark mode addition :-)

Range diff for all commit removals so far:

$ git range-diff f04b0b7...9a6c8af
1:  6d28235 < -:  ------- js: load only URL settings on URL change
2:  1d29a4c < -:  ------- css: show export above pause menu
3:  c039779 < -:  ------- use CSS for showing export
4:  f04b0b7 < -:  ------- hide tooltips by default using CSS

[rybak]

Learned a bit more JS, found out how function setTimeout works. Force pushed a simplification for the smooth transition code git diff 9a6c8af 42ba1b5:

diff --git a/bingo.js b/bingo.js
index 775c366..a25802b 100644
--- a/bingo.js
+++ b/bingo.js
@@ -543,9 +543,9 @@ function updateDarkMode()
                body.removeClass(DARK_MODE_CLASS_NAME);
        }
        $(".dark-mode-button").text(DARK_MODE ? "Light Mode" : "Dark Mode");
-       delayed(1000, () => {
+       setTimeout(() => {
                body.removeClass(smoothTransitionClassName);
-       });
+       }, 1000);
 }

 function toggleDarkMode()
@@ -707,17 +707,6 @@ function hideGoalExport()
        $("#export").hide();
 }

-// https://stackoverflow.com/a/39914235/1083697
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-async function delayed(t, f)
-{
-       await sleep(t);
-       f();
-}
-
 // Made this a function for readability and ease of use
 function getRandomInt(min, max)
 {