Merge pull request #493 from 87xie/improve-text-contrast-for-hover-an…

…d-focus-examples-in-light-mode Improve text contrast for hover and focus examples in light mode
code-hike · Dec 26, 2024 · f9781e0 · f9781e0
2 parents 6f9b4c1 + 59d5d02
commit f9781e0
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/apps/web/demos/focus/code.tsx b/apps/web/demos/focus/code.tsx
@@ -35,10 +35,10 @@ export function CodeContainer({ code }: { code: HighlightedCode }) {
         }}
         handlers={[focus]}
       />
-      <div className="p-2 mt-auto font-light text-center">
+      <div className="p-2 mt-auto font-light text-center text-white">
         You can also change the focus annotations on a rendered codeblock:
       </div>
-      <div className="flex justify-center gap-2 pb-4">
+      <div className="flex justify-center gap-2 pb-4 text-white">
         <button
           onClick={() => setFocused("lorem")}
           disabled={focused === "lorem"}

diff --git a/apps/web/demos/hover/page.tsx b/apps/web/demos/hover/page.tsx
@@ -16,7 +16,7 @@ export default function Page() {
 
 function HoverContainer(props: { children: React.ReactNode }) {
   return (
-    <div className="bg-zinc-900/80 px-2 rounded hover-container">
+    <div className="bg-zinc-900/80 px-2 rounded hover-container text-white">
       {props.children}
     </div>
   )