Add dark mode

[jacobhq]

Adds dark mode to all marketing and dashboard pages. Closes #44.

[vercel[bot]]

@jacobhq is attempting to deploy a commit to the leerob-site Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
next-saas-starter	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 3, 2024 4:25pm

[jacobhq]

I don't know what has happened with the lock file diff, it says I added zod to the lockfile, whereas that also exists in main.

[leerob]

Dashboard styles are missing dark mode styles.

[leerob]

Are you still wanting to continue with this PR? The dashboard still does not work with dark mode. Lmk 🙏

[jacobhq]

Hi Lee, I can't see what the problem is at the moment. Here's what I can see on my machine. Are there any specific problems that I am missing. Thanks for you patience :)

[leerob]

I still see this on my machine: https://github.com/leerob/next-saas-starter/pull/45#issuecomment-2365370970

[jacobhq]

Try this on your machine - I noticed some weirdness with screen sizes. I tried simulating a 24" iMac in devtools, but it did not seem to affect styles. To remove the variable of differing machines, please could you take a look at this depolyment: https://next-saas-starter-git-1bb03f-jacob-marshalls-projects-01797007.vercel.app/dashboard/activity?_vercel_share=Ml10bUdPcxqhEGGD5FlkfsfykEz6AV74? You should be able to comment/highlight etc. on there with Vercel Toolbar.

[sanjomathew09]

// Get the theme toggle button const toggleButton = document.getElementById("theme-toggle");

// Check and apply saved theme preference from localStorage const savedTheme = localStorage.getItem("theme"); if (savedTheme) { document.documentElement.setAttribute("data-theme", savedTheme); toggleButton.textContent = savedTheme === "dark" ? "Switch to Light Mode" : "Switch to Dark Mode"; }

// Toggle theme on button click toggleButton.addEventListener("click", () => { const currentTheme = document.documentElement.getAttribute("data-theme"); const newTheme = currentTheme === "dark" ? "light" : "dark";

// Apply the new theme document.documentElement.setAttribute("data-theme", newTheme); toggleButton.textContent = newTheme === "dark" ? "Switch to Light Mode" : "Switch to Dark Mode";

// Save the theme preference to localStorage localStorage.setItem("theme", newTheme); });

[syntaxsurge]

I still see this on my machine: #45 (comment)

Can you just please merge this solution: https://github.com/nextjs/saas-starter/pull/56

Because it seems cleaner and works better than the current pull request. It’s been years, and I can’t believe dark mode is still not implemented. Thanks!

[jacobhq]

@syntaxsurge please test on your machine. I am unable to reproduce Lee's issue.

This PR works fine as far as I can tell. I think Lee did not want a toggle, so that's why he chose this PR.

Why? Their solution is different, and I would say that the solution in this PR is better than the one you mentioned. It’s been years, and I can’t believe dark mode is still not implemented.

I see - the other one uses foreground etc. - next time, please just say that with code review.

It’s been years, and I can’t believe dark mode is still not implemented.

Hyperbole is not productive. Please give specific feedback.

[syntaxsurge]

Dark mode is not working for me