Added Theme switcher.

frontend/src/assets/css/style.css

@@ -1,28 +1,90 @@
-* {
+  * {
-  unicode-bidi: plaintext;
+    unicode-bidi: plaintext;
-}
+  }
 
-body {
+  .container {
-  margin-top: 1em;
+    padding: 1em;
-}
+    margin-top: 1em;
+  }
 
-.container {
+  .container,
-  padding: 1em;
+  .card,
-  margin-top: 1em;
+  .box,
-}
+  .navbar {
+    border-radius: 15px;
+  }
 
-.container,
+  progress.show-value {
-.card,
+    position: relative;
-.box,
+  }
-.navbar {
-  border-radius: 15px;
-}
 
-.is-pre {
+  progress.show-value:after {
-  white-space: pre;
+    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: #ededed;
+    position: relative;
+  }
+
+  div.d-progress-bar {
+    width: 50%;
+    height: 1.5rem;
+    transition: width 150ms;
+  }
+
+  div.d-progress>span.d-progress-text {
+    position: absolute;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+    font-size: calc(1.5rem / 1.5);
+    white-space: nowrap;
+  }
+
+  .is-bordered-danger {
+    border: 1px solid red;
+  }
 
-@media (prefers-color-scheme: light) {
 
   html,
   body {
@@ -36,259 +98,110 @@ body {
   hr {
     background-color: #000;
   }
-}
 
-@media (prefers-color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
-  select.title {
+    * {
-    color: black;
+      unicode-bidi: plaintext;
-  }
+    }
 
-  .has-duplicate-color {
+    .container {
-    background-color: #484848;
+      padding: 1em;
-  }
+      margin-top: 1em;
+    }
 
-  hr {
+    .container,
-    background-color: #fff;
+    .card,
-  }
+    .box,
-}
+    .navbar {
+      border-radius: 15px;
+    }
 
-.has-pointer {
+    progress.show-value {
-  cursor: pointer;
+      position: relative;
-}
+    }
 
-progress.show-value {
+    progress.show-value:after {
-  position: relative;
+      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:after {
+    progress.show-value.is-small:after {
-  content: attr(data-text);
+      font-size: calc(0.75rem / 1.5);
-  position: absolute;
+      line-height: 0.75rem;
-  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 {
+    progress.show-value.is-medium:after {
-  font-size: calc(0.75rem / 1.5);
+      font-size: calc(1.25rem / 1.5);
-  line-height: 0.75rem;
+      line-height: 1.25rem;
-}
+    }
 
-progress.show-value.is-medium:after {
+    progress.show-value.is-large:after {
-  font-size: calc(1.25rem / 1.5);
+      font-size: calc(1.5rem / 1.5);
-  line-height: 1.25rem;
+      line-height: 1.5rem;
-}
+    }
 
-progress.show-value.is-large:after {
+    table.is-fixed {
-  font-size: calc(1.5rem / 1.5);
+      table-layout: fixed;
-  line-height: 1.5rem;
+    }
-}
 
-.is-pre-wrap {
+    .progress.is-auto {
-  white-space: pre-wrap;
+      height: unset;
-}
+      max-height: 35px;
+    }
 
-table.is-fixed {
+    .progress-text {
-  table-layout: fixed;
+      margin: 0 50%;
-}
+      position: relative;
+      white-space: pre;
+    }
 
-.is-word-break {
+    div.d-progress {
-  word-break: break-all;
+      background-color: #ededed;
-}
+      position: relative;
+    }
 
-.el,
+    div.d-progress-bar {
-.el-expand {
+      width: 50%;
-  cursor: pointer;
+      height: 1.5rem;
-}
+      transition: width 150ms;
+    }
 
-.el {
+    div.d-progress>span.d-progress-text {
-  max-width: 99%;
+      position: absolute;
-  overflow: hidden;
+      display: inline-block;
-  text-overflow: ellipsis;
+      left: 50%;
-  white-space: nowrap;
+      transform: translateX(-50%);
-}
+      overflow: hidden;
+      font-size: calc(1.5rem / 1.5);
+      white-space: nowrap;
+    }
 
-.el-expand {
+    .is-bordered-danger {
-  word-break: break-all;
+      border: 1px solid red;
-}
+    }
 
-abbr {
+    hr {
-  cursor: help;
+      background-color: #fff;
-}
+    }
 
-.is-pointer {
+    div.d-progress {
-  cursor: pointer;
+      background-color: #999999;
-}
+      color: #313131;
+    }
 
-.is-rtl {
+    html,
-  direction: rtl;
+    body {
-}
+      background-color: #000000;
+    }
 
-.progress.is-auto {
+    .container {
-  height: unset;
+      background-color: #0f1010;
-  max-height: 35px;
-}
-
-.progress-text {
-  margin: 0 50%;
-  position: relative;
-  white-space: pre;
-}
-
-div.d-progress {
-  background-color: #ededed;
-  position: relative;
-}
-
-div.d-progress-bar {
-  width: 50%;
-  height: 1.5rem;
-  transition: width 150ms;
-}
-
-div.d-progress>span.d-progress-text {
-  position: absolute;
-  display: inline-block;
-  left: 50%;
-  transform: translateX(-50%);
-  overflow: hidden;
-  font-size: calc(1.5rem / 1.5);
-  white-space: nowrap;
-}
-
-@media (prefers-color-scheme: dark) {
-  div.d-progress {
-    background-color: #999999;
-    color: #313131;
-  }
-}
-
-.button.is-purple {
-  background-color: #5f00d1;
-  border-color: transparent;
-  color: #fff;
-}
-
-.button.is-dark-gray {
-  background-color: #6c6b6d;
-  border-color: transparent;
-  color: #fff;
-}
-
-.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;
-
-  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 {
-  max-width: 100% !important;
-}
-
-select.is-full-width {
-  display: flex;
-  width: 100%;
-}
-
-.columns.is-right {
-  justify-content: flex-end;
-}
-
-td.is-middle {
-  vertical-align: middle;
-}
-
-.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,