feat: colorize the ui based on the app color

app/components/Common/Bars.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    yOffset?: number;
+    opacity?: number;
+    title?: string | undefined;
+  }>(),
+  {
+    yOffset: 0,
+    opacity: 1,
+    title: undefined,
+  },
+);
+
+const app = useAppStore();
+const { assets } = useAssets();
+
+const BAR_WIDTH = 256;
+const BAR_HEIGHT = 24;
+const TITLE_Y = 5;
+
+useRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
+
+  // top bar
+  ctx.drawImage(
+    assets.common.barsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    -props.yOffset,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
+
+  if (props.title) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "10px NDS10";
+    fillTextCentered(ctx, props.title, 0, TITLE_Y - props.yOffset, 256);
+  }
+
+  ctx.scale(1, -1);
+
+  // bottom bar
+  ctx.drawImage(
+    assets.common.barsSheet,
+    0,
+    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+    0,
+    -192 - props.yOffset,
+    BAR_WIDTH,
+    BAR_HEIGHT,
+  );
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>