[Front-End] Implement Dark Mode

[pixelsbyeryc]

Currently Tailwind requires us to add dark mode colors within the component. I think that makes it too unreadable and just a pain to maintain.

The way I set up the colors is:

colors: {
  light: {
    "slate": {
      "1": "hsl(206, 30.0%, 98.8%)",
      ...
      "12": "hsl(206, 24.0%, 9.0%)"
    },
    "slate-a": {
      "1": "hsla(210, 92.6%, 26.5%, 0.016)",
      ...
      "12": "hsla(202, 97.0%, 2.4%, 0.934)"
    }
  },
  dark: {
    "slate": {
      "1": "hsl(200, 7.0%, 8.8%)",
      ...
      "12": "hsl(210, 6.0%, 93.0%)"
    }
  }
}

There should be a way for us to use these color steps as CSS Variables, so when the theme changes, only the values in the CSS Variable change, not the classes in the components.

You only declare slate-1 once in the component, then the theme handles whether the color will be from the light or dark theme.

I'm opening a new issue, because this is not something we need to resolve in this PR, nor is it something urgent.

Originally posted by @pixelsbyeryc in #55 (comment)

[bdougie]

Dark mode will need to be approached during a polish sprint, perhaps when investigating animations prior to launch. But I think based on what we have so far, we should document this. We have implemented and approached to check the system of user preference and set it for when they return back to the site each time. Swapping variable contents should not be too hard.

https://github.com/open-sauced/open-sauced/blob/main/src/lib/systemIsDark.js

[0-vortex]

We are adding custom classes, it is time we do dark mode!!! 🍕

If dark mode is a feature we will definitely ship, then we cannot add extra custom light mode classes without creating technical debt. Variations to the design system are hence blocked for the time being 🚀

[takanome-dev]

Setting up dark mode is really easy now thanks to next-themes. The dark class will be added everywhere though 👀

[0-vortex]

Setting up dark mode is really easy now thanks to next-themes. The dark class will be added everywhere though 👀

Not sure this is the best way to go about it 😓

[takanome-dev]

@0-vortex do you have any ideas on how to implement this?

[0-vortex]

@0-vortex do you have any ideas on how to implement this?

IMHO the best way to go is still: https://tailwindcss.com/docs/dark-mode - and we have a lot of dark mode classes anyway so should not stir away from the baseline 😅

[adiati98]

.take

[OgDev-01]

@bdougie, do we plan on implementing this anytime soon?

[isabensusan]

@OgDev-01 I'd say this is not a priority right now. Let's put it in the backlog so we can revisit in the future.

[adiati98]

@OgDev-01 @isabensusan,
I haven't got a chance to work on this. I only did some research and tested it a bit with @dominicduffin1.

Should we continue working on this? Or is it better if I unassign myself from this issue and get back to it in the future?

[nickytonline]

As @isabensusan mentioned, we'll revisit this in the future.

[adiati98]

Thanks, @nickytonline.
In that case, I unassign myself from this issue. 🙂

[FatumaA]

Hi,
It appears that @rodgersgitau has an accepted PR on the same.
I think we can remove the "needs-triage" label and put maybe "on-hold"/"style"/"ux"?

[takanome-dev]

Hi, It appears that @rodgersgitau has an accepted PR on the same.

Oh, he merged it on his own fork :)

I think we can remove the "needs-triage" label and put maybe "on-hold"/"style"/"ux"?

You can mark it as blocked & needs design 👍

[FatumaA]

Now that workspaces is out and the team is focussing on stabilising it, is there any reason why this can't be worked on? 👀