Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: pre/code links in docs under dark mode now look like links #262

Merged
merged 1 commit into from May 21, 2024

Conversation

kisaragi-hiu
Copy link
Contributor

Fixes #260.

Light mode Dark mode before with annotation Dark mode after
Light mode screenshot of the .client modules page in Remix documentation. There are no handdrawn arrows. The same texts corresponding to the texts in the dark mode screenshot are visually distinct. Dark mode screenshot of the .client modules page in Remix documentation, with two handdrawn arrows, one pointing to "useEffect" and is labeled "link", another pointing to ".client" and is labeled "not a link". The two texts being pointed to otherwise appear identical in style. Dark mode screenshot of the .client modules page in Remix documentation, with the same texts being visually distinct from each other.

The colors of code and pre elements in md-prose blocks are specified here:

.md-prose {
  /* ... */
  & code,
  & kbd {
    @apply text-gray-700 dark:text-gray-300;
  }

  /* some other stuff... */

  & :is(a, h1, h2, h3, h4, h5, h6) code,
  & :is(a, h1, h2, h3, h4, h5, h6) kbd {
    @apply text-inherit;
  }
  /* ... */
}

which turns into this CSS:

.md-prose code,
.md-prose kbd {
  --tw-text-opacity:1;
  color:rgb(67 67 67/var(--tw-text-opacity))
}
:is(.dark .md-prose code),
:is(.dark .md-prose kbd) {
  --tw-text-opacity:1;
  color:rgb(164 164 164/var(--tw-text-opacity));
}
.md-prose :is(a, h1, h2, h3, h4, h5, h6) code,
.md-prose :is(a, h1, h2, h3, h4, h5, h6) kbd {
  color:inherit;
}

The color rule applies to all prose code and kbd elements, then for specific situations (including under links) the color is reset to inherit. But in dark mode, :is(.dark .md-prose code) ends up with higher specificity (0-2-1) than .md-prose :is(a, h1, h2, h3, h4, h5, h6) code (0-1-2), thus nullifying the reset. So a dark:text-inherit needs to be specified explicitly to actually reset the color to inherit in dark mode.

@brookslybrand
Copy link
Contributor

Oh man, I can't believe we were missing this (or it broke), thank you @kisaragi-hiu!

Running it locally now

@brookslybrand
Copy link
Contributor

Looks great, thank you!

If you want to make the same change on reactrouter.com I'll be sure to merge it asap

@brookslybrand brookslybrand merged commit ff2523a into remix-run:main May 21, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark theme inline code links are completely indistinguishable from non-link inline code
2 participants