feat: colorize the ui based on the app color

app/components/Home/TopScreen/Calendar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 // NOTE: calendar background is handled by TopScreenBackground
+const app = useAppStore();
 const store = useHomeStore();
 
 const { assets } = useAssets();
@@ -12,6 +13,7 @@ useRender((ctx) => {
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
   const CALENDAR_TOP = 64;
+  const SELECTOR_SIZE = 13;
 
   ctx.fillStyle = "#343434";
 
@@ -61,9 +63,15 @@ useRender((ctx) => {
 
         if (now.getDate() === day) {
           ctx.drawImage(
-            assets.home.topScreen.calendar.daySelector,
-            cellLeft,
-            cellTop,
+            assets.home.topScreen.calendar.daySelectorsSheet,
+            0,
+            (app.color.row * 4 + app.color.col) * SELECTOR_SIZE,
+            SELECTOR_SIZE,
+            SELECTOR_SIZE,
+            cellLeft + 1,
+            cellTop + 1,
+            SELECTOR_SIZE,
+            SELECTOR_SIZE,
           );
         }