Close #99: Implement dark theme

2024-11-21 15:33:17 +01:00 · 2021-05-09 12:59:22 -04:00 · 2021-05-09 12:59:22 -04:00 · 2a632e8f87
commit 2a632e8f87
parent 857ad584e7
12 changed files with 86 additions and 46 deletions
--- a/web/app/public/index.html
+++ b/web/app/public/index.html
@ -7,7 +7,7 @@
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Health Dashboard | Gatus</title>
  </head>
-  <body>
+  <body class="dark:bg-gray-900">
    <noscript>
      <strong>Enable JavaScript to view this page.</strong>
    </noscript>
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left" id="global">
+  <div class="container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left dark:bg-gray-800 dark:text-gray-200 dark:border-gray-500" id="global">
    <div class="mb-2">
      <div class="flex flex-wrap">
        <div class="w-3/4 text-left my-auto">
@ -39,18 +39,3 @@ export default {
  },
 }
 </script>
-
-
-<style>
-html {
-  height: 100%;
-}
-
-html, body {
-  background-color: #f7f9fb;
-}
-
-#global, #results {
-  max-width: 1200px;
-}
-</style>
--- a/web/app/src/components/Pagination.vue
+++ b/web/app/src/components/Pagination.vue
@ -1,10 +1,10 @@
 <template>
  <div class="mt-3 flex">
    <div class="flex-1">
-      <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&lt;</button>
+      <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 text-gray-500 border border-gray-200 px-2 rounded font-mono dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">&lt;</button>
    </div>
    <div class="flex-1 text-right">
-      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&gt;</button>
+      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 text-gray-500 border border-gray-200 px-2 rounded font-mono dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">&gt;</button>
    </div>
  </div>
 </template>
--- a/web/app/src/components/Service.vue
+++ b/web/app/src/components/Service.vue
@ -1,8 +1,8 @@
 <template>
-  <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data">
+  <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-500' v-if="data">
    <div class='flex flex-wrap mb-2'>
      <div class='w-3/4'>
-        <router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline" title="View detailed service health">
+        <router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline dark:hover:text-blue-400" title="View detailed service health">
          {{ data.name }}
        </router-link>
        <span v-if="data.results && data.results.length" class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
@ -132,8 +132,6 @@ export default {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-width: 3px;
-  border-color: #dee2e6;
-  border-style: solid;
 }

 .status-over-time {
--- a/web/app/src/components/ServiceGroup.vue
+++ b/web/app/src/components/ServiceGroup.vue
@ -1,8 +1,8 @@
 <template>
  <div :class="services.length === 0 ? 'mt-3' : 'mt-4'">
    <slot v-if="name !== 'undefined'">
-      <div class="service-group pt-2 border" @click="toggleGroup">
-        <h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3'>
+      <div class="service-group pt-2 border dark:bg-gray-800 dark:border-gray-500" @click="toggleGroup">
+        <h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3 dark:text-gray-200 dark:hover:text-gray-500 dark:border-gray-500'>
          <span v-if="healthy" class='text-green-600'>&#10003;</span>
          <span v-else class='text-yellow-400'>~</span>
          {{ name }}
@ -96,6 +96,6 @@ export default {
 }

 .service-group h5:hover {
-  color: #1b1e21 !important;
+  color: #1b1e21;
 }
 </style>
--- a/web/app/src/components/Settings.vue
+++ b/web/app/src/components/Settings.vue
@ -1,17 +1,23 @@
 <template>
  <div id="settings">
-    <div class="flex bg-gray-200 rounded border border-gray-300 shadow">
-      <div class="text-sm text-gray-600 rounded-xl py-1 px-2">
-        &#x21bb;
+    <div class="flex">
+      <div class="flex bg-gray-200 border-gray-300 rounded border shadow dark:text-gray-200 dark:bg-gray-800 dark:border-gray-500">
+        <div class="text-xs text-gray-600 rounded-xl py-1 px-2 dark:text-gray-200">
+          &#x21bb;
+        </div>
+        <select class="text-center text-gray-500 text-xs dark:text-gray-200 dark:bg-gray-800 border-r border-l border-gray-300 dark:border-gray-500" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
+          <option value="10" :selected="refreshInterval === 10">10s</option>
+          <option value="30" :selected="refreshInterval === 30">30s</option>
+          <option value="60" :selected="refreshInterval === 60">1m</option>
+          <option value="120" :selected="refreshInterval === 120">2m</option>
+          <option value="300" :selected="refreshInterval === 300">5m</option>
+          <option value="600" :selected="refreshInterval === 600">10m</option>
+        </select>
+        <button @click="toggleDarkMode" class="text-xs p-1">
+          <slot v-if="darkMode">☀</slot>
+          <slot v-else>🌙</slot>
+        </button>
      </div>
-      <select class="text-center text-gray-500 text-sm" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
-        <option value="10" :selected="refreshInterval === 10">10s</option>
-        <option value="30" :selected="refreshInterval === 30">30s</option>
-        <option value="60" :selected="refreshInterval === 60">1m</option>
-        <option value="120" :selected="refreshInterval === 120">2m</option>
-        <option value="300" :selected="refreshInterval === 300">5m</option>
-        <option value="600" :selected="refreshInterval === 600">10m</option>
-      </select>
    </div>
  </div>
 </template>
@ -36,6 +42,24 @@ export default {
      this.refreshData();
      clearInterval(this.refreshIntervalHandler);
      this.setRefreshInterval(this.$refs.refreshInterval.value);
+    },
+    toggleDarkMode() {
+      if (localStorage.theme === 'dark') {
+        localStorage.theme = 'light';
+      } else {
+        localStorage.theme = 'dark';
+      }
+      this.applyTheme();
+    },
+    applyTheme() {
+      console.log(localStorage.theme, 'theme' in localStorage);
+      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        this.darkMode = true;
+        document.documentElement.classList.add('dark');
+      } else {
+        this.darkMode = false;
+        document.documentElement.classList.remove('dark');
+      }
    }
  },
  created() {
@ -43,6 +67,8 @@ export default {
      this.refreshInterval = 60;
    }
    this.setRefreshInterval(this.refreshInterval);
+    // dark mode
+    this.applyTheme();
  },
  unmounted() {
    clearInterval(this.refreshIntervalHandler);
@ -51,6 +77,7 @@ export default {
    return {
      refreshInterval: sessionStorage.getItem('gatus:refresh-interval') < 10 ? 60 : parseInt(sessionStorage.getItem('gatus:refresh-interval')),
      refreshIntervalHandler: 0,
+      darkMode: false
    }
  },
 }
--- a/web/app/src/index.css
+++ b/web/app/src/index.css
@ -5,3 +5,35 @@
 .bg-success {
    background-color: #28a745;
 }
+
+html {
+    height: 100%;
+}
+
+body {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    min-height: 100vh;
+}
+
+html, body {
+    background-color: #f7f9fb;
+}
+
+#global {
+    margin-top: 0 !important;
+}
+
+#global, #results {
+    max-width: 1280px;
+}
+
+@media screen and (max-width: 1279px) {
+    body {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    #global {
+        min-height: 100vh;
+    }
+}
--- a/web/app/src/views/Details.vue
+++ b/web/app/src/views/Details.vue
@ -1,5 +1,5 @@
 <template>
-  <router-link to="../" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none">
+  <router-link to="../" class="absolute top-2 left-2 inline-block px-2 pb-0.5 text-lg text-black bg-gray-100 rounded hover:bg-gray-200 focus:outline-none border border-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">
    &larr;
  </router-link>
  <div>
@ -176,7 +176,5 @@ export default {
 .service {
  border-radius: 3px;
  border-bottom-width: 3px;
-  border-color: #dee2e6;
-  border-style: solid;
 }
 </style>
--- a/web/app/tailwind.config.js
+++ b/web/app/tailwind.config.js
@ -1,6 +1,6 @@
 module.exports = {
-  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'class', // or 'media' or 'class'
  theme: {
    fontFamily: {
      'mono': ['Consolas', 'Monaco', '"Courier New"', 'monospace']
--- a/web/static/css/app.css
+++ b/web/static/css/app.css
--- a/web/static/index.html
+++ b/web/static/index.html
@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Health Dashboard | Gatus</title><link href="/css/app.css" rel="preload" as="style"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"><link href="/css/app.css" rel="stylesheet"></head><body><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.js"></script><script src="/js/app.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Health Dashboard | Gatus</title><link href="/css/app.css" rel="preload" as="style"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"><link href="/css/app.css" rel="stylesheet"></head><body class="dark:bg-gray-900"><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.js"></script><script src="/js/app.js"></script></body></html>
--- a/web/static/js/app.js
+++ b/web/static/js/app.js