From 62adb47975e7cae063099152a144d8caacc4b750 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Tue, 2 Dec 2025 12:19:09 +0100 Subject: [PATCH 1/3] feat: update social icons hover effect --- packages/starlight/components/SocialIcons.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/starlight/components/SocialIcons.astro b/packages/starlight/components/SocialIcons.astro index 77e9fad7b3d..571f63b733f 100644 --- 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); } } From cf825102cbbace8e9c35355493fa46913b150104 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Tue, 2 Dec 2025 12:19:41 +0100 Subject: [PATCH 2/3] feat: update select color and hover color --- packages/starlight/components/Select.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/starlight/components/Select.astro b/packages/starlight/components/Select.astro index a77cb295a07..369bc3c3eda 100644 --- 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 { From 9ac528f51364d43437f5dab508eca5e6ef9d4b2f Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Wed, 14 Jan 2026 17:02:21 +0100 Subject: [PATCH 3/3] Add changeset --- .changeset/modern-hats-confess.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .changeset/modern-hats-confess.md diff --git a/.changeset/modern-hats-confess.md b/.changeset/modern-hats-confess.md new file mode 100644 index 00000000000..27b169c1c91 --- /dev/null +++ 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; +} +```