Tune text colors

Adam Plesnik · Adam Plesnik · commit a129102e19c6 · 2024-04-10T23:26:58.000+02:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="scroll-smooth bg-zinc-50 text-zinc-950 dark:bg-gray-900 dark:text-gray-300">
+<html lang="en" class="scroll-smooth bg-zinc-50 text-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'
 const Code = ({ children }: PropsWithChildren<InlineCodeProps>) => (
   <code
     className={
-      'font-mono whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 text-sm dark:bg-indigo-200/20 dark:text-zinc-200'
+      'whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 font-mono text-sm text-zinc-900 dark:bg-indigo-200/20 dark:text-zinc-300'
     }
   >
     {children}
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
@@ -17,7 +17,7 @@ const CodeBlock = ({
   return (
     <div
       className={
-        'mb-4 rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-slate-800 dark:text-zinc-300'
+        'mb-4 rounded-lg border border-zinc-300 bg-zinc-100 text-zinc-900 dark:border-zinc-700 dark:bg-slate-800 dark:text-zinc-300'
       }
     >
       <code
diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
@@ -1,6 +1,7 @@
 import { ArrowRight } from 'lucide-react'
 import { PropsWithChildren } from 'react'
 import { NavLink } from 'react-router-dom'
+import { addWithSpace } from '../utils/addWithSpace'
 
 const Heading = ({
   size = 1,
@@ -10,7 +11,8 @@ const Heading = ({
   href = '',
   hrefType = 'documentation',
 }: PropsWithChildren<TitleProps>) => {
-  const defaultClasses = 'relative w-full' + (className && ` ${className}`)
+  const defaultClasses =
+    'relative w-full text-zinc-900 dark:text-zinc-300' + addWithSpace(className)
   const anchor = id ? <a id={id} className={'absolute -top-32'} /> : ''
   const link = href ? (
     <NavLink to={href} className="group flex gap-1 text-xs text-fuchsia-500 dark:text-cyan-500">
@@ -24,7 +26,7 @@ const Heading = ({
   )
   if (size === 1) {
     return (
-      <h1 className={defaultClasses + ' py-2 text-3xl font-semibold'}>
+      <h1 className={defaultClasses + ' py-2 text-3xl font-semibold '}>
         {children}
         {anchor}
       </h1>
diff --git a/src/docs/DocsTableRow.tsx b/src/docs/DocsTableRow.tsx
@@ -1,7 +1,7 @@
 const DocsTableRow = ({ className, code }: DocsTableRowProps) => {
   return (
     <div className="flex flex-col gap-1 font-mono text-sm sm:flex-row sm:gap-4">
-      <div className="px-2 opacity-80 sm:w-80">.{className}</div>
+      <div className="px-2 text-zinc-900 sm:w-80 dark:text-zinc-300">.{className}</div>
       <div className="flex-1 pl-8 pr-2 text-sky-700 sm:pl-2 dark:text-sky-300">{code};</div>
     </div>
   )

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'`
`3`	`3`	`const Code = ({ children }: PropsWithChildren<InlineCodeProps>) => (`
`4`	`4`	`<code`
`5`	`5`	`className={`
`6`		`- 'font-mono whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 text-sm dark:bg-indigo-200/20 dark:text-zinc-200'`
	`6`	`+ 'whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 font-mono text-sm text-zinc-900 dark:bg-indigo-200/20 dark:text-zinc-300'`
`7`	`7`	`}`
`8`	`8`	`>`
`9`	`9`	`{children}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ const CodeBlock = ({`
`17`	`17`	`return (`
`18`	`18`	`<div`
`19`	`19`	`className={`
`20`		`- 'mb-4 rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-slate-800 dark:text-zinc-300'`
	`20`	`+ 'mb-4 rounded-lg border border-zinc-300 bg-zinc-100 text-zinc-900 dark:border-zinc-700 dark:bg-slate-800 dark:text-zinc-300'`
`21`	`21`	`}`
`22`	`22`	`>`
`23`	`23`	`<code`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`const DocsTableRow = ({ className, code }: DocsTableRowProps) => {`
`2`	`2`	`return (`
`3`	`3`	`<div className="flex flex-col gap-1 font-mono text-sm sm:flex-row sm:gap-4">`
`4`		`- <div className="px-2 opacity-80 sm:w-80">.{className}</div>`
	`4`	`+ <div className="px-2 text-zinc-900 sm:w-80 dark:text-zinc-300">.{className}</div>`
`5`	`5`	`<div className="flex-1 pl-8 pr-2 text-sky-700 sm:pl-2 dark:text-sky-300">{code};</div>`
`6`	`6`	`</div>`
`7`	`7`	`)`