Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode #45

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add dark mode #45

wants to merge 8 commits into from

Conversation

jacobhq
Copy link

@jacobhq jacobhq commented Sep 21, 2024

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

Copy link

vercel bot commented Sep 21, 2024

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

A member of the Team first needs to authorize it.

@jacobhq jacobhq marked this pull request as ready for review September 21, 2024 11:08
package.json Outdated Show resolved Hide resolved
Copy link
Collaborator

@leerob leerob left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to revert the lockfile changes as well 🙏

Copy link

vercel bot commented Sep 21, 2024

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
Copy link
Author

jacobhq commented Sep 21, 2024

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
Copy link
Collaborator

leerob commented Sep 22, 2024

CleanShot 2024-09-21 at 19 06 52@2x

Dashboard styles are missing dark mode styles.

@jacobhq jacobhq requested a review from leerob September 23, 2024 09:39
@johanguse johanguse mentioned this pull request Oct 1, 2024
@leerob
Copy link
Collaborator

leerob commented Nov 1, 2024

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

@jacobhq
Copy link
Author

jacobhq commented Nov 1, 2024

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 :)
image

@leerob
Copy link
Collaborator

leerob commented Nov 2, 2024

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

@jacobhq
Copy link
Author

jacobhq commented Nov 2, 2024

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
Copy link

// 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);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add dark mode
3 participants