Antialias text but not code/pre elements (#2747)

Author: clairechabas

.changeset/clever-mangos-explode.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Apply antialiasing on any text that are not code inline/blocks to avoid contrast issues

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -160,7 +160,6 @@ export async function CustomizationRootLayout(props: {
                     fontNotoColorEmoji.className,
                     `${fonts[customization.styling.font].className}`,
                     `${ibmPlexMono.variable}`,
-                    'antialiased',
                     'bg-light',
                     'dark:bg-dark',
                 )}

packages/gitbook/src/components/RootLayout/globals.css

@@ -23,7 +23,7 @@
         @apply leading-relaxed;
     }
     body {
-        @apply text-dark dark:text-light;
+        @apply text-dark dark:text-light antialiased;
     }
     html {
         @apply gutter-stable;
@@ -54,6 +54,12 @@
         @apply outline-2 outline-primary/6;
     }
 
+    code,
+    pre {
+        /* Don't apply antialiased to `code` and `pre` elements */
+        @apply subpixel-antialiased;
+    }
+
     /*  Light mode */
     ::-webkit-scrollbar {
         @apply bg-dark/1;