From eaf34bdfec53d7663232254a904cb5d397151f70 Mon Sep 17 00:00:00 2001
From: tnolet <tim@checklyhq.com>
Date: Wed, 16 Sep 2026 15:06:38 +0200
Subject: [PATCH] docs: document themeColors and supportLink on StatusPageV3

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 constructs/status-page-v3.mdx | 60 +++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/constructs/status-page-v3.mdx b/constructs/status-page-v3.mdx
index d924e488..0a01b712 100644
--- a/constructs/status-page-v3.mdx
+++ b/constructs/status-page-v3.mdx
@@ -48,6 +48,19 @@ const statusPage = new StatusPageV3("acme-status", {
   footerText: "A.C.M.E Inc.",
   privacyPolicyLink: "https://acme.com/privacy",
   termsOfServiceLink: "https://acme.com/terms",
+  supportLink: "https://acme.com/support",
+  themeColors: {
+    light: {
+      headerBackgroundColor: "#0075FF",
+      headerFontColor: "#FFFFFF",
+      primaryButtonBackgroundColor: "#0075FF",
+    },
+    dark: {
+      bodyBackgroundColor: "#0B0F19",
+      cardBackgroundColor: "#151B2B",
+      linkFontColor: "#7AB8FF",
+    },
+  },
 })
 
 // A group with one component nested under it.
@@ -154,6 +167,10 @@ Link to your privacy policy, shown in the page footer.
 Link to your terms of service, shown in the page footer.
 </ResponseField>
 
+<ResponseField name="supportLink" type="string">
+Link to your support channel, shown in the page footer.
+</ResponseField>
+
 <ResponseField name="footerText" type="string">
 Free-form text shown in the page footer.
 </ResponseField>
@@ -166,6 +183,49 @@ Google Analytics tag ID (e.g. `G-XXXXXXXXXX`) embedded on the public page.
 Whether search engines may index the public page.
 </ResponseField>
 
+<ResponseField name="themeColors" type="object">
+Custom colors for the light and dark theme of the page. Set only the colors you want to change; every other color keeps Checkly's default for that theme. Either theme can be left out entirely.
+
+Each color is a hex string in `#RGB` or `#RRGGBB` format, such as `"#F00"` or `"#FF0000"`. Unknown color names and non-hex values fail validation at deploy time. See [Custom theme colors](/communicate/status-pages/customization#custom-theme-colors) for where each color appears on the page.
+
+<Note>
+Custom theme colors must be part of your plan.
+</Note>
+
+**Usage:**
+
+```ts
+themeColors: {
+  light: {
+    headerBackgroundColor: "#0075FF",
+    headerFontColor: "#FFFFFF",
+  },
+  dark: {
+    bodyBackgroundColor: "#0B0F19",
+  },
+}
+```
+
+**Parameters:**
+
+Both `light` and `dark` accept the same set of optional color properties:
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `bodyBackgroundColor` | `string` | Background of the page |
+| `headerBackgroundColor` | `string` | Background of the page header |
+| `headerFontColor` | `string` | Text in the page header |
+| `titleFontColor` | `string` | Titles and headings |
+| `bodyFontColor` | `string` | Regular body text |
+| `bodyFontColorMuted` | `string` | De-emphasized body text, such as timestamps |
+| `navigationFontColor` | `string` | Navigation links |
+| `linkFontColor` | `string` | Links in the page content |
+| `cardBackgroundColor` | `string` | Background of component and incident cards |
+| `borderColor` | `string` | Borders and dividers |
+| `primaryButtonBackgroundColor` | `string` | Background of primary buttons, such as "Get updates" |
+| `primaryButtonFontColor` | `string` | Text of primary buttons |
+</ResponseField>
+
 ## Referencing an existing page
 
 Use `StatusPageV3.fromId()` to attach components and automation rules declared in code to a page created in the UI, without managing the page itself: