feat: colorize the ui based on the app color

app/components/Settings/TopScreen/Calendar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const app = useAppStore();
 const { assets } = useAssets();
 
 useRender((ctx) => {
@@ -11,6 +12,7 @@ useRender((ctx) => {
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
   const CALENDAR_TOP = 64;
+  const SELECTOR_SIZE = 13;
 
   ctx.fillStyle = "#343434";
 
@@ -50,9 +52,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,
           );
         }