[Front-End] Implement Dark Mode

eryc-cc commented 2 years ago

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 https://github.com/open-sauced/insights/issues/55#issuecomment-1182607242

bdougie commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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

0-vortex commented 1 year ago

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 commented 1 year ago

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

0-vortex commented 1 year ago

@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 commented 1 year ago

.take

OgDev-01 commented 1 year ago

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

isabensusan commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

adiati98 commented 1 year ago

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

FatumaA commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

open-sauced / app

[Front-End] Implement Dark Mode #56