Add theming support to error page (#2077)

noisysocks · web-flow · commit e745aceb22b7 · 2025-12-04T22:57:31.000Z
diff --git a/special-pages/pages/errorpage/public/index.html b/special-pages/pages/errorpage/public/index.html
@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
+<body data-theme-variant="$THEME_VARIANT$">
     <div class="content-container">
         <div class="error-container">
             <div class="header-container">
@@ -21,5 +21,16 @@ <h1 class="error-header">$HEADER$</h1>
             <img src="img/logo-horizontal.svg" alt="DuckDuckGo" class="watermark">
         </div>
     </div>
+    <script>
+        /**
+         * Called by native to update the page theme at runtime
+         * @param {{ themeVariant: string }} payload
+         */
+        window.onChangeTheme = function(payload) {
+            if (payload && payload.themeVariant) {
+                document.body.dataset.themeVariant = payload.themeVariant;
+            }
+        };
+    </script>
 </body>
 </html>
diff --git a/special-pages/pages/errorpage/public/style.css b/special-pages/pages/errorpage/public/style.css
@@ -65,4 +65,26 @@ body {
     .error-description, .error-header {
         color: rgb(210, 210, 210);
     }
-}
+}
+
+/* TODO: Use colour variables from design-tokens */
+
+/* Theme variants - light mode */
+[data-theme-variant="coolGray"] { background: #d2d5e3; }
+[data-theme-variant="slateBlue"] { background: #d2e5f3; }
+[data-theme-variant="green"] { background: #e3eee1; }
+[data-theme-variant="violet"] { background: #e7e4f5; }
+[data-theme-variant="rose"] { background: #f8ebf5; }
+[data-theme-variant="orange"] { background: #fcedd8; }
+[data-theme-variant="desert"] { background: #eee9e1; }
+
+/* Theme variants - dark mode */
+@media (prefers-color-scheme: dark) {
+    [data-theme-variant="coolGray"] { background: #2b2f45; }
+    [data-theme-variant="slateBlue"] { background: #1e3347; }
+    [data-theme-variant="green"] { background: #203b30; }
+    [data-theme-variant="violet"] { background: #2e2158; }
+    [data-theme-variant="rose"] { background: #5b194b; }
+    [data-theme-variant="orange"] { background: #54240c; }
+    [data-theme-variant="desert"] { background: #3c3833; }
+}
diff --git a/special-pages/pages/errorpage/readme.md b/special-pages/pages/errorpage/readme.md
@@ -10,6 +10,34 @@ So far, the following platforms are supported
 
 - macOS
 
+### Theming
+
+The error page supports theming through two mechanisms:
+
+#### Template Variable: `$THEME_VARIANT$`
+
+Native performs string interpolation to replace `$THEME_VARIANT$` in the HTML with a theme variant name.
+
+If string interpolation is not performed (i.e., `$THEME_VARIANT$` is left as-is), the page falls back to the default styling.
+
+**Supported variants:** `default`, `coolGray`, `slateBlue`, `green`, `violet`, `rose`, `orange`, `desert`
+
+#### Callback: `window.onChangeTheme`
+
+Native can call `window.onChangeTheme(payload)` to update the theme at runtime.
+
+**Payload:**
+```json
+{
+  "themeVariant": "coolGray"
+}
+```
+
+**Example native usage:**
+```javascript
+window.onChangeTheme({ themeVariant: 'coolGray' });
+```
+
 ---
 
 ## Contributing
@@ -26,4 +54,3 @@ Don't edit the generated files directly - any changes you make will not be refle
 
 Instead, make your changes in `src/` and then run `npm run build` from the root folder
   - or to build the special pages only (faster), run `npm run postbuild` instead
-
