diff --git a/ui/src/bulma-scheme.scss b/ui/src/bulma-scheme.scss
new file mode 100644
index 0000000..856abd7
--- /dev/null
+++ b/ui/src/bulma-scheme.scss
@@ -0,0 +1,22 @@
+@charset "utf-8";
+@use "sass:map";
+
+//=====================
+// custom color scheme
+//=====================
+
+$advent22-colors: (
+  "primary": #945DE1,
+  "link": #64B4BD,
+  "info": #8C4E80,
+  "success": #7E8E2B,
+  "warning": #F6CA6B,
+  "danger": #C5443B,
+);
+
+$primary: map.get($advent22-colors, "primary");
+$link: map.get($advent22-colors, "link");
+$info: map.get($advent22-colors, "info");
+$success: map.get($advent22-colors, "success");
+$warning: map.get($advent22-colors, "warning");
+$danger: map.get($advent22-colors, "danger");
\ No newline at end of file
diff --git a/ui/src/bulma-vars.scss b/ui/src/bulma-vars.scss
deleted file mode 100644
index 090ce5f..0000000
--- a/ui/src/bulma-vars.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@charset "utf-8";
-
-//=====================
-// custom color scheme
-//=====================
-
-$primary: #945DE1;
-$link: #64B4BD;
-$info: #8C4E80;
-$success: #7E8E2B;
-$warning: #F6CA6B;
-$danger: #C5443B;
-
-// Sass variables (bulma)
-@import "~bulma/sass/utilities/initial-variables.sass";
-@import "~bulma/sass/utilities/derived-variables.sass";
-
-// Sass variables (bulma-prefers-dark)
-@import "~bulma-prefers-dark/sass/utilities/initial-variables.sass";
-@import "~bulma-prefers-dark/sass/utilities/derived-variables.sass";
\ No newline at end of file
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 952a7e9..cf92f13 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -56,7 +56,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/bulma-vars";
+@import "@/bulma-scheme";
 
 rect {
   fill: transparent;
@@ -64,34 +64,11 @@ rect {
   stroke-opacity: 0.9;
   stroke-width: 1;
 
-  &.primary {
-    fill: $primary;
-    stroke: $primary;
-  }
-
-  &.link {
-    fill: $link;
-    stroke: $link;
-  }
-
-  &.info {
-    fill: $info;
-    stroke: $info;
-  }
-
-  &.success {
-    fill: $success;
-    stroke: $success;
-  }
-
-  &.warning {
-    fill: $warning;
-    stroke: $warning;
-  }
-
-  &.danger {
-    fill: $danger;
-    stroke: $danger;
+  @each $name, $color in $advent22-colors {
+    &.#{$name} {
+      fill: $color;
+      stroke: $color;
+    }
   }
 }
 </style>
diff --git a/ui/src/main.scss b/ui/src/main.scss
index ebf2c5c..8919c2c 100644
--- a/ui/src/main.scss
+++ b/ui/src/main.scss
@@ -1,6 +1,19 @@
 @charset "utf-8";
 
-@import "@/bulma-vars";
+//===========
+// variables
+//===========
+
+// custom color scheme
+@import "@/bulma-scheme";
+
+// Sass variables (bulma)
+@import "~bulma/sass/utilities/initial-variables.sass";
+@import "~bulma/sass/utilities/derived-variables.sass";
+
+// Sass variables (bulma-prefers-dark)
+@import "~bulma-prefers-dark/sass/utilities/initial-variables.sass";
+@import "~bulma-prefers-dark/sass/utilities/derived-variables.sass";
 
 //=================
 // variable tweaks
@@ -9,7 +22,10 @@
 $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";