add dark mode #3
Conversation
|
@dalkommatt is attempting to deploy a commit to the Vercel Labs Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Looks amazing. I'd love to merge it if we can tune the colors a bit more (e.g.: white on orange in the nav bar is too harsh, the search input look n feel, etc) |
|
Dark mode looks awesome! |
There was a problem hiding this comment.
Consider leveraging Tailwind CSS utility classes for colors instead of hardcoded values. To enhance readability and maintainability, utilize the predefined Tailwind color classes. Additionally, for any unique project-specific colors, it's advisable to add them to the tailwind.config.js file. This centralized approach streamlines color management, making the code more readable and easier to maintain.
| @@ -85,7 +85,7 @@ export default async function ItemPage({ | |||
| <div className="flex-grow"> | |||
| {story.url != null ? ( | |||
| <a | |||
| className="text-[#000000] hover:underline" | |||
| className="text-[#000000] dark:text-[#ffffff] hover:underline" | |||
There was a problem hiding this comment.
Consider using Tailwind CSS utility classes like text-white and text-black instead of hardcoded color values (#000000 and #ffffff) for improved readability and maintainability.
| @@ -96,19 +96,19 @@ export default async function ItemPage({ | |||
| <Link | |||
| prefetch={true} | |||
| href={`/item/${story.id.replace(/^story_/, "")}`} | |||
| className="text-[#000000] hover:underline" | |||
| className="text-[#000000] dark:text-[#ffffff] hover:underline" | |||
| {story.domain && ( | ||
| <span className="text-xs ml-1 text-[#666] md:text-[#828282]"> |
There was a problem hiding this comment.
Consider enhancing code maintainability by adding unique project colors to the Tailwind CSS configuration file (tailwind.config.js). This not only centralizes color definitions but also makes the code more readable and consistent. Utilizing named colors from the configuration file provides a single source of truth for color choices, making it easier for developers to manage and update the project's color palette.
| <Suspense fallback={null}> | ||
| <AuthNav /> | ||
| </Suspense> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main className="py-4 px-1 md:px-2 flex-grow bg-[#f6f6ef]"> | ||
| <main className="py-4 px-1 md:px-2 flex-grow bg-[#f6f6ef] dark:bg-[#1b1d20]"> |
| {children} | ||
| </main> | ||
|
|
||
| <footer | ||
| className="flex flex-col items-center justify-center p-4 border-t-2 border-t-[#FF9966] | ||
| text-black bg-[#f6f6ef]" | ||
| text-black bg-[#f6f6ef] dark:bg-[#1b1d20] dark:text-white" |
| <div tw="bg-[#f6f6ef] flex h-full w-full" style={font("Inter 300")}> | ||
| <div | ||
| tw="bg-[#f6f6ef] dark:bg-[#1b1d20] flex h-full w-full" | ||
| style={font("Inter 300")} |
Agreed this is preferable. This PR was made to match the current styling as-is but if @rauchg would like to update to css variables I'd be happy to add it. |
No description provided.