Add theming support to error page

noisysocks · noisysocks · commit 3f21cde69eaa · 2025-12-04T11:21:54.000+11:00
diff --git a/special-pages/pages/errorpage/public/index.html b/special-pages/pages/errorpage/public/index.html
@@ -5,6 +5,25 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script>
+        // $BG_COLOR$ is replaced by native via string interpolation.
+        // This script must be in <head> to block rendering and prevent flash of wrong color.
+        const bgColor = "$BG_COLOR$";
+        const hasBgColor = !!bgColor && !bgColor.startsWith("$");
+        if (hasBgColor) {
+            document.documentElement.style.background = bgColor;
+        }
+
+        /**
+         * Called by native to update the page theme
+         * @param {{ bgColor: string }} payload - Object containing the new background color
+         */
+        window.onChangeTheme = function(payload) {
+            if (payload && payload.bgColor) {
+                document.body.style.background = payload.bgColor;
+            }
+        };
+    </script>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
diff --git a/special-pages/pages/errorpage/readme.md b/special-pages/pages/errorpage/readme.md
@@ -10,6 +10,30 @@ So far, the following platforms are supported
 
 - macOS
 
+### Theming
+
+The error page supports theming through two mechanisms:
+
+#### Template Variable: `$BG_COLOR$`
+Native performs string interpolation to replace `$BG_COLOR$` with a valid CSS color value (e.g., `#ffffff`, `rgb(51, 51, 51)`). This sets the initial background color to prevent a flash of wrong color while the page loads.
+
+If string interpolation is not performed (i.e., `$BG_COLOR$` is left as-is), the page falls back to the default CSS background colors defined in `style.css`.
+
+#### Callback: `window.onChangeTheme`
+Native can call `window.onChangeTheme(payload)` to update the theme at runtime.
+
+**Payload:**
+```json
+{
+  "bgColor": "#ff0000"
+}
+```
+
+**Example native usage:**
+```javascript
+window.onChangeTheme({ bgColor: '#333333' });
+```
+
 ---
 
 ## Contributing
