Tweak header hover effects (#3598)

HiDeoo · delucis · web-flow · commit fff38d58b637 · 2026-03-11T10:08:07.000+01:00
Co-authored-by: Chris Swithinbank &lt;swithinbank@gmail.com&gt;
diff --git a/.changeset/modern-hats-confess.md b/.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;
+}
+```
diff --git a/packages/starlight/components/Select.astro b/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 {
diff --git a/packages/starlight/components/SocialIcons.astro b/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>

Original file line number	Diff line number	Diff line change
`@@ -45,11 +45,11 @@ interface Props {`
`45`	`45`	`display: flex;`
`46`	`46`	`align-items: center;`
`47`	`47`	`gap: 0.25rem;`
`48`		`- color: var(--sl-color-gray-1);`
	`48`	`+ color: var(--sl-color-gray-2);`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`label:hover {`
`52`		`- color: var(--sl-color-gray-2);`
	`52`	`+ color: var(--sl-color-white);`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`.icon {`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const links = config.social \|\| [];`
`26`	`26`	`margin: -0.5em;`
`27`	`27`	`}`
`28`	`28`	`a:hover {`
`29`		`- opacity: 0.66;`
	`29`	`+ color: var(--sl-color-white);`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`	`</style>`