+
diff --git a/special-pages/pages/errorpage/public/style.css b/special-pages/pages/errorpage/public/style.css
index 87d0488c93..c8449bd9f1 100644
--- 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);
}
-}
\ No newline at end of file
+}
+
+/* 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
index 3ca05aa6bb..18669b25a8 100644
--- 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
-
