fix: adjust colors in filters ui for better contrast (#1659)

Author: jellydeck

app/components/ViewModeToggle.vue

@@ -6,14 +6,18 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
 
 <template>
   <div
-    class="inline-flex rounded-md border border-border p-0.5 bg-bg-subtle"
+    class="inline-flex rounded-md border border-border p-0.5 bg-bg-muted"
     role="group"
     :aria-label="$t('filters.view_mode.label')"
   >
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-      :class="viewMode === 'cards' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      :class="
+        viewMode === 'cards'
+          ? 'bg-bg-subtle text-fg border-fg-subtle'
+          : 'text-fg-muted hover:text-fg border-transparent'
+      "
       :aria-pressed="viewMode === 'cards'"
       :aria-label="$t('filters.view_mode.cards')"
       @click="viewMode = 'cards'"
@@ -23,8 +27,12 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
     </button>
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-      :class="viewMode === 'table' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      :class="
+        viewMode === 'table'
+          ? 'bg-bg-subtle  text-fg border-fg-subtle'
+          : 'text-fg-muted hover:text-fg border-transparent'
+      "
       :aria-pressed="viewMode === 'table'"
       :aria-label="$t('filters.view_mode.table')"
       @click="viewMode = 'table'"