Dark mode

static/css/badges-dark.css

@@ -0,0 +1,4 @@
+.table.badge-preview code {
+    background-color: #666;
+    color: #000;
+}

static/css/base-dark.css

@@ -0,0 +1,36 @@
+#logo {
+    max-height: 50px;
+    margin-top: -16px;
+    background-color: #aaa;
+}
+
+#nav-sign-up span {
+    display: inline-block;
+    color: #ccc;
+    background-color: #7ab694;
+    font-weight: bold;
+    border: 1px solid #1ea65a;
+    border-radius: 5px;
+    padding: 8px 16px;
+    transition: all 0.2s ease;
+}
+
+.hc-dialog {
+    background: #FFF;
+    color: #000;
+    padding: 2em;
+    margin-top: 100px;
+}
+
+.hc-dialog h1 {
+    margin: 0;
+    color: #000;
+}
+
+
+#debug-warning {
+    background: #333;
+    text-align: center;
+    font-size: small;
+    padding: 2px 0;
+}

static/css/bootstrap-dark.css

@@ -0,0 +1,382 @@
+/*!
+ * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+pre {
+  overflow: auto;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+input {
+  line-height: normal;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+}
+optgroup {
+  font-weight: bold;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0;
+}
+/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
+@media print {
+  *,
+  *:before,
+  *:after {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: "";
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+  .navbar {
+    display: none;
+  }
+  .btn > .caret,
+  .dropup > .btn > .caret {
+    border-top-color: #000 !important;
+  }
+  .label {
+    border: 1px solid #000;
+  }
+  .table {
+    border-collapse: collapse !important;
+  }
+  .table td,
+  .table th {
+    background-color: #333 !important;
+  }
+  .table-bordered th,
+  .table-bordered td {
+    border: 1px solid #444 !important;
+  }
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #fff;
+  background-color: #333;
+}
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857143;
+  background-color: #333;
+  border: 1px solid #444;
+  border-radius: 2px;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 1.1;
+  color: #fff;
+}
+output {
+  display: block;
+  padding-top: 7px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #aaa;
+}
+.form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #000;
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.form-control::-moz-placeholder {
+  color: #666;
+  opacity: 1;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  color: #111;
+  background-color: #aaa;
+  border: 1px solid #777;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+.navbar-default {
+  background-color: #aaa;
+  border-color: #eeeeee;
+}
+.navbar-default .navbar-brand {
+  color: #333;
+}
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #5e5e5e;
+  background-color: transparent;
+}
+.navbar-default .navbar-text {
+  color: #333;
+}
+.navbar-default .navbar-nav > li > a {
+  color: #333;
+}
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: #0000ff;
+  background-color: transparent;
+}
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: #fff;
+  background-color: #665fca;
+}
+.jumbotron {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+  color: inherit;
+  background-color: #3d3d3d;
+}
+
+.modal-content {
+  position: relative;
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  background-clip: padding-box;
+  outline: 0;
+}
+
+.modal-content h1,
+.modal-content h2,
+.modal-content h3,
+.modal-content h4{
+  color: #000;
+}

static/css/channels-dark.css

@@ -0,0 +1,30 @@
+.channels-table .unnamed {
+    font-style: italic;
+    color: #AAA;
+}
+
+
+.channels-table .channel-row:hover > td {
+    background: #666;
+    color: #fff;
+}
+
+.channel-details-mini span {
+    color: #aaa;
+}
+
+.edit-checks {
+    color: #ccc;
+}
+
+.edit-checks:hover {
+    text-decoration: none;
+    color: #3429ce;;
+}
+
+.add-integration li:hover,
+.add-integration li:hover h2 {
+    background: #666;
+    color: #fff;
+}
+

static/css/details-dark.css

@@ -0,0 +1,4 @@
+#details-integrations.rw tr:hover th, #details-integrations.rw tr:hover td {
+    cursor: pointer;
+    background-color: #999;
+}

static/css/docs-dark.css

@@ -0,0 +1,19 @@
+.docs-nav li.nav-header {
+    color: #fff;
+    font-weight: bold;
+}
+
+.page-docs code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #333;
+    background-color: #666;
+    border-radius: 4px;
+}
+
+.page-docs pre code {
+    padding: 0;
+    font-size: 13px;
+    background-color: #fff;
+    border-radius: 0;
+}

static/css/log-dark.css

@@ -0,0 +1,20 @@
+#log td {
+    color: #fff;
+    position: relative;
+    border: 0;
+    border-bottom: 1px solid #E5E5E5;
+}
+
+#log .details span.ua-body {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 11.7px;
+    color: #ccc;
+}
+
+#log tr.ok:hover td {
+    background-color: #999;
+}
+
+#log .hash {
+    color: #fff;
+}

static/css/login-dark.css

@@ -0,0 +1,4 @@
+.page-login form input {
+    margin-bottom: 20px;
+    color: #fff;
+}

static/css/my_checks-dark.css

@@ -0,0 +1,5 @@
+#my-checks-tags .up {
+    color: #fff;
+    background-color: #333;
+    border-color: #ccc;
+}

static/css/my_checks_desktop-dark.css

@@ -0,0 +1,46 @@
+#checks-table .checks-row:hover {
+    background-color: #666;
+}
+
+#checks-table a.default {
+    color: #8bc0e2;
+}
+
+#checks-table.rw tr:hover .my-checks-name,
+#checks-table.rw tr:hover .integrations,
+#checks-table.rw tr:hover .timeout-grace,
+#checks-table tr:hover .last-ping {
+    border: 1px dotted #333;
+    cursor: pointer;
+}
+
+.checks-subline {
+    color: #999;
+    white-space: nowrap;
+}
+
+.url-cell .base {
+    color: #999;
+}
+
+.my-checks-url {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 11.7px;
+    position: relative;
+    line-height: 36px;
+    color: #fff;
+}
+
+#checks-table .btn {
+    border-color: transparent;
+    font-size: 20px;
+    background-color: #222;
+    color: #999;
+}
+
+#checks-table tr:hover .btn {
+    color: #333;
+    border-color: #333;
+    background: transparent;
+    opacity: 1;
+}

static/css/profile-dark.css

@@ -0,0 +1,3 @@
+.settings-bar code {
+    background-color: #888;
+}

static/css/projects-dark.css

@@ -0,0 +1,10 @@
+#project-selector #add-project:hover .project {
+    border-color: #0091EA;
+    color: #ddd;
+}
+
+
+.project
+{
+    color: #ddd;
+}

static/css/welcome-dark.css

@@ -0,0 +1,13 @@
+.index-bleed {
+    background: #333;
+    padding-bottom: 2em;
+}
+
+.get-started-bleed {
+    background: #444;
+    padding: 3em 0;
+}
+
+.footer-jumbo-bleed {
+    background: #666;
+}

templates/base.html

@@ -17,6 +17,7 @@
     {% block head %}{% endblock %}
     {% compress css %}
     <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/bootstrap-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/selectize.hc.css' %}" type="text/css">
 
@@ -25,30 +26,42 @@
     <link rel="stylesheet" href="{% static 'css/add_pushover.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/webhook_form.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/badges.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/badges-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/base-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/billing.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/channel_checks.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/channels.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/channels-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/checkbox.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/details.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/details-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/docs.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/docs-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">    
     <link rel="stylesheet" href="{% static 'css/docs_cron.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/icomoon.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/log.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/log-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/login.css' %}" type="text/css">
-    <link rel="stylesheet" href="{% static 'css/my_checks.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/login-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
+    <link rel="stylesheet" href="{% static 'css/my_checks.css' %}" type="text/css" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/my_checks-dark.css' %}" type="text/css" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/my_checks_desktop.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/my_checks_desktop-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/ping_details.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/profile.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/profile-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/projects.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/projects-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/radio.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/settings.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/snippet-copy.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/welcome.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/welcome-dark.css' %}" type="text/css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="{% static 'css/set_password.css' %}" type="text/css">
     {% endcompress %}
 </head>