chore: change default accent color

Author: alexdln

app/assets/main.css

@@ -24,7 +24,7 @@
   --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 */
@@ -34,6 +34,7 @@
   --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,7 +95,7 @@
   --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.7 0.15 230.318));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
   /* accent colors */
@@ -104,6 +105,7 @@
   --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-neutral: oklch(0.145 0 0);
 
   --syntax-fn: oklch(0.502 0.188 294.988);
   --syntax-str: oklch(0.425 0.152 252);

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>

shared/utils/constants.ts

@@ -49,20 +49,22 @@ export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
 // Theming
 export const ACCENT_COLORS = {
   light: {
+    sky: 'oklch(0.70 0.15 230.318)',
     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)',
+    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