♻️ Use variables for themes

upptime · Jan 22, 2021 · 4f826a7 · 4f826a7
1 parent eb50ba9
commit 4f826a7
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 164 deletions.
diff --git a/src/components/ActiveIncidents.svelte b/src/components/ActiveIncidents.svelte
@@ -40,7 +40,7 @@
 </script>
 
 {#if !incidents.length && !loading}
-  <article class="good">✅ &nbsp; {config.i18n.allSystemsOperational}</article>
+  <article class="up">✅ &nbsp; {config.i18n.allSystemsOperational}</article>
 {/if}
 
 <section>
@@ -49,7 +49,9 @@
   {:else if incidents.length}
     <h2>{config.i18n.activeIncidents}</h2>
     {#each incidents as incident}
-      <article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
+      <article
+        class="down down-active link {incident.title.includes('degraded') ? 'degraded' : ''}"
+      >
         <div class="f">
           <div>
             <h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -6,6 +6,10 @@
 </script>
 
 <svelte:head>
+  <link
+    rel="stylesheet"
+    href={`/themes/${(config["status-website"] || {}).theme || "light"}.css`}
+  />
   <link
     rel="icon"
     type="image/svg"
@@ -30,10 +34,6 @@
       <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>`}
   {/if}

diff --git a/static/global.css b/static/global.css
@@ -25,13 +25,6 @@ a {
   color: inherit;
 }
 
-code {
-  font-family: menlo, inconsolata, monospace;
-  font-size: calc(1em - 2px);
-  padding: 0.2em 0.4em;
-  border-radius: 2px;
-}
-
 @media (min-width: 400px) {
   body {
     font-size: 16px;
@@ -124,8 +117,87 @@ a.error-button {
   border: 0.1rem solid;
 }
 
+/* Theming */
+
 .submit-button {
   background-color: #01a3a4;
   color: #fff;
   border-color: transparent;
 }
+
+body {
+  background-color: var(--body-background-color);
+  color: var(--body-text-color);
+}
+
+code {
+  color: var(--code-color);
+  background-color: var(--code-background-color);
+}
+
+article {
+  background-color: var(--card-background-color);
+  border-color: var(--card-border-color);
+}
+
+article.down {
+  border-left-color: var(--down-border-left-color) !important;
+  color: var(--down-color-color);
+}
+article.down-active {
+  background-color: var(--down-background-color);
+  border-color: var(--down-border-left-color);
+}
+article.degraded {
+  border-left-color: var(--degraded-border-left-color) !important;
+  color: var(--degraded-color-color);
+}
+article.up {
+  border-left-color: var(--up-border-left-color) !important;
+  color: var(--up-color-color);
+}
+
+.tag {
+  color: var(--tag-color);
+}
+.tag.closed,
+.tag.up {
+  background-color: var(--tag-up-background-color) !important;
+}
+.tag.open,
+.tag.down {
+  background-color: var(--tag-down-background-color) !important;
+}
+.tag.degraded {
+  background-color: var(--tag-degraded-background-color) !important;
+}
+
+.changed + section .data {
+  background-color: var(--change-background-color);
+}
+
+nav {
+  border-bottom-color: var(--nav-border-bottom-color);
+  background-color: var(--nav-background-color);
+}
+
+[aria-current] {
+  border-bottom-color: var(--nav-current-border-bottom-color);
+}
+
+a.error-button {
+  border-color: var(--error-button-border-color);
+  background-color: var(--error-button-background-color);
+  color: var(--error-button-color);
+}
+
+.submit-button {
+  background-color: var(--submit-button-background-color);
+  color: var(--submit-button-color);
+  border-color: var(--submit-button-border-color);
+}
+
+article .graph {
+  opacity: var(--graph-opacity);
+  filter: var(--graph-filter);
+}
diff --git a/static/themes/light.css b/static/themes/light.css
@@ -1,74 +1,26 @@
-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;
+:root {
+  --body-background-color: #f0f7f7;
+  --body-text-color: #002626;
+  --card-background-color: #ffffff;
+  --nav-background-color: #ffffff;
+  --nav-border-bottom-color: #d8e8e4;
+  --nav-current-border-bottom-color: #1abc9c;
+  --card-border-color: #d8e8e4;
+  --down-border-left-color: #eb3b5a;
+  --down-background-color: #ffd0d2;
+  --degraded-border-left-color: #f7b731;
+  --up-border-left-color: #20bf6b;
+  --tag-color: #ffffff;
+  --tag-up-background-color: #20bf6b;
+  --tag-down-background-color: #eb3b5a;
+  --tag-degraded-background-color: #f7b731;
+  --change-background-color: #f7b731;
+  --error-button-border-color: #1a46ad;
+  --error-button-background-color: #3867d6;
+  --error-button-color: #ffffff;
+  --submit-button-border-color: #1a46ad;
+  --submit-button-background-color: #3867d6;
+  --submit-button-color: #ffffff;
+  --graph-opacity: 1;
+  --graph-filter: none;
 }
diff --git a/static/themes/ocean.css b/static/themes/ocean.css
@@ -1,78 +0,0 @@
-body {
-  background-color: #0c2461;
-  color: #f0ffff;
-}
-
-code {
-  color: #555;
-  background-color: #f0f0f0;
-}
-
-article {
-  background-color: #1e3799;
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-article.down {
-  border-left-color: #e74c3c;
-  background-color: #700000;
-}
-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: #1e3799;
-}
-
-nav {
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-  background-color: #1e3799;
-}
-
-[aria-current] {
-  border-bottom-color: #3498db;
-}
-
-a.error-button {
-  border-color: rgba(0, 0, 0, 0.25);
-  background-color: #01a3a4;
-  color: #1e3799;
-}
-
-.submit-button {
-  background-color: #01a3a4;
-  color: #1e3799;
-  border-color: transparent;
-}
-
-article .graph {
-  opacity: 0.25;
-}