diff --git a/src/addons/conditional-style.js b/src/addons/conditional-style.js
index eef81e631..44af0a596 100644
--- a/src/addons/conditional-style.js
+++ b/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.
diff --git a/src/lib/tw-theme-hoc.jsx b/src/lib/tw-theme-hoc.jsx
index 6d32f6845..33379c0ac 100644
--- a/src/lib/tw-theme-hoc.jsx
+++ b/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);