Dark mode: Navs & tabs

[hannahiss]

Description

Navs & tabs in dark mode, by using existing Sass vars :

Sass var	Previous value	New value
$nav-tabs-link-hover-border-color	$border-color	var(--#{$prefix}highlight-color) ⚠️ strange use of this variable
$nav-underline-border-color	$gray-500	var(--#{$prefix}border-color-translucent)
$nav-underline-link-active-color	var(--#{$prefix}emphasis-color)	var(--#{$prefix}hover-color)
$nav-underline-link-hover-color	$accessible-orange	var(--#{$prefix}link-hover-color) ⚠️ strange use of this variable
$nav-underline-link-active-bg	var(--#{$prefix}body-bg)	transparent ❓ do we need to keep these vars ? (only in Boosted)
$nav-underline-link-active-border-color	$accessible-orange	var(--#{$prefix}link-hover-color) ⚠️ strange use of this variable

⚠️ Added 2 Sass vars and corresponding css vars:

Sass var	css var	Value
$nav-tabs-link-hover-color	--bs-nav-tabs-link-hover-color	var(--#{$prefix}highlight-color)
$nav-tabs-link-hover-bg	--bs-nav-tabs-link-hover-bg	var(--#{$prefix}highlight-bg)

New CSS variable

--bs-tab-content-border-color in .nav-tabs

Links

• https://deploy-preview-2307--boosted.netlify.app/docs/5.3/components/navs-tabs/
• https://deploy-preview-2307--boosted.netlify.app/docs/5.3/dark-mode/#navs--tabs

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	311de37
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6538b86ae84d250008a887e4
😎 Deploy Preview	https://deploy-preview-2307--boosted.netlify.app/docs/5.3/dark-mode
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[louismaximepiton]

Sorry I wasn't clear, but all ids mentionned here need a little shift. For instance:

• tab2-content
• tab3-content
• tab4-content
• linkB
• linkC
• linkD