feat: use darker tailwind dark theme

This patch updates our `<body>` level styles and various colors throughout the app to use the new darker `bg-gray-950` when in dark mode. This change also helps the app better align with the colors that come with `shadcn-ui` components out-of-box. See: https://tailwindcss.com/blog/tailwindcss-v3-3#extended-color-palette-for-darker-darks
nicholaschiang · Jul 23, 2023 · 25b9ed6 · 25b9ed6
1 parent a2818b2
commit 25b9ed6
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 15 deletions.
diff --git a/app/components/empty.tsx b/app/components/empty.tsx
@@ -9,7 +9,8 @@ const emptyVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-gray-300 dark:border-gray-600 text-gray-500',
+        default:
+          'border-gray-300 dark:border-gray-700 text-gray-500 dark:text-gray-600',
         error: 'border-red-700 text-red-800',
         warning: 'border-amber-600 text-amber-700',
       },

diff --git a/app/root.tsx b/app/root.tsx
@@ -53,7 +53,7 @@ function Header() {
   const matches = useMatches()
   const user = useOptionalUser()
   return (
-    <header className='sticky top-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-700 px-6 flex items-center justify-between h-10 z-10'>
+    <header className='sticky top-0 bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-700 px-6 flex items-center justify-between h-10 z-10'>
       <ol className='flex items-center gap-2'>
         {matches
           .filter((match) => match.handle && match.handle.breadcrumb)
@@ -198,7 +198,7 @@ function App({ data, children }: { data?: LoaderData; children: ReactNode }) {
         <Links />
         <ThemeHead ssrTheme={Boolean(data?.theme)} />
       </head>
-      <body className='bg-white text-gray-900 selection:bg-gray-200 selection:text-black dark:bg-gray-900 dark:text-gray-100 dark:selection:bg-gray-700 dark:selection:text-gray-100'>
+      <body className='bg-white text-gray-900 selection:bg-gray-200 selection:text-gray-900 dark:bg-gray-950 dark:text-gray-50 dark:selection:bg-gray-800 dark:selection:text-gray-50'>
         <Header />
         {children}
         <script

diff --git a/app/routes/_layout.products.$productId.tsx b/app/routes/_layout.products.$productId.tsx
@@ -116,7 +116,7 @@ export default function ProductPage() {
       onOpenAutoFocus={(event) => event.preventDefault()}
       className='w-full max-w-screen-lg'
     >
-      <div className='flex items-center gap-2.5 border-b border-gray-200/50 bg-gray-50 p-2 px-6 dark:border-gray-700/50 dark:bg-gray-800'>
+      <div className='flex items-center gap-2.5 border-b border-gray-200/50 bg-gray-50 p-2 px-6 dark:border-gray-700/50 dark:bg-gray-900'>
         <Tooltip tip='close' hotkey='esc'>
           <Dialog.Close className='icon-button square'>
             <Cross2Icon />
@@ -155,7 +155,7 @@ export default function ProductPage() {
             style={{ paddingTop: `${widthToHeightImageRatio * 100}%` }}
           >
             <Image
-              className='absolute top-0 h-full w-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-800'
+              className='absolute top-0 h-full w-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-900'
               loading='eager'
               decoding='sync'
               src={images[0].url}
@@ -376,7 +376,7 @@ Section.Content = function SectionContent({ children }: PropsWithChildren) {
 
 function Chip({ children }: PropsWithChildren) {
   return (
-    <div className='rounded border border-gray-200 bg-gray-50 px-1 py-0.5 text-2xs dark:border-gray-700 dark:bg-gray-800'>
+    <div className='rounded border border-gray-200 bg-gray-50 px-1 py-0.5 text-2xs dark:border-gray-700 dark:bg-gray-900'>
       {children}
     </div>
   )

diff --git a/app/routes/_layout.products.tsx b/app/routes/_layout.products.tsx
@@ -306,7 +306,7 @@ function ProductItem({
         >
           {images.length > 1 && (
             <Image
-              className='absolute top-0 z-20 h-full w-full overflow-hidden rounded-md bg-gray-100 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-800'
+              className='absolute top-0 z-20 h-full w-full overflow-hidden rounded-md bg-gray-100 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-900'
               loading='lazy'
               decoding='async'
               src={images[1]}
@@ -319,7 +319,7 @@ function ProductItem({
             />
           )}
           <Image
-            className='absolute top-0 z-10 h-full w-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-800'
+            className='absolute top-0 z-10 h-full w-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-900'
             loading={index < resultsPerRow * rowsToEagerLoad ? 'eager' : 'lazy'}
             decoding={
               index < resultsPerRow * rowsToEagerLoad ? 'sync' : 'async'

diff --git a/app/routes/shows.$showId/critic-reviews.tsx b/app/routes/shows.$showId/critic-reviews.tsx
@@ -45,7 +45,7 @@ type ReviewProps = {
 
 function Review({ author, publication, url, content }: ReviewProps) {
   return (
-    <figure className='overflow-hidden bg-gray-100 dark:bg-gray-800 pb-4'>
+    <figure className='overflow-hidden bg-gray-100 dark:bg-gray-900 pb-4'>
       <figcaption className='mt-8 text-center'>
         <cite className='text-lg underline underline-offset-4 decoration-2 decoration-gray-300 dark:decoration-gray-600'>
           <span className='text-gray-500'>By </span>

diff --git a/app/routes/shows.$showId/route.tsx b/app/routes/shows.$showId/route.tsx
@@ -65,7 +65,7 @@ function Looks({ className }: { className: string }) {
       <ol className='grid grid-cols-2 gap-x-2 gap-y-6'>
         {show.looks.map((look) => (
           <li key={look.id}>
-            <div className='bg-gray-100 dark:bg-gray-800 aspect-person'>
+            <div className='bg-gray-100 dark:bg-gray-900 aspect-person'>
               <img
                 className='object-cover h-full'
                 src={look.image.url}

diff --git a/app/routes/shows.$showId/scores-header.tsx b/app/routes/shows.$showId/scores-header.tsx
@@ -70,7 +70,7 @@ export function ScoresHeader() {
   return (
     <div className='grid gap-2'>
       <video
-        className='aspect-video w-full bg-gray-100 dark:bg-gray-800'
+        className='aspect-video w-full bg-gray-100 dark:bg-gray-900'
         controls
         autoPlay
         playsInline
@@ -80,14 +80,14 @@ export function ScoresHeader() {
         Download the <a href={show.video.url}>MP4</a> video.
       </video>
       <div className='flex gap-2'>
-        <div className='flex-none w-40 bg-gray-100 dark:bg-gray-800 h-0 min-h-full'>
+        <div className='flex-none w-40 bg-gray-100 dark:bg-gray-900 h-0 min-h-full'>
           <img
             className='object-cover h-full'
             src={show.looks[0].image.url}
             alt=''
           />
         </div>
-        <article className='flex-1 bg-gray-100 dark:bg-gray-800 text-center px-6 flex flex-col'>
+        <article className='flex-1 bg-gray-100 dark:bg-gray-900 text-center px-6 flex flex-col'>
           <h1 className='font-serif font-bold text-5xl mb-1 mt-8'>
             {show.brands.map((brand) => brand.name).join(', ')}
           </h1>

diff --git a/app/routes/shows._index.tsx b/app/routes/shows._index.tsx
@@ -31,7 +31,7 @@ export default function ShowsPage() {
           {shows.map((show) => (
             <li key={show.id}>
               <Link to={`/shows/${show.id}`}>
-                <div className='bg-gray-100 dark:bg-gray-800 aspect-person mb-2'>
+                <div className='bg-gray-100 dark:bg-gray-900 aspect-person mb-2'>
                   <img
                     className='object-cover h-full'
                     src={show.looks[0].image.url}
@@ -62,7 +62,7 @@ function ScoreKey({ className }: { className: string }) {
   return (
     <section
       className={cn(
-        'flex gap-4 bg-gray-100 dark:bg-gray-700 p-4 items-center',
+        'flex gap-4 bg-gray-100 dark:bg-gray-900 p-4 items-center',
         className,
       )}
     >