Update: added `pageConfig.maintenances.upcomingColor` to control upcoming maintenance alert colors.

components/MaintenanceAlert.tsx

@@ -1,6 +1,7 @@
 import { Alert, List, Text, Group, Box } from '@mantine/core'
 import { IconAlertTriangle } from '@tabler/icons-react'
 import { MaintenanceConfig, MonitorTarget } from '@/types/config'
+import { pageConfig } from '@/uptime.config'
 
 export default function MaintenanceAlert({
   maintenance,
@@ -19,7 +20,7 @@ export default function MaintenanceAlert({
           ? `Upcoming Maintenance: ${maintenance.title || 'Scheduled Maintenance'}`
           : maintenance.title || 'Scheduled Maintenance'
       }
-      color={upcoming ? 'gray' : maintenance.color || '#f29030'}
+      color={upcoming ? (pageConfig.maintenances?.upcomingColor ?? 'gray') : maintenance.color || '#f29030'}
       withCloseButton={false}
       style={{ margin: '16px auto', ...style }}
     >
@@ -58,7 +59,6 @@ export default function MaintenanceAlert({
             minWidth: 120,
           }}
         >
-          
               <b>{upcoming ? 'Scheduled for' : 'From'}:</b> {new Date(maintenance.start).toLocaleString()}
               <br />
               <b>{upcoming ? 'Expected end' : 'To'}:</b>{' '}

types/config.ts

@@ -4,6 +4,9 @@ export type PageConfig = {
   title?: string
   links?: PageConfigLink[]
   group?: PageConfigGroup
+  maintenances?: {
+    upcomingColor?: string | null
+  }
 }
 
 export type MaintenanceConfig = {

uptime.config.ts

@@ -16,6 +16,12 @@ const pageConfig: PageConfig = {
     '🌐 Public (example group name)': ['foo_monitor', 'bar_monitor', 'more monitor ids...'],
     '🔐 Private': ['test_tcp_monitor'],
   },
+  // [OPTIONAL] Maintenance style
+  maintenances: {
+    // If not specified all upcoming maintenance alerts will default to "gray",
+    // when they are active they will use the color specified in the `MaintenanceConfig[]`
+    upcomingColor: "gray"
+  }
 }
 
 const workerConfig: WorkerConfig = {