chore: change default accent color (#1678)

alexdln · web-flow · commit 1d4dbd489baa · 2026-02-26T22:10:49.000Z
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -24,16 +24,17 @@
   --border-hover: oklch(0.371 0 0);
 
   /* accent color, set by user from settings */
-  --accent: var(--accent-color, oklch(1 0 0));
+  --accent: var(--accent-color, oklch(0.787 0.128 230.318));
   --accent-muted: var(--accent-color, oklch(0.922 0 0));
 
   /* accent colors */
+  --swatch-sky: oklch(0.787 0.128 230.318);
   --swatch-coral: oklch(0.704 0.177 14.75);
   --swatch-amber: oklch(0.828 0.165 84.429);
   --swatch-emerald: oklch(0.792 0.153 166.95);
-  --swatch-sky: oklch(0.787 0.128 230.318);
   --swatch-violet: oklch(0.78 0.148 286.067);
   --swatch-magenta: oklch(0.78 0.15 330);
+  --swatch-neutral: oklch(1 0 0);
 
   /* syntax highlighting colors */
   --syntax-fn: oklch(0.727 0.137 299.149);
@@ -94,16 +95,17 @@
   --border-subtle: oklch(0.922 0 0);
   --border-hover: oklch(0.715 0 0);
 
-  --accent: var(--accent-color, oklch(0.145 0 0));
+  --accent: var(--accent-color, oklch(0.53 0.16 247.27));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
   /* accent colors */
-  --swatch-coral: oklch(0.7 0.19 14.75);
-  --swatch-amber: oklch(0.8 0.25 84.429);
-  --swatch-emerald: oklch(0.7 0.17 166.95);
-  --swatch-sky: oklch(0.7 0.15 230.318);
-  --swatch-violet: oklch(0.7 0.17 286.067);
-  --swatch-magenta: oklch(0.75 0.18 330);
+  --swatch-sky: oklch(0.53 0.16 247.27);
+  --swatch-coral: oklch(0.56 0.17 10.75);
+  --swatch-amber: oklch(0.58 0.18 46.34);
+  --swatch-emerald: oklch(0.51 0.13 162.4);
+  --swatch-violet: oklch(0.56 0.13 282.067);
+  --swatch-magenta: oklch(0.56 0.14 325);
+  --swatch-neutral: oklch(0.145 0 0);
 
   --syntax-fn: oklch(0.502 0.188 294.988);
   --syntax-str: oklch(0.425 0.152 252);
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
@@ -5,6 +5,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const defaultId = 'sky'
   const id = settings.accentColorId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
@@ -13,10 +14,12 @@ onPrehydrate(el => {
       input.setAttribute('checked', '')
     }
     // Remove checked from the server-default (clear button, value="")
-    const clearInput = el.querySelector<HTMLInputElement>('input[value=""]')
-    if (clearInput) {
-      clearInput.checked = false
-      clearInput.removeAttribute('checked')
+    if (id !== defaultId) {
+      const clearInput = el.querySelector<HTMLInputElement>(`input[value="${defaultId}"]`)
+      if (clearInput) {
+        clearInput.checked = false
+        clearInput.removeAttribute('checked')
+      }
     }
   }
 })
@@ -31,31 +34,19 @@ onPrehydrate(el => {
       v-for="color in accentColors"
       :key="color.id"
       class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      :class="color.id === 'neutral' ? 'flex items-center justify-center bg-fg' : ''"
       :style="{ backgroundColor: `var(--swatch-${color.id})` }"
     >
       <input
         type="radio"
         name="accent-color"
         class="sr-only"
         :value="color.id"
-        :checked="selectedAccentColor === color.id"
-        :aria-label="color.name"
+        :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')"
+        :aria-label="color.id === 'neutral' ? $t('settings.clear_accent') : color.name"
         @change="setAccentColor(color.id)"
       />
-    </label>
-    <label
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
-    >
-      <input
-        type="radio"
-        name="accent-color"
-        class="sr-only"
-        value=""
-        :checked="selectedAccentColor === null"
-        :aria-label="$t('settings.clear_accent')"
-        @change="setAccentColor(null)"
-      />
-      <span class="i-lucide:ban size-4 text-bg" aria-hidden="true" />
+      <span v-if="color.id === 'neutral'" class="i-lucide:ban size-4 text-bg" aria-hidden="true" />
     </label>
   </fieldset>
 </template>
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
@@ -3,13 +3,22 @@ const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBac
 
 onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const defaultId = 'neutral'
   const id = settings.preferredBackgroundTheme
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
       input.checked = true
       input.setAttribute('checked', '')
     }
+    // Remove checked from the server-default (clear button, value="")
+    if (id !== defaultId) {
+      const clearInput = el.querySelector<HTMLInputElement>(`input[value="${defaultId}"]`)
+      if (clearInput) {
+        clearInput.checked = false
+        clearInput.removeAttribute('checked')
+      }
+    }
   }
 })
 </script>
@@ -30,7 +39,10 @@ onPrehydrate(el => {
         name="background-theme"
         class="sr-only"
         :value="theme.id"
-        :checked="selectedBackgroundTheme === theme.id"
+        :checked="
+          selectedBackgroundTheme === theme.id ||
+          (!selectedBackgroundTheme && theme.id === 'neutral')
+        "
         :aria-label="theme.name"
         @change="setBackgroundTheme(theme.id)"
       />
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
@@ -49,20 +49,22 @@ export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
 // Theming
 export const ACCENT_COLORS = {
   light: {
-    coral: 'oklch(0.70 0.19 14.75)',
-    amber: 'oklch(0.8 0.25 84.429)',
-    emerald: 'oklch(0.70 0.17 166.95)',
-    sky: 'oklch(0.70 0.15 230.318)',
-    violet: 'oklch(0.70 0.17 286.067)',
-    magenta: 'oklch(0.75 0.18 330)',
+    sky: 'oklch(0.53 0.16 247.27)',
+    coral: 'oklch(0.56 0.17 10.75)',
+    amber: 'oklch(0.58 0.18 46.34)',
+    emerald: 'oklch(0.51 0.13 162.4)',
+    violet: 'oklch(0.56 0.13 282.067)',
+    magenta: 'oklch(0.56 0.14 325)',
+    neutral: 'oklch(0.145 0 0)',
   },
   dark: {
+    sky: 'oklch(0.787 0.128 230.318)',
     coral: 'oklch(0.704 0.177 14.75)',
     amber: 'oklch(0.828 0.165 84.429)',
     emerald: 'oklch(0.792 0.153 166.95)',
-    sky: 'oklch(0.787 0.128 230.318)',
     violet: 'oklch(0.78 0.148 286.067)',
     magenta: 'oklch(0.78 0.15 330)',
+    neutral: 'oklch(1 0 0)',
   },
 } as const
 
