Flipper: Discussion: Dark theme

[troy-lamerton]

Steps to reproduce

1. Use mac with dark theme
2. Open flipper.app
3. Flipper's white UI burns your eyes

Question

Which files/modules would need changing to add dark mode?

[danielbuechele]

Hey Troy,
that's something that is on my list as well. Unfortunately, we didn't have the time to implement this, yet. But I'm fully supportive of adding dark mode support!

To check if the system is in dark mode, electron provides an API: require('electron').remote.systemPreferences.isDarkMode(). All colors that we are using are defined in this file: https://github.com/facebook/flipper/blob/master/src/ui/components/colors.tsx
So a first step could be simply returning a different set of colors from this file, while dark mode is active.

[troy-lamerton]

Looking like I won't get to this as my priorities have changed. Would be glad for someone else to take the lead.

[troy-lamerton]

I inverted all colors.

[lucasbento]

@danielbuechele @passy: where did those colours come from? any chance that someone could provide their _matches_ for dark mode?

The easiest part is to identify if the OS is running on dark mode, deciding which hex to use for specific parts is the tricky one.

[osamaaamer95]

As someone who works with dark mode on, I would love to work on this if someone else isn't already.

[lucasbento]

You are more than welcome to work on it @osamaaamer95 😄

[zhigang1992]

Would it be possible to integrate something like https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhnkhdbieeh

[lukebars]

@osamaaamer95 are you currently working on it? I could spare some time and do it / help with something

[osamaaamer95]

@lukebars yes, I started going through the codebase and am familiarizing myself. I have full time work though, so anyone is welcome to collaborate!

[osamaaamer95]

Main UI elements are done, but I am not fully comfortable with the approach @danielbuechele suggested. Most colors are named light<variation> and returning a different set would mean I have to do something like this:

const baseColors = {
  // existing color palette
}

export const colors = {
  ...baseColors,
  ...(SHOULD_USE_DARK && {
    // return overrides for dark mode
    light50: baseColors.dark50, 
    macOSTitleBarBackgroundTop: '#434444'
}

When a developer wants an element to have the color light50, but dark mode overrides it, I think it is semantically incorrect. UI elements should use a key which describes the element instead of it's color when the color is mutable. Overriding macOSTitleBarBackgroundTop instead of light50 just makes more sense.

[ezranbayantemur]

@osamaaamer95 Looks amazing! I hope it will be implement the app.

[whenmoon]

Guys I have just started using Flipper and it is amazing but my eyes are buuuuuurning! :)

[lukebars]

@danielbuechele @nikoant got few minutes for this ? https://github.com/facebook/flipper/issues/552#issuecomment-615117097

[mweststrate]

As a short update on this, we are looking into standardizing on a well established publicly available component library, probably ant.design. With that we will also start to support dark mode.

[mweststrate]

This is planned, so closing the issue for now.

[troy-lamerton]

@mweststrate What's the status of this?

Does the label fix-in-sandy mean it is being worked on?

[mweststrate]

Dark mode is available in the Flipper settings. Some plugins and core components don't respect it yet though, that is WIP.