UI/UX tweaks and improvements.

app/components/ColorModeToggle.vue

@@ -1,22 +1,24 @@
 <template>
-  <div class="color-mode-toggle">
+  <div class="color-mode-toggle segmented">
     <button
       v-for="option in options"
       :key="option.value"
       :class="{ active: colorMode.preference === option.value }"
       @click="colorMode.preference = option.value"
-    >{{ option.label }}</button>
+    >
+      {{ option.label }}
+    </button>
   </div>
 </template>
 
 <script setup>
-const colorMode = useColorMode()
+const colorMode = useColorMode();
 
 const options = [
-  { label: 'Light', value: 'light' },
-  { label: 'System', value: 'system' },
-  { label: 'Dark', value: 'dark' },
-]
+  { label: "Light", value: "light" },
+  { label: "System", value: "system" },
+  { label: "Dark", value: "dark" },
+];
 </script>
 
 <style scoped>
@@ -28,7 +30,7 @@ const options = [
 .color-mode-toggle button {
   flex: 1;
   padding: 4px 0;
-  font-family: 'Commit Mono', monospace;
+  font-family: "Commit Mono", monospace;
   font-size: 10px;
   letter-spacing: 0.04em;
   background: transparent;
@@ -36,10 +38,12 @@ const options = [
   border: 1px dashed var(--border);
   cursor: pointer;
   transition: all 0.15s;
+  position: relative;
 }
 
+/* Overlap adjacent borders so dashed lines collapse into one */
 .color-mode-toggle button + button {
-  border-left: none;
+  margin-left: -1px;
 }
 
 .color-mode-toggle button:hover {
@@ -51,13 +55,6 @@ const options = [
   border-color: var(--candle);
   border-style: solid;
   background: var(--surface);
-}
-
-/* When active button is adjacent to dashed, restore left border */
-.color-mode-toggle button.active + button {
-  border-left: 1px dashed var(--border);
-}
-.color-mode-toggle button:has(+ button.active) {
-  border-right: none;
+  z-index: 1;
 }
 </style>