✨ Add support for multiple themes

upptime · Jan 22, 2021 · 17aa659 · 17aa659
1 parent 527499a
commit 17aa659
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 91 deletions.
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -2,51 +2,43 @@
   import Nav from "../components/Nav.svelte";
   import config from "../data/config.json";
   import snarkdown from "snarkdown";
-  import { each } from "svelte/internal";
   export let segment;
 </script>
 
-<style>
-  footer {
-    text-align: center;
-    opacity: 0.75;
-    margin-top: 3rem;
-  }
-</style>
-
 <svelte:head>
   <link
     rel="icon"
     type="image/svg"
-    href={(config['status-website'] || {}).faviconSvg || (config['status-website'] || {}).favicon || `https://github.com/raw/koj-co/upptime/master/assets/icon.svg`} />
+    href={(config["status-website"] || {}).faviconSvg ||
+      (config["status-website"] || {}).favicon ||
+      `https://github.com/raw/koj-co/upptime/master/assets/icon.svg`}
+  />
   <link
     rel="icon"
     type="image/png"
-    href={(config['status-website'] || {}).favicon || `/logo-192.png`} />
-  {#if config['status-website'].scripts}
-    {#each config['status-website'].scripts as script}
-      <script src={script.src} async={!!script.async} defer={!!script.async}>
-      </script>
-    {/each}
+    href={(config["status-website"] || {}).favicon || `/logo-192.png`}
+  />
+  {#if config["status-website"].scripts}
+    {#each config["status-website"].scripts as script}<script
+        src={script.src}
+        async={!!script.async}
+        defer={!!script.async}>
+      </script>{/each}
   {/if}
-  {#if config['status-website'].links}
-    {#each config['status-website'].links as link}
+  {#if config["status-website"].links}
+    {#each config["status-website"].links as link}
       <link rel={link.rel} href={link.href} media={link.media} />
     {/each}
   {/if}
+  <link
+    rel="stylesheet"
+    href={`/themes/${(config["status-website"] || {}).theme || "light"}.css`}
+  />
   {#if config['status-website'].css}
-    {@html `
-    <style>
-${config['status-website'].css}
-    </style>`
-    }
+    {@html `<style>${config['status-website'].css}</style>`}
   {/if}
   {#if config['status-website'].js}
-    {@html `
-    <script>
-${config['status-website'].js}
-    </script>`
-    }
+    {@html `<script>${config['status-website'].js}</script>`}
   {/if}
 </svelte:head>
 
@@ -58,6 +50,16 @@ ${config['status-website'].js}
 
 <footer>
   <p>
-    {@html snarkdown(config.i18n.footer.replace(/\$REPO/, `https://github.com/${config.owner}/${config.repo}`))}
+    {@html snarkdown(
+      config.i18n.footer.replace(/\$REPO/, `https://github.com/${config.owner}/${config.repo}`)
+    )}
   </p>
 </footer>
+
+<style>
+  footer {
+    text-align: center;
+    opacity: 0.75;
+    margin-top: 3rem;
+  }
+</style>
diff --git a/static/global.css b/static/global.css
@@ -4,8 +4,6 @@ body {
     Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   line-height: 1.5;
   padding-bottom: 2.5rem;
-  color: #333;
-  background-color: #f0f7f7;
 }
 
 h1,
@@ -30,8 +28,6 @@ a {
 code {
   font-family: menlo, inconsolata, monospace;
   font-size: calc(1em - 2px);
-  color: #555;
-  background-color: #f0f0f0;
   padding: 0.2em 0.4em;
   border-radius: 2px;
 }
@@ -50,11 +46,10 @@ code {
 }
 
 article {
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 1rem 1.25rem;
   position: relative;
   border-radius: 0.2rem;
+  border: 1px solid;
 }
 article.link a::after {
   content: "";
@@ -77,13 +72,13 @@ h4 {
   font-weight: bold;
 }
 article.down {
-  border-left: 0.2rem solid #e74c3c;
+  border-left: 0.2rem solid;
 }
 article.degraded {
-  border-left: 0.2rem solid #f39c12 !important;
+  border-left: 0.2rem solid;
 }
 article.up {
-  border-left: 0.2rem solid #2ecc71;
+  border-left: 0.2rem solid;
 }
 
 .f {
@@ -97,20 +92,8 @@ section + h2 {
   margin-top: 2rem;
 }
 
-.tag.closed,
-.tag.up {
-  background-color: #16a085;
-}
-.tag.open,
-.tag.down {
-  background-color: #c0392b;
-}
-.tag.degraded {
-  background-color: #f39c12 !important;
-}
 .tag {
   display: inline-block;
-  color: #fff;
   padding: 0.33rem 0.5rem;
   border-radius: 0.2rem;
   font-size: 70%;
@@ -129,54 +112,16 @@ dl dd {
   margin: 0 0 1rem 0;
 }
 
-.dark body {
-  background-color: #001716;
-  color: #f0ffff;
-}
-.dark article {
-  background-color: #002b29;
-}
-
-article.down {
-  background-color: #ffdce3;
-}
-article.degraded {
-  background-color: #ffdfad;
-}
-article.good {
-  background-color: #dcffeb;
-  color: #003300;
-}
-
-.live-status article {
-  background-color: #fff;
-}
-
-.dark article {
-  background-color: #700000;
-}
-
-.changed + section .data {
-  background-color: #fdcb6e;
-}
-
 nav {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-}
-.dark nav {
-  background-color: #002b29;
+  border-bottom: 1px solid;
 }
 
 [aria-current] {
-  border-bottom: 2px solid #3498db;
+  border-bottom: 2px solid;
 }
 
 a.error-button {
-  border: 0.1rem solid rgba(0, 0, 0, 0.25);
-  background-color: #01a3a4;
-  color: #fff;
-  border-color: transparent;
+  border: 0.1rem solid;
 }
 
 .submit-button {

diff --git a/static/themes/dark.css b/static/themes/dark.css
@@ -0,0 +1,15 @@
+.dark body {
+  background-color: #001716;
+  color: #f0ffff;
+}
+.dark article {
+  background-color: #002b29;
+}
+
+.dark article {
+  background-color: #700000;
+}
+
+.dark nav {
+  background-color: #002b29;
+}
diff --git a/static/themes/light.css b/static/themes/light.css
@@ -0,0 +1,74 @@
+body {
+  color: #333;
+  background-color: #f0f7f7;
+}
+
+code {
+  color: #555;
+  background-color: #f0f0f0;
+}
+
+article {
+  background-color: #fff;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+article.down {
+  border-left-color: #e74c3c;
+  background-color: #ffdce3;
+}
+article.degraded {
+  border-left-color: #f39c12 !important;
+  background-color: #ffdfad;
+}
+article.up {
+  border-left-color: #2ecc71;
+}
+article.good {
+  background-color: #dcffeb;
+  color: #003300;
+}
+
+.tag {
+  color: #fff;
+}
+.tag.closed,
+.tag.up {
+  background-color: #16a085;
+}
+.tag.open,
+.tag.down {
+  background-color: #c0392b;
+}
+.tag.degraded {
+  background-color: #f39c12 !important;
+}
+
+.changed + section .data {
+  background-color: #fdcb6e;
+}
+
+.live-status article {
+  background-color: #fff;
+}
+
+nav {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+[aria-current] {
+  border-bottom-color: #3498db;
+}
+
+a.error-button {
+  border-color: rgba(0, 0, 0, 0.25);
+  background-color: #01a3a4;
+  color: #fff;
+}
+
+.submit-button {
+  background-color: #01a3a4;
+  color: #fff;
+  border-color: transparent;
+}