From a486ead39d55c29bfe3251099f2c5a6c5eccfaa4 Mon Sep 17 00:00:00 2001
From: Yash Raj <168925493+Yash-Raj-5424@users.noreply.github.com>
Date: Wed, 22 Apr 2026 17:29:42 +0530
Subject: [PATCH] fix: restore Try Twenty button text visibility on docs navbar
 (#19968)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# [Docs]: Fix blank Try Twenty button text in dark mode

## 🐛 Problem
The "Try Twenty" CTA button in the docs navbar appears blank/invisible
when users enable dark mode, making it impossible to click through to
the sign-up page.

**Issue:** #19965

##  Root Cause
CSS specificity conflict in `packages/twenty-docs/custom.css`:
- The dark mode CSS rule targets only the `<a>` element
- Mintlify renders button text in a nested `<span>` with class
`text-white` (white color)
- The `text-white` Tailwind utility directly applies `color: rgb(255 255
255)` to the span
- This overrides the inherited dark color from the parent `<a>` element
- **Result:** White text on white background = invisible button

##  Solution
Update the CSS selector in `packages/twenty-docs/custom.css` to target
both the `<a>` element AND the nested `<span>`:

**Before:**
```css
:is(.dark, [data-theme="dark"]) #topbar-cta-button a {
  background-color: #ffffff !important;
  color: #141414 !important;
}
---
 packages/twenty-docs/custom.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-docs/custom.css b/packages/twenty-docs/custom.css
index 07a25a1ac03..fc66530852f 100644
--- a/packages/twenty-docs/custom.css
+++ b/packages/twenty-docs/custom.css
@@ -12,7 +12,8 @@
   opacity: 0.85 !important;
 }
 
-:is(.dark, [data-theme="dark"]) #topbar-cta-button a {
+:is(.dark, [data-theme="dark"]) #topbar-cta-button a,
+:is(.dark, [data-theme="dark"]) #topbar-cta-button a span {
   background-color: #ffffff !important;
   color: #141414 !important;
 }