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,
           );
         }
 

app/components/Settings/TopScreen/Clock.vue

@@ -2,6 +2,7 @@
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
+const app = useAppStore();
 const { assets } = useAssets();
 
 function drawLine(
@@ -76,7 +77,7 @@ useRender((ctx) => {
     23,
     2,
   );
-  renderHand(now.getSeconds() / 60, "#49db8a", 35, 2);
+  renderHand(now.getSeconds() / 60, app.color.hex, 35, 2);
 
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);

app/components/Settings/TopScreen/StatusBar.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts">
+const app = useAppStore();
 const { assets } = useAssets();
 
+const BAR_WIDTH = 256;
+const BAR_HEIGHT = 16;
+
 useRender((ctx) => {
   const TEXT_Y = 11;
 
-  ctx.drawImage(assets.home.topScreen.statusBar.statusBar, 0, 0);
+  ctx.drawImage(
+    assets.home.topScreen.statusBar.statusBarsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    0,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
 
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";