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/ClawBanner.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// The one banner surface: claw down, auth required, stream drops. An
+// inline band, dismissible when the caller allows it.
+defineProps<{
+  variant: 'error' | 'warn' | 'info'
+  dismissible?: boolean
+}>()
+
+defineEmits<{ dismiss: [] }>()
+</script>
+
+<template>
+  <div class="banner" :class="variant" role="status">
+    <span class="banner-mark" aria-hidden="true">{{
+      variant === 'error' ? '✗' : variant === 'warn' ? '△' : '·'
+    }}</span>
+    <span class="banner-text"><slot /></span>
+    <slot name="actions" />
+    <button v-if="dismissible" class="banner-dismiss" title="dismiss" @click="$emit('dismiss')">
+      ×
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.banner-mark {
+  color: inherit;
+  flex: none;
+}
+
+.banner.error .banner-mark {
+  color: var(--error);
+}
+
+.banner.warn .banner-mark {
+  color: var(--warn);
+}
+
+.banner.info .banner-mark {
+  color: var(--info);
+}
+
+.banner-dismiss {
+  padding: 0 8px;
+  border: none;
+  background: none;
+  color: var(--text3);
+  font-size: 14px;
+}
+</style>