Added Theme switcher.

frontend/src/assets/css/style.css

@@ -2,10 +2,6 @@
     unicode-bidi: plaintext;
   }
 
-body {
-  margin-top: 1em;
-}
-
   .container {
     padding: 1em;
     margin-top: 1em;
@@ -18,44 +14,6 @@ body {
     border-radius: 15px;
   }
 
-.is-pre {
-  white-space: pre;
-}
-
-@media (prefers-color-scheme: light) {
-
-  html,
-  body {
-    background-color: #eaeaea;
-  }
-
-  .container {
-    background-color: #ffffff;
-  }
-
-  hr {
-    background-color: #000;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  select.title {
-    color: black;
-  }
-
-  .has-duplicate-color {
-    background-color: #484848;
-  }
-
-  hr {
-    background-color: #fff;
-  }
-}
-
-.has-pointer {
-  cursor: pointer;
-}
-
   progress.show-value {
     position: relative;
   }
@@ -87,46 +45,10 @@ progress.show-value.is-large:after {
     line-height: 1.5rem;
   }
 
-.is-pre-wrap {
-  white-space: pre-wrap;
-}
-
   table.is-fixed {
     table-layout: fixed;
   }
 
-.is-word-break {
-  word-break: break-all;
-}
-
-.el,
-.el-expand {
-  cursor: pointer;
-}
-
-.el {
-  max-width: 99%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.el-expand {
-  word-break: break-all;
-}
-
-abbr {
-  cursor: help;
-}
-
-.is-pointer {
-  cursor: pointer;
-}
-
-.is-rtl {
-  direction: rtl;
-}
-
   .progress.is-auto {
     height: unset;
     max-height: 35px;
@@ -159,136 +81,127 @@ div.d-progress>span.d-progress-text {
     white-space: nowrap;
   }
 
+  .is-bordered-danger {
+    border: 1px solid red;
+  }
+
+
+  html,
+  body {
+    background-color: #eaeaea;
+  }
+
+  .container {
+    background-color: #ffffff;
+  }
+
+  hr {
+    background-color: #000;
+  }
+
   @media (prefers-color-scheme: dark) {
+    * {
+      unicode-bidi: plaintext;
+    }
+
+    .container {
+      padding: 1em;
+      margin-top: 1em;
+    }
+
+    .container,
+    .card,
+    .box,
+    .navbar {
+      border-radius: 15px;
+    }
+
+    progress.show-value {
+      position: relative;
+    }
+
+    progress.show-value:after {
+      content: attr(data-text);
+      position: absolute;
+      top: 0;
+      left: 50%;
+      -ms-transform: translateX(-50%);
+      transform: translateX(-50%);
+      font-size: calc(1rem / 1.5);
+      line-height: 1rem;
+      white-space: pre;
+    }
+
+    progress.show-value.is-small:after {
+      font-size: calc(0.75rem / 1.5);
+      line-height: 0.75rem;
+    }
+
+    progress.show-value.is-medium:after {
+      font-size: calc(1.25rem / 1.5);
+      line-height: 1.25rem;
+    }
+
+    progress.show-value.is-large:after {
+      font-size: calc(1.5rem / 1.5);
+      line-height: 1.5rem;
+    }
+
+    table.is-fixed {
+      table-layout: fixed;
+    }
+
+    .progress.is-auto {
+      height: unset;
+      max-height: 35px;
+    }
+
+    .progress-text {
+      margin: 0 50%;
+      position: relative;
+      white-space: pre;
+    }
+
     div.d-progress {
-    background-color: #999999;
+      background-color: #ededed;
-    color: #313131;
+      position: relative;
-  }
     }
 
-.button.is-purple {
+    div.d-progress-bar {
-  background-color: #5f00d1;
+      width: 50%;
-  border-color: transparent;
+      height: 1.5rem;
-  color: #fff;
+      transition: width 150ms;
     }
 
-.button.is-dark-gray {
+    div.d-progress>span.d-progress-text {
-  background-color: #6c6b6d;
+      position: absolute;
-  border-color: transparent;
+      display: inline-block;
-  color: #fff;
+      left: 50%;
-}
+      transform: translateX(-50%);
-
-.hdr {
-  width: 100%;
-  max-height: 367px;
-  max-width: 500px;
-  display: block;
-  padding-bottom: 8px;
-  margin: auto auto 8px auto;
-  border-radius: 9px !important;
-}
-
-
-.is-ellipsis-reverse {
-  max-width: 99%;
-
-  text-align: left;
-
-  white-space: nowrap;
       overflow: hidden;
-  text-overflow: ellipsis;
+      font-size: calc(1.5rem / 1.5);
-
-  direction: rtl;
-  unicode-bidi: unset;
-}
-
-.is-ellipsis-reverse>*,
-.is-ellipsis-reverse>*>* {
-  unicode-bidi: unset;
-}
-
-[data-tooltip]:not(.is-loading):hover::before,
-[data-tooltip]:not(.is-loading):hover::after,
-[data-tooltip]:not(.is-loading).has-tooltip-active::before,
-[data-tooltip]:not(.is-loading).has-tooltip-active::after,
-[data-tooltip]:not(.is-disabled):hover::before,
-[data-tooltip]:not(.is-disabled):hover::after,
-[data-tooltip]:not(.is-disabled).has-tooltip-active::before,
-[data-tooltip]:not(.is-disabled).has-tooltip-active::after,
-[data-tooltip]:not([disabled]):hover::before,
-[data-tooltip]:not([disabled]):hover::after,
-[data-tooltip]:not([disabled]).has-tooltip-active::before,
-[data-tooltip]:not([disabled]).has-tooltip-active::after {
       white-space: nowrap;
     }
 
-.is-inline-grid {
-  display: inline-grid;
-}
-
-.is-grid {
-  display: grid;
-}
-
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 99.99%;
-}
-
-.is-blurry-text {
-  color: transparent;
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-}
-
-.max-width-el {
-  max-width: 410px;
-}
-
-@media screen and (max-width: 768px) {
-  .max-width-el {
-    max-width: 100px;
-  }
-
-  .modal-card-title {
-    max-width: 90%;
-    min-width: 90%;
-    text-overflow: ellipsis;
-  }
-}
-
     .is-bordered-danger {
       border: 1px solid red;
     }
 
-.is-max-fullwidth {
+    hr {
-  max-width: 100% !important;
+      background-color: #fff;
     }
 
-select.is-full-width {
+    div.d-progress {
-  display: flex;
+      background-color: #999999;
-  width: 100%;
+      color: #313131;
     }
 
-.columns.is-right {
+    html,
-  justify-content: flex-end;
+    body {
+      background-color: #000000;
     }
 
-td.is-middle {
+    .container {
-  vertical-align: middle;
+      background-color: #0f1010;
-}
-
-.table.is-truncated {
-  width: 100%;
-  table-layout: fixed;
-  white-space: nowrap;
-
-  td {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:first-child {
-      text-overflow: clip;
-    }
     }
   }

frontend/src/components/Page-Header.vue

@@ -17,12 +17,19 @@
           </span>
         </span>
       </div>
+      <div class="navbar-item">
+        <button data-tooltip="Switch to Light theme" class="button is-dark has-tooltip-bottom" @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button>
+        <button data-tooltip="Switch to Dark theme" class="button is-dark  has-tooltip-bottom" @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">🌚</button>
+      </div>
     </div>
   </nav>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps, watch, onMounted } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')());
 
 defineProps({
   config: {
@@ -30,4 +37,52 @@ defineProps({
     required: true
   }
 })
+
+const applyPreferredColorScheme = (scheme) => {
+  for (var s = 0; s < document.styleSheets.length; s++) {
+    for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
+      const rule = document.styleSheets[s].cssRules[i];
+
+      if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
+        console.log(rule.media.mediaText, rule, scheme)
+        switch (scheme) {
+          case "light":
+            rule.media.appendMedium("original-prefers-color-scheme");
+            if (rule.media.mediaText.includes("light")) {
+              rule.media.deleteMedium("(prefers-color-scheme: light)");
+            }
+            if (rule.media.mediaText.includes("dark")) {
+              rule.media.deleteMedium("(prefers-color-scheme: dark)");
+            }
+            break;
+          case "dark":
+            rule.media.appendMedium("(prefers-color-scheme: light)");
+            rule.media.appendMedium("(prefers-color-scheme: dark)");
+            if (rule.media.mediaText.includes("original")) {
+              rule.media.deleteMedium("original-prefers-color-scheme");
+            }
+            break;
+          default:
+            rule.media.appendMedium("(prefers-color-scheme: dark)");
+            if (rule.media.mediaText.includes("light")) {
+              rule.media.deleteMedium("(prefers-color-scheme: light)");
+            }
+            if (rule.media.mediaText.includes("original")) {
+              rule.media.deleteMedium("original-prefers-color-scheme");
+            }
+            break;
+        }
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  applyPreferredColorScheme(selectedTheme.value);
+})
+
+watch(selectedTheme, (value) => {
+  applyPreferredColorScheme(value);
+})
+
 </script>

frontend/src/main.js

@@ -13,8 +13,7 @@ import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
 import 'vue-toastification/dist/index.css'
 import 'bulma/css/bulma.css'
 import './assets/css/style.css'
-//import './assets/css/bulma-dark.css'
+import './assets/css/bulma-dark.css'
-import './assets/css/bulma-darker.css'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
 
 library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,