Skip to content

Instantly share code, notes, and snippets.

@nin0-dev
Created September 22, 2025 03:48
Show Gist options
  • Select an option

  • Save nin0-dev/d43b7bd6c77bf09f8ae1acb610d3502e to your computer and use it in GitHub Desktop.

Select an option

Save nin0-dev/d43b7bd6c77bf09f8ae1acb610d3502e to your computer and use it in GitHub Desktop.
color-scheme: light dark;
--ctp-background: light-dark(#eff1f5, #1e1e2e);
--ctp-text: light-dark(#4c4f69, #cdd6f4);
--ctp-mantle: light-dark(#e6e9ef, #181825);
--ctp-surface-0: light-dark(#ccd0da, #313244);
--ctp-surface-1: light-dark(#bcc0cc, #45475a);
--ctp-on-container: light-dark(#ccd0da, #313244);
--ctp-green: light-dark(#40a02b, #a6e3a1);
--ctp-yellow: light-dark(#df8e1d, #f9e2af);
--ctp-blue: light-dark(#1e66f5, #89b4fa);
--ctp-red: light-dark(#d20f39, #f38ba8);
}
/* === Global === */
html, #app {
background-color: var(--ctp-background);
color: var(--ctp-text);
}
.shadow-box {
box-shadow: none !important;
}
a[target="_blank"] /* so its gonna be forever or its gonna do down in flames you can tell me when its over or if the high was worth the pain got a long list
of ex lovers theyll tell you im insane cause you know i love the players and you love the game cause were young were reckless well take this way too far and
leave you breathless oh and a nasty scar got a long list of ex lovers theyll tell you im insane but ive got a blank space baby and ill write your name */ {
color: var(--ctp-blue) !important;
}
/* === Main status card === */
/* All operational */
div.overall-status:has(svg[data-icon="check-circle"]) {
svg {
color: unset !important;
}
color: var(--ctp-on-container);
background-color: var(--ctp-green) !important;
}
/* Partially degraded */
div.overall-status:has(svg[data-icon="exclamation-circle"]) {
svg {
color: unset !important;
}
color: var(--ctp-on-container);
background-color: var(--ctp-yellow) !important;
}
/* Under maintenance */
div.overall-status:has(svg[data-icon="wrench"]) {
svg {
color: unset !important;
}
color: var(--ctp-on-container);
background-color: var(--ctp-blue) !important;
}
/* Degraded service */
div.overall-status:has(svg[data-icon="times-circle"]) {
svg {
color: unset !important;
}
color: var(--ctp-on-container);
background-color: var(--ctp-red) !important;
}
/* === Maintenance card === */
div.bg-maintenance {
background-color: var(--ctp-surface-0) !important;
h4 {
color: var(--ctp-blue);
}
}
/* === Monitors === */
/* Container */
div.mt-4:has(.monitor-list) {
background-color: var(--ctp-mantle) !important;
div {
color: var(--ctp-text);
}
/* Hover items */
.item:hover {
background-color: var(--ctp-surface-0) !important;
}
/* Badge globals */
.badge {
margin-right: 10px;
color: var(--ctp-on-container) !important;
}
/* Up */
.bg-primary, div[class="beat"] {
background-color: var(--ctp-green) !important;
}
/* Unknown */
div[class="beat empty"] {
background-color: var(--ctp-surface-1) !important;
}
/* Down */
.bg-danger, div[class="beat down"] {
background-color: var(--ctp-red) !important;
}
/* Blazingly Slow */
div[class="beat pending"] {
background-color: var(--ctp-yellow) !important;
}
/* Maintenance */
.bg-maintenance, div[class="beat maintenance"] {
background-color: var(--ctp-blue) !important;
}
}
/* === Icons === */
.logo {
content: var(--logo) !important;
}
@media (prefers-color-scheme: light) {
:root:has(svg[data-icon="check-circle"]) {
--logo: url("/upload/green-light.png");
}
:root:has(svg[data-icon="exclamation-circle"]) {
--logo: url("/upload/yellow-light.png");
}
:root:has(svg[data-icon="wrench"]) {
--logo: url("/upload/blue-light.png");
}
:root:has(svg[data-icon="times-circle"]) {
--logo: url("/upload/red-light.png");
}
}
@media (prefers-color-scheme: dark) {
:root:has(svg[data-icon="check-circle"]) {
--logo: url("/upload/green-dark.png");
}
:root:has(svg[data-icon="exclamation-circle"]) {
--logo: url("/upload/yellow-dark.png");
}
:root:has(svg[data-icon="wrench"]) {
--logo: url("/upload/blue-dark.png");
}
:root:has(svg[data-icon="times-circle"]) {
--logo: url("/upload/red-dark.png");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment