feat: dark mode

README.md

@@ -15,9 +15,13 @@ When user likes the recommendation, he can gives a like it simmilar the Tinder.
 
 [random-fy](https://random-fy.vercel.app/)
 
-## Screenshot
+## Screenshots
 
-![randomfy screen](./public/screenshots/1.png)
+- Light Mode
+  ![randomfy screen light mode](./public/screenshots/2.png)
+
+- Dark Mode
+  ![randomfy screen dark mode](./public/screenshots/3.png)
 
 ## Stack
 

src/components/audio-player/audio-player.tsx

@@ -24,15 +24,15 @@ export const AudioPlayer = ({ src }: AudioPlayerProps) => {
       {audio}
       {state.playing ? (
         <PauseIcon
-          className="h-20 w-20 sm:h-10 sm:w-10 fill-gray-600 cursor-pointer
+          className="h-20 w-20 sm:h-10 sm:w-10 dark:fill-gray-100 fill-gray-600 cursor-pointer
           hover:scale-110
           transition duration-200 ease-out hover:ease-in"
           type="button"
           onClick={controls.pause}
         />
       ) : (
         <PlayIcon
-          className="h-20 w-20 sm:h-10 sm:w-10 fill-gray-600 cursor-pointer
+          className="h-20 w-20 sm:h-10 sm:w-10 dark:fill-gray-100 fill-gray-600 cursor-pointer
           hover:scale-110
           transition duration-200 ease-out hover:ease-in"
           type="button"

src/components/content/content.tsx

@@ -4,7 +4,7 @@ type ContentProps = Record<string, unknown>
 
 export const Content = ({ children }: PropsWithChildren<ContentProps>) => {
   return (
-    <div className="max-w-6xl my-0 mx-auto min-h-screen bg-neutral-50">
+    <div className="max-w-6xl my-0 mx-auto min-h-screen bg-neutral-50 dark:bg-neutral-700">
       {children}
     </div>
   )

src/components/image-box/image-box.skeleton.tsx

@@ -7,19 +7,19 @@ export const ImageBoxSkeleton = () => {
           className="flex flex-col max-w-xs relative shadow-md hover:shadow-lg animate-pulse"
         >
           <div
-            className="rounded bg-white p-5 hover:grayscale 
+            className="rounded bg-white dark:bg-neutral-900 p-5 hover:grayscale 
         transition duration-200 ease-out hover:ease-in"
           >
             <div className="pb-3 p-2 flex justify-center">
-              <div className="rounded-full bg-gray-600 h-8 w-8" />
+              <div className="rounded-full bg-gray-600 dark:bg-gray-100 h-8 w-8" />
             </div>
             <div
               aria-label="image loading"
-              className="rounded w-72 h-72 bg-gray-300"
+              className="rounded w-72 h-72 bg-gray-300 dark:bg-gray-600"
             />
 
-            <div className="mt-4 w-20 h-4 bg-gray-800 rounded" />
-            <div className="mt-4 w-6/12 h-4 bg-gray-500 rounded" />
+            <div className="mt-4 w-20 h-4 bg-gray-800 dark:bg-gray-100 rounded" />
+            <div className="mt-4 w-6/12 h-4 bg-gray-500 dark:bg-gray-200 rounded" />
           </div>
         </div>
       ))}

src/components/image-box/image-box.tsx

@@ -18,9 +18,9 @@ export const ImageBox = ({
   onLike
 }: ImageBoxProps) => {
   return (
-    <div className="flex flex-col max-w-xs relative shadow-md hover:shadow-lg">
+    <div className="flex flex-col max-w-xs relative shadow-md hover:shadow-lg dark:shadow-neutral-700">
       <div
-        className="rounded bg-white p-4 hover:grayscale 
+        className="rounded bg-white dark:bg-neutral-900 p-4 hover:grayscale 
         transition duration-200 ease-out hover:ease-in"
       >
         <AudioPlayer src={audioSrc} />
@@ -32,8 +32,10 @@ export const ImageBox = ({
           height="300"
         />
         <div className="flex flex-col items-start p-2">
-          <strong className="w-64 truncate">{track}</strong>
-          <p className="w-64 truncate">{artist}</p>
+          <strong className="w-64 truncate dark:text-neutral-200">
+            {track}
+          </strong>
+          <p className="w-64 truncate dark:text-neutral-200">{artist}</p>
         </div>
       </div>
       <div className="absolute top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4">

src/components/sub-title/sub-title.tsx

@@ -4,7 +4,7 @@ type SubTitleProps = Record<string, unknown>
 
 export const SubTitle = ({ children }: PropsWithChildren<SubTitleProps>) => {
   return (
-    <h2 className="text-5xl text-gray-800 font-semibold leading-10 tracking-wide">
+    <h2 className="text-5xl dark:text-gray-200 text-gray-800 font-semibold leading-10 tracking-wide">
       {children}
     </h2>
   )

src/components/title/title.tsx

@@ -4,8 +4,8 @@ type TitleProps = Record<string, unknown>
 
 export const Title = ({ children }: PropsWithChildren<TitleProps>) => {
   return (
-    <span className="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-gray-200 relative inline-block">
-      <h1 className="relative text-5xl sm:text-7xl text-gray-800 font-semibold">
+    <span className="before:block before:absolute before:-inset-1 before:-skew-y-3 dark:before:bg-gray-600 before:bg-gray-200 relative inline-block">
+      <h1 className="relative text-5xl sm:text-7xl text-gray-800 dark:text-gray-200 font-semibold">
         {children}
       </h1>
     </span>

src/pages/_document.tsx

@@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from 'next/document'
 export default class MyDocument extends Document {
   render() {
     return (
-      <Html lang="pt-BR">
+      <Html lang="pt-BR" className="bg-neutral-50 dark:bg-neutral-700">
         <Head>
           <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
           <link

src/styles/globals.css

@@ -8,7 +8,6 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  background-color: rgb(250 250 250);
   scroll-behavior: smooth;
 }
 a {

src/templates/home/non-authenticated.tsx

@@ -11,7 +11,7 @@ export const NonAuthenticated = () => {
       <div className="p-4 mt-8   mb-0 mx-auto sm:w-4/5 w-full">
         <SubTitle>Yeah.</SubTitle>
         <SubTitle>Hello music lover!</SubTitle>
-        <p className="mt-8 text-5xl font-thin text-gray-700 leading-10 tracking-wide">
+        <p className="mt-8 text-5xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide">
           Are you ready to know new Spotify artists and create a playlist with
           them?
         </p>
@@ -20,7 +20,8 @@ export const NonAuthenticated = () => {
         <div className="flex justify-center">
           <Link href="/api/login">
             <a
-              className="flex justify-evenly items-center w-56 p-3 rounded-full font-semibold text-center text-gray-100 bg-gray-900"
+              className="flex justify-evenly items-center w-56 p-3 rounded-full font-semibold 
+              text-center text-gray-100 dark:text-gray-800 bg-gray-900 dark:bg-gray-200"
               aria-label="login button"
             >
               <Image