Correct order of property loading for simple pages

src/main/resources/io/jenkins/plugins/thememanager/ThemeManagerBluePageDecorator/header.jelly

@@ -1,6 +1,6 @@
 <?jelly escape-by-default='false'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
-  <script id="theme-manager-theme" type="application/json">{ "id": "${it.themeKey}" }</script>
-  <st:adjunct includes="io.jenkins.plugins.thememanager.header.main" />
+  <script id="theme-manager-theme" type="application/json">{ "id": "${it.themeKey}", "respect_system_appearance":  ${it.respectSystemAppearance} }</script>
   ${it.getHeaderHtml()}
+  <st:adjunct includes="io.jenkins.plugins.thememanager.header.main" />
 </j:jelly>

src/main/resources/io/jenkins/plugins/thememanager/ThemeManagerSimplePageDecorator/simple-head.jelly

@@ -1,11 +1,12 @@
 <?jelly escape-by-default='false'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
-  <script id="theme-manager-theme" type="application/json">{ "id": "${it.themeKey}" }</script>
-  <st:adjunct includes="io.jenkins.plugins.thememanager.header.main" />
   <j:new var="h" className="hudson.Functions"/>
   <!-- Load the default styles -->
-  <st:include it="${h.simplePageDecorators.get(h.simplePageDecorators.size() - 1)}" 
+  <st:include it="${h.simplePageDecorators.get(h.simplePageDecorators.size() - 1)}"
               page="simple-head.jelly"
               optional="true"/>
+
+  <script id="theme-manager-theme" type="application/json">{ "id": "${it.themeKey}", "respect_system_appearance":  ${it.respectSystemAppearance} }</script>
+  <st:adjunct includes="io.jenkins.plugins.thememanager.header.main" />
   ${it.getHeaderHtml()}
 </j:jelly>

src/main/resources/io/jenkins/plugins/thememanager/header/main.js

@@ -7,17 +7,19 @@
   }
   window.isSystemRespectingTheme = theme.respect_system_appearance
 
-  const propertiesJson = document.getElementById('theme-manager-properties').text
-  const parsedProperties = JSON.parse(propertiesJson);
+  const propertiesJson = document.getElementById('theme-manager-properties')
+  // may not be present, e.g. on BlueOcean where the theme is not marked as BlueOcean compatible
+  if (propertiesJson) {
+    const parsedProperties = JSON.parse(propertiesJson.text);
 
+    window.getThemeManagerProperty = function (plugin, propertyName) {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
 
-  window.getThemeManagerProperty = function (plugin, propertyName) {
-    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-
-    let propertyNameNormalised = propertyName
-    if (isSystemRespectingTheme) {
-      propertyNameNormalised = isDark ? `${propertyName}-dark` : `${propertyName}-light`
+      let propertyNameNormalised = propertyName
+      if (isSystemRespectingTheme) {
+        propertyNameNormalised = isDark ? `${propertyName}-dark` : `${propertyName}-light`
+      }
+      return parsedProperties[`${plugin}:${propertyNameNormalised}`]
     }
-    return parsedProperties[`${plugin}:${propertyNameNormalised}`]
   }
 })()

src/test/java/io/jenkins/plugins/thememanager/PageDecoratorTest.java

@@ -0,0 +1,26 @@
+package io.jenkins.plugins.thememanager;
+
+import jenkins.model.Jenkins;
+import org.junit.Rule;
+import org.junit.Test;
+import org.jvnet.hudson.test.JenkinsRule;
+import org.jvnet.hudson.test.MockAuthorizationStrategy;
+
+public class PageDecoratorTest {
+
+    @Rule
+    public JenkinsRule j = new JenkinsRule();
+
+    @Test
+    public void testJavaScriptLoadsOnSimpleAndRegularPages() throws Exception {
+        j.jenkins.setSecurityRealm(j.createDummySecurityRealm());
+        MockAuthorizationStrategy auth = new MockAuthorizationStrategy().
+                grant(Jenkins.READ).everywhere().to("alice");
+        j.jenkins.setAuthorizationStrategy(auth);
+
+        JenkinsRule.WebClient wc = j.createWebClient();
+
+        wc.login("alice");
+        wc.goTo("");
+    }
+}