feat(rhema-code): add the colors setting with four palettes

The stored `colors` key names a palette — rhema (the default,
Jadeite), aquamarine, black-and-white, or dracula — and the
Appearance page of /settings cycles it live, like the theme and
icon toggles beside it. Each palette carries a dark and a light
appearance under the existing `theme` key; dracula's light side is
derived, the official palette ships only dark.

The appearance decision moves off token comparison: Theme now
answers is_dark() from the ground/text luminance, so palettes
beyond the original two get the right per-profile fallback tones.

web/claw/app/components/SettingsNav.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+// The settings nav: searchable sections of pages, the design's left
+// column. The search is a client-side filter over these entries — it
+// hides nothing the claw cannot serve.
+export interface SettingsEntry {
+  id: string
+  label: string
+}
+
+export interface SettingsSection {
+  label: string
+  entries: SettingsEntry[]
+}
+
+const props = defineProps<{
+  sections: SettingsSection[]
+  active: string
+  /** Health echo for the footer, so the nav answers "am I connected". */
+  clawUp: boolean | null
+}>()
+
+defineEmits<{ select: [id: string] }>()
+
+const query = ref('')
+
+const filtered = computed<SettingsSection[]>(() => {
+  const needle = query.value.trim().toLowerCase()
+  if (!needle) return props.sections
+  return props.sections
+    .map((section) => ({
+      label: section.label,
+      entries: section.entries.filter((entry) =>
+        entry.label.toLowerCase().includes(needle),
+      ),
+    }))
+    .filter((section) => section.entries.length > 0)
+})
+</script>
+
+<template>
+  <aside class="nav">
+    <div class="search">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="6.5" />
+        <path d="m20 20-3.8-3.8" />
+      </svg>
+      <input v-model="query" type="text" placeholder="Search settings" />
+    </div>
+
+    <p v-if="filtered.length === 0" class="empty">no settings match</p>
+
+    <div v-for="section in filtered" :key="section.label" class="section">
+      <span class="label">{{ section.label }}</span>
+      <button
+        v-for="entry in section.entries"
+        :key="entry.id"
+        class="entry"
+        :class="{ active: entry.id === active }"
+        @click="$emit('select', entry.id)"
+      >
+        {{ entry.label }}
+      </button>
+    </div>
+
+    <div class="spacer" />
+
+    <footer class="foot">
+      <StatusDot :tone="clawUp === null ? 'idle' : clawUp ? 'ok' : 'error'" />
+      <span>{{ clawUp === null ? 'checking claw' : clawUp ? 'claw connected' : 'claw unreachable' }}</span>
+    </footer>
+  </aside>
+</template>
+
+<style scoped>
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 232px;
+  flex: none;
+  min-height: 0;
+  padding: 14px 10px 10px;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  overflow-y: auto;
+}
+
+.search {
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.search svg {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  color: var(--text3);
+  pointer-events: none;
+}
+
+.search input {
+  width: 100%;
+  padding: 6px 10px 6px 28px;
+  font-size: 13px;
+}
+
+.empty {
+  margin: 4px 6px;
+  color: var(--text3);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 14px;
+}
+
+.section .label {
+  padding: 0 10px 4px;
+}
+
+.entry {
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: 7px;
+  padding: 6px 10px;
+  color: var(--text2);
+}
+
+.entry:hover:not(:disabled) {
+  background: var(--elevated);
+  color: var(--text);
+}
+
+.entry.active {
+  background: color-mix(in srgb, var(--accent) 17%, transparent);
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--border);
+  color: var(--text3);
+  font-size: 12px;
+}
+</style>