Cachet Matarial Dark Theme for the Cachet Status Page System

[nerdzero]

Description:

A Material dark theme for Cachet, the open source status page. Also fixes the timeline view line to not extend off the ends. Note: This style does not, and can not, affect the metrics graphs font color.

 

Preview:

https://imgur.com/1fbYQpl

https://imgur.com/BOCaskJ

 

Cachet > Settings > Theme

Background Color: #263238
Text Color: #ECEFF1

Red: #FF1744
Blue: #00BCD4
Green: #1DE9B6
Yellow: #FFC400
Orange: #FF9100

Metrics Fill: #0DCCC0
Links: #00FFCC
Background Fills: #455A64

 

Cachet > Settings > Stylesheet

body.status-page .list-group .list-group-item.group-name {
    background-color: #607D8B;
}
body.status-page .list-group.components {
    border-color: #455A64;
}
body.status-page .list-group .list-group-item {
    border-color: #11171A;
}
body.status-page .list-group .list-group-item {
    background-color: #37474F;
}
body.status-page .list-group.components a {
    color: #ECEFF1 !important;
}
body.status-page .timeline .moment .status-icon {
    background: #11171A;
    font-size: 16px;
    text-align: center;
    line-height: 31px;
    border-color: #607D8B;
    border-width: 2px;
}
body.status-page .timeline .moment .status-icon.status-1 {
    background: #F44336;
}
body.status-page .timeline .moment .status-icon.status-2 {
    background: #FFC107;
}
body.status-page .timeline .moment .status-icon.status-3 {
    background: #03A9F4;
}
body.status-page .timeline .moment .status-icon.status-4 {
    background: #1DE9B6;
}
body.status-page .timeline .moment::before {
    background: #607D8B;
}
body.status-page .timeline .moment .status-icon .icon {
    position: initial;
    color: #000 !important;
}
body.status-page .timeline .moment .panel-message.list-group.components, body.status-page .timeline .moment .panel.panel-message, .incident {
    background-color: #37474F;
    border-color: #455A64;
}
.btn.btn-default {
    background: transparent;
    color: #B0BEC5;
    border-color: #607D8B;
}
.btn.btn-default:hover {
    background: #546E7A;
    color: #FFF;
    border-color: #607D8B;
}
.btn.btn-danger {
    background: transparent;
    color: #F44336;
    border-color: #607D8B;
}
.btn.btn-danger:hover {
    background: #F44336;
    color: #FFF;
    border-color: #607D8B;
}
body.status-page .timeline .moment .status-icon.status-1 .icon:before {
    content: "" !important;
}
body.status-page .timeline .moment .status-icon.status-3 .icon:before {
    content: "" !important;
}
.alert.alert-success {
    color: #000;
}
.group-toggle {
    display: none;
}
body.status-page .timeline .moment:last-child::before {
    height: 48px;
}
body.status-page .timeline .moment:first-child::before {
    top: 48px;
}
body.status-page .timeline .moment:only-child::before {
    display: none;
}
.panel.panel-message::before {
    border-left-color: #455A64 !important;
    border-right-color: #455A64 !important;
    left: 0px !important;
}
.panel.panel-message::after {
    border-left-color: #37474F !important;
    border-right-color: #37474F !important;
}
a {
    color: #00ffcc;
}

Edited May 29, 2022 by nerdzero