Issue 9 - Light Mode Feature

[rjwignar]

This fixes #9

Changes were tested by running Timeloom using npm run dev (dev script)

Summary of Changes

Modified the following files:

• app/globals.css
  • Added light mode styles
  • Modified base layer to apply light/dark mode styles to root based on user system preference
• app/page.tsx
  • Added landing page Header text gradient for light mode
  • Wrapped original text gradient styling in dark:{class} to apply them in dark mode
  • Added "Claim Username" blurb styling for light mode
  • Wrapped original blurb styling in dark:{class} to apply it in dark mode
• components/Footer.tsx
  • Added light mode styling for Link component in Footer
  • Wrapped original Link component styling inside dark:{class} to apply them in dark mode
• components/ui/button.tsx
  • Added hover coloring for light mode
  • Wrapped original hover coloring inside dark:{class} to apply them in dark mode
• tailwind.config.ts
  • extended dark mode settings to use media (for OS preference) strategy alongside existing class (manual) strategy, as per https://tailwindcss.com/docs/dark-mode
  • I noticed the order matters here
    • darkMode: ["media", "class"], enables both the OS preference strategy and class strategy
    • If darkMode: ["class", "media"], is used, only the class strategy is enabled

Prospective Changes (Pending Maintainer approval)

bg-grid.png for Light Mode

• If a Figma is provided, I will attempt to create a light mode version of bg-grid.png and add it to the assets.
• Logic will be used to show respective versions depending on light/dark mode.

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @inclinedadarsh on Vercel.

@inclinedadarsh first needs to authorize it.

[inclinedadarsh]

Heyy @rjwignar Let's skip the bg-grid.png for now, I'll open a new issue for that.

It seems like you're done working on this one, if so, please mark it for review. Thanks!

[rjwignar]

I think I've marked it for review now. Please let me know if it's the same on your end.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

| Name | Status | Preview | Updated (UTC) | | :--- | :----- | :------ | :------ | | **timeloom** | ⬜️ Ignored ([Inspect](https://vercel.com/inclinedadarsh/timeloom/6C7th7CF9nYVkwgx73gHNX8MeALw)) | [Visit Preview](https://timeloom-git-fork-rjwignar-issue-9-inclinedadarsh.vercel.app) | Nov 6, 2023 0:20am |

[rjwignar]

I experimented with the Next Themes solution provided on a test branch and the solution only provides light/dark mode support similar to the media strategy used by TailwindCSS. I don't think the Next Themes strategy is required to refactor the code.

However, I can look into cleaning up globals.css so that styles are specified only once.

Alternatively, I can use the light/dark themes provided by Next Themes. However, this will likely replace the light/dark mode styles we created.

Please let me know which you would like me to do.

[rjwignar]

Yesterday I moved the light mode styles into the root styling and removed duplicate stylings from globals.css. Please let me know if this refactor is sufficient, or if you would like to use one of Next Themes' light/dark mode presets instead.

[rjwignar]

Thanks for the feedback! I plan to work on this over the weekend. I'll request another review when ready.

[rjwignar]

I've made the UI changes requested. Please let me know what you think!