Tweak header hover effects

.changeset/modern-hats-confess.md

@@ -0,0 +1,28 @@
+---
+'@astrojs/starlight': minor
+---
+
+Makes hover styles consistent in Starlight’s navigation bar
+
+Previously, the social icon links and language/theme switchers in Starlight’s navigation bar, dimmed on hover.
+After this change, they now increase in contrast on hover instead.
+This matches hover behavior elsewhere, for example in the sidebar, table of contents, or search button.
+
+⚠️ **Potentially breaking change:** this is a subtle change to the hover style colors.
+If you want to preserve the previous styling, you can add the following [custom CSS](https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles) to your site:
+
+```css
+starlight-theme-select label,
+starlight-lang-select label {
+  color: var(--sl-color-gray-1);
+
+  &:hover {
+    color: var(--sl-color-white);
+  }
+}
+
+.social-icons a:hover {
+  color: var(--sl-color-text-accent);
+  opacity: 0.66;
+}
+```

packages/starlight/components/Select.astro

@@ -45,11 +45,11 @@ interface Props {
 			display: flex;
 			align-items: center;
 			gap: 0.25rem;
-			color: var(--sl-color-gray-1);
+			color: var(--sl-color-gray-2);
 		}
 
 		label:hover {
-			color: var(--sl-color-gray-2);
+			color: var(--sl-color-white);
 		}
 
 		.icon {

packages/starlight/components/SocialIcons.astro

@@ -26,7 +26,7 @@ const links = config.social || [];
 			margin: -0.5em;
 		}
 		a:hover {
-			opacity: 0.66;
+			color: var(--sl-color-white);
 		}
 	}
 </style>