feat: theme colors (#1195)

components/main/MainContent.vue

@@ -12,7 +12,7 @@ defineProps<{
     <div
       sticky top-0 z10 backdrop-blur
       pt="[env(safe-area-inset-top,0)]"
-      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
+      border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
     >
       <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }">
         <div flex gap-3 items-center overflow-hidden py2>

components/pwa/PwaBadge.client.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="$pwa?.needRefresh"
-    bg="fade" relative rounded
+    bg="primary-fade" relative rounded
     flex="~ gap-1 center" px3 py1 text-primary
     @click="$pwa.updateServiceWorker()"
   >

components/pwa/PwaPrompt.client.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$pwa?.needRefresh"
-    m-2 p5 bg="fade" relative
+    m-2 p5 bg="primary-fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
   >

components/settings/SettingsThemeColors.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ThemeColors } from '~/composables/settings'
+
+const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
+const settings = $(useUserSettings())
+
+const currentTheme = $computed(() => settings.themeColors?.['--theme-color-name'] || themes[0][0])
+
+function updateTheme(theme: ThemeColors) {
+  settings.themeColors = theme
+}
+</script>
+
+<template>
+  <div flex="~ gap4" p2>
+    <button
+      v-for="[key, theme] in themes" :key="key"
+      :style="{
+        'background': key,
+        '--local-ring-color': key,
+      }"
+      :class="currentTheme === key ? 'ring-2' : 'scale-90'"
+      :title="key"
+      w-8 h-8 rounded-full transition-all
+      ring="$local-ring-color offset-3 offset-$c-bg-base"
+      @click="updateTheme(theme)"
+    />
+  </div>
+</template>