openstatus.dev
Openstatus
www.openstatus.dev
chore: theme explorer posts (#1510)
* chore: add theme links
* chore: theme explorer posts
* chore: add dashboard image
authored by
Maximilian Kaske
and committed by
GitHub
02cb4893
7d5e262a
+170
-1
+4
apps/docs/astro.config.mjs
+4
apps/docs/astro.config.mjs
+70
apps/docs/src/content/docs/concept/uptime-calculation-and-values.mdx
+70
apps/docs/src/content/docs/concept/uptime-calculation-and-values.mdx
···
1
+
---
2
+
title: Uptime Calculation and Shared Values
3
+
---
4
+
5
+
Let’s face it - uptime values can be a complete lie if they’re not properly connected to monitoring.
6
+
7
+
We want to make uptime transparent and configurable. You decide how your uptime is calculated and which values you want to share on your status page.
8
+
When monitoring an endpoint, a check can end up in one of three states:
9
+
10
+
- ✅ Success – everything’s fine
11
+
- ⚠️ Degraded – slow or partially failing
12
+
- ❌ Down – no response or full failure
13
+
14
+
We now offer multiple types of uptime calculation:
15
+
- **Absolute** (default): derived directly from your monitoring data
16
+
- **Duration**: aggregated from the incidents duration
17
+
- **Requests** (default): aggregated from the request values
18
+
- **Manual**: for teams that prefer full control over what’s shown
19
+
20
+
**TL;DR**
21
+
22
+
| Type | Source of Truth | What Users See | Best For |
23
+
|-------------|----------------------|-------------------------------------|----------------------------------|
24
+
| **Duration** (Absolute) | Incident duration | Time based uptime, proportional colors | Accurate long-term view |
25
+
| **Request** (Absolute) | Every ping result | Request-based uptime % | Real-time reflection |
26
+
| **Manual** | Manually set status | Controlled, narrative updates | Transparency without monitoring |
27
+
28
+
<br />
29
+
30
+
Let’s break them down!
31
+
32
+
## Absolute Type
33
+
34
+
The absolute type calculates uptime based on actual monitoring results. It’s the most accurate reflection of what’s really happening, and comes in two variants: _Duration_ and _Request_.
35
+
Both of these share real data with your users - incidents, degraded states, and historical uptime - but they differ in how they aggregate and display that data.
36
+
37
+
---
38
+
39
+
### Duration
40
+
41
+
The duration value is calculated from the **total monitoring time and the duration of incidents**.
42
+
43
+
In simple terms: `uptime = (total time - incident duration) / total time`
44
+
45
+
This means uptime is based on how long something was down, not how many checks failed. Only incident durations are included in the calculation. Temporary single-region ping failures (e.g., one location failing once) are not propagated to users - because these often don’t represent a real outage. That’s also why we recommend at least three locations per monitor for redundancy. The proportional colors in the status bar are drawn from these duration values. Hovering over a day shows both incidents and status reports, so users can explore what happened.
46
+
47
+
---
48
+
49
+
### Request
50
+
51
+
The request value is more straightforward - it looks at each ping result individually. **Every check we run contributes to your uptime score**.
52
+
53
+
In simple terms: `uptime = (success + degraded - error) / total requests`
54
+
55
+
This is the current default mode for most openstatus users. It’s simple, data-driven, and updates immediately as new results come in. Like with duration, hover cards display incidents and status reports, giving your users a quick overview of recent events.
56
+
57
+
---
58
+
59
+
## Manual Type
60
+
61
+
The manual type is for teams who want to **fully control what’s shown** on your status page, without relying on automatic checks.
62
+
By default, your monitor is marked operational. You can then manually create and publish status reports whenever you want to reflect changes — independent of any monitoring data.
63
+
64
+
This is ideal if:
65
+
- you don’t have synthetic monitoring set up yet,
66
+
- or you’re sharing updates that aren’t tied to uptime (e.g., service degradation due to external dependencies).
67
+
68
+
In this mode, all displayed uptime values and statuses come from your shared data, not from active pings.
69
+
70
+
> **Note**: the values you are defining are attached to a status page. You cannot change the per monitor.
apps/web/public/assets/posts/introducing-status-page-theme-explorer/dashboard-status-page-redesign.png
apps/web/public/assets/posts/introducing-status-page-theme-explorer/dashboard-status-page-redesign.png
This is a binary file and will not be displayed.
apps/web/public/assets/posts/introducing-status-page-theme-explorer/palette.png
apps/web/public/assets/posts/introducing-status-page-theme-explorer/palette.png
This is a binary file and will not be displayed.
apps/web/public/assets/posts/introducing-status-page-theme-explorer/theme-explorer-supabase.png
apps/web/public/assets/posts/introducing-status-page-theme-explorer/theme-explorer-supabase.png
This is a binary file and will not be displayed.
+6
apps/web/src/app/(pages)/(content)/play/page.tsx
+6
apps/web/src/app/(pages)/(content)/play/page.tsx
···
76
76
icon: ShieldCheck,
77
77
},
78
78
{
79
+
href: "https://themes.openstatus.dev",
80
+
title: "Theme Explorer",
81
+
description: "Explore our collection of themes for your status page.",
82
+
icon: Palette,
83
+
},
84
+
{
79
85
href: "https://light.openstatus.dev",
80
86
title: "Vercel Edge Ping",
81
87
description:
+85
apps/web/src/content/posts/introducing-status-page-theme-explorer.mdx
+85
apps/web/src/content/posts/introducing-status-page-theme-explorer.mdx
···
1
+
---
2
+
title: "Introducing: The Status Page Theme Explorer"
3
+
description: Customize and build your own status page experience.
4
+
author:
5
+
name: Maximilian Kaske
6
+
url: https://x.com/mxkaske
7
+
avatar: /assets/authors/max.png
8
+
publishedAt: 2025-10-28
9
+
image: /assets/posts/introducing-status-page-theme-explorer/palette.png
10
+
tag: education
11
+
---
12
+
13
+
Who uses status pages the most? _Mainly Developers_. And to match their nerdiness, we’re adding more font-mono into the game. We’ve collaborated with [@aliszu](https://x.com/aliszu) to rebuilt our status page experience from the ground up and are providing you with more flexibility and control.
14
+
15
+
A status page should feel at home with your brand - without requiring constant maintenance. It should also let you decide exactly how much data you want to share and at what level of detail.
16
+
The status-page is now a standalone app, fully separated from our main web project - continuing the great split after the [dashboard extraction](/blog/new-dashboard-we-are-so-back).
17
+
18
+
**TL;DR**: create your own theme on [themes.openstatus.dev](https://themes.openstatus.dev/?t=supabase&b=true) + more page configuration
19
+
20
+
---
21
+
22
+
### Theme Explorer
23
+
24
+
From day one, we’ve built with [shadcn/ui](https://ui.shadcn.com), and we’re sticking to it: same `CSS` variables, same philosophy. And luckily, it makes it easy to change themes!
25
+
26
+
<ImageWithCaption
27
+
src="/assets/posts/introducing-status-page-theme-explorer/theme-explorer-supabase.png"
28
+
alt="Supabase Theme"
29
+
caption="Supabase Theme"
30
+
/>
31
+
32
+
We’ve now extended those variables with custom ones for states like _maintenance_, _success_, and _degraded_, among others.
33
+
34
+
We’re starting with four themes:
35
+
- our new default openstatus (Squared) theme,
36
+
- a legacy rounded theme close to the current one,
37
+
- a [Supabase](https://supabase.com) theme, and
38
+
- a GitHub high-contrast theme.
39
+
40
+
And here’s the fun part: **you can contribute your own themes**.
41
+
42
+
Go to [themes.openstatus.dev](https://themes.openstatus.dev), open the **Theme Builder** by toggling the sidebar (e.g. `cmd + b`) and play around with different styles.
43
+
44
+
Once you’re happy with your setup:
45
+
- Copy the configuration to your clipboard.
46
+
- Create a new theme file with that config.
47
+
- Append its ID to the `THEMES_LIST`.
48
+
- Open a PR to contribute it!
49
+
50
+
51
+
We have a comprehensive [README](https://github.com/openstatusHQ/openstatus/tree/main/packages/theme-store) with more context.
52
+
53
+
We’ve also updated the local seed setup — making it easier to get started and preview your theme right away at http://localhost:3000/status.
54
+
55
+
> Note, that we won’t accept every submission. We want to keep themes high-quality and recognizable - no random or off-brand experiments (sorry Santa 🎅).
56
+
57
+
To try the new experience on your own status page, **opt in to the redesign (beta)** ([Tutorial > How to configure a status page](https://docs.openstatus.dev/tutorial/how-to-configure-status-page/)) and select your preferred theme. Newly created pages will automatically opt in to the new theme.
58
+
59
+
---
60
+
61
+
### Shared Values Configuration
62
+
63
+
There’s more configuration.
64
+
65
+
We’ve heard from teams who wanted to **manually update their status page without connecting any synthetic monitors**. While we still believe _monitoring + transparency go hand in hand_, we don’t want to exclude users who just want to share updates directly.
66
+
67
+
<ImageWithCaption
68
+
src="/assets/posts/introducing-status-page-theme-explorer/dashboard-status-page-redesign.png"
69
+
alt="Status Page Dashboard Settings"
70
+
caption="Status Page Dashboard Settings"
71
+
/>
72
+
73
+
With the new _“manual”_ type, you can only share status reports you are creating, regardless of the derived synthetic monitoring values.
74
+
75
+
All metrics, including uptime, will refer to your shared (manual) data.
76
+
To understand the underlying concept, check out our docs:
77
+
[Concepts > Status Values and Uptime Calculation](https://docs.openstatus.dev/concept/uptime-calculation-and-values/) - where we explain how these values are derived, including details about the default _“absolute”_ type (which takes duration and request values to aggregate the uptime data).
78
+
79
+
---
80
+
81
+
We’re not done yet. Next up: _grouped monitors_, _white-labeling support_, and _private themes_ - all coming to the new status page configuration soon.
82
+
83
+
> Expect all status pages to be fully migrated to the new version early next year.
84
+
85
+
If you’re already using openstatus - or planning to - and feel a status page feature is missing, we’d love to hear from you. Contact us via [ping@openstatus.dev](mailto:ping@openstatus.dev) or by joining [Discord](https://openstatus.dev/discord).
+1
-1
packages/theme-store/README.md
+1
-1
packages/theme-store/README.md
···
98
98
## Design Guidelines
99
99
100
100
### Color System
101
-
- Use **OKLCH color space** for better perceptual uniformity
101
+
- Use **OKLCH color space** for better perceptual uniformity (but all css color specs are supported)
102
102
- Ensure sufficient contrast ratios for accessibility
103
103
- Test both light and dark modes thoroughly
104
104