dark mode + style tweaks

ui/package.json

@@ -32,6 +32,7 @@
     "@vue/test-utils": "^2.4.1",
     "axios": "^1.5.0",
     "bulma": "^0.9.4",
+    "bulma-prefers-dark": "^0.1.0-beta.1",
     "chai": "^4.2.0",
     "eslint": "^8.48.0",
     "eslint-plugin-vue": "^9.17.0",

ui/src/components/Calendar.vue

@@ -19,7 +19,9 @@
         />
       </ThouCanvas>
     </div>
-    <figcaption>{{ figure_caption }}</figcaption>
+    <figcaption class="has-text-primary-dark">
+      {{ figure_caption }}
+    </figcaption>
   </figure>
 </template>
 

ui/src/components/MultiModal.vue

@@ -11,7 +11,7 @@
           <div class="image is-square">
             <img :src="image_src" alt="Kalender-Bild" />
           </div>
-          <figcaption class="has-text-grey-lighter">
+          <figcaption class="tag is-primary">
             {{ figure_caption }}
           </figcaption>
         </figure>

ui/src/components/bulma/Drawer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="card">
-    <header class="card-header has-background-grey-lighter is-unselectable">
+    <header class="card-header is-unselectable">
       <p class="card-header-title" @click="toggle">{{ header }}</p>
 
       <p v-if="refreshable" class="card-header-icon px-0">

ui/src/main.scss

@@ -1,3 +1,49 @@
 @charset "utf-8";
 
-@import "~bulma/bulma.sass";
+//=====================
+// custom color scheme
+//=====================
+
+$primary: #945DE1;
+$link: #64B4BD;
+$info: #8C4E80;
+$success: #7E8E2B;
+$warning: #F6CA6B;
+$danger: #C5443B;
+
+// Sass variables (bulma)
+@import "~bulma/sass/utilities/initial-variables";
+@import "~bulma/sass/utilities/derived-variables";
+
+// Sass variables (bulma-prefers-dark)
+@import "~bulma-prefers-dark/sass/utilities/initial-variables";
+@import "~bulma-prefers-dark/sass/utilities/derived-variables";
+
+//=================
+// variable tweaks
+//=================
+
+$modal-card-body-background-color-dark: $body-background-dark;
+$card-background-color-dark: $background-dark;
+
+// main imports
+@import "~bulma/bulma";
+@import "~bulma-prefers-dark/bulma-prefers-dark";
+
+//==============
+// style tweaks
+//==============
+
+.card-header {
+  background-color: $background;
+
+  @include prefers-scheme(dark) {
+    background-color: $card-header-background-color;
+  }
+}
+
+.card-content {
+  @include prefers-scheme(dark) {
+    background-color: $body-background-dark;
+  }
+}

ui/yarn.lock

@@ -2545,6 +2545,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+bulma-prefers-dark@^0.1.0-beta.1:
+  version "0.1.0-beta.1"
+  resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
+  integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
+
 bulma@^0.9.4:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"