Append addon CSS at the end of <body>

Fixes https://github.com/TurboWarp/scratch-gui/issues/685

src/addons/conditional-style.js

@@ -1,8 +1,8 @@
-// Stylesheets are added at the start of <body> so that they have higher precedence
-// than those in <head>
+// Stylesheets are added at the end of <body> so that they have higher precedence
+// than those in <head> and above dark mode which is appended at the start of <body>
 const stylesheetContainer = document.createElement('div');
 stylesheetContainer.style.display = 'none';
-document.body.insertBefore(stylesheetContainer, document.body.firstChild);
+document.body.appendChild(stylesheetContainer);
 
 /**
  * Maps opaque module IDs to its ConditionalStyle.

src/lib/tw-theme-hoc.jsx

@@ -55,6 +55,8 @@ const ThemeHOC = function (WrappedComponent) {
             const dark = this.state.dark;
             document.body.setAttribute('theme', dark ? 'dark' : 'light');
             if (dark && !darkModeStylesheet.parentNode) {
+                // Append at the start of <body> we override scratch-gui styles in <head>
+                // but are overridden by addon styles at the end of <body>
                 document.body.insertBefore(darkModeStylesheet, document.body.firstChild);
             } else if (!dark && darkModeStylesheet.parentNode) {
                 darkModeStylesheet.parentNode.removeChild(darkModeStylesheet);