Color Picker - Dark and Light

1

The Standard macOS Color picker is outdated… it basically allows you to select a single monolithic color, which was fine for the days before “darkmode” was available. But today macOS (combined with iOS) support almost 100 “named” colors, which cannot really be displayed in a color well as they change color when the app transitions from dark to light and vice-versa. An example would be “NSColor.labelColor”… it is black in light mode, and white in dark mode.

Does anyone have an idea how to handle this situation in a Property Inspector / Color Picker?

2

What I did was

  1. every “color” for a component has a “default” value (literally the value “default”)
    this color will be the color mode sensitive named value (ie nscolor.textcolor)
    anything set to this color will automatically transition as the color mode is changed

  2. a user of this software can make their own “color item” that is either as single fixed color or dual mode color - one for light & one for dark and assign that to the element and it will switch if needed to the assigned color(s)

The “property” effectively isnt a “color” (ie/ not a single RGB, HSV, etc value)

1 Like
3

I need to somehow do this in a Property Inspector type control. I figured that internally I would have to store the colors as strings (name of color), especially since the values will be used in code that this app would “write”, so it has no idea as to the “state” of the color.

Things like

myColor = "labelColor"
myColor = "red"
myColor = "&CF3A299"

the issue is how to “pick” those colors

4

Yeah mine works in a property inspector type control as well :slight_smile:
the “cell” that edits the property has a specific class that knows how to present & handle this class that represents a “color” for this system
but that class basically holds

  1. a color - for the single color mode
  2. a property that is a dual mode color (user created dual mode color)
  3. a property that indicates whether it should be using the “default”

its not just a color

5

No idea yet. Apple’s documentation lists all named colours the different OSes use.

In SwiftUI, the API takes care of switching to the appropriate colours in dark mode and back. Only non-named colours need a color definition for light|dark mode in the assets.

6

Without going too deep into this, I would suggest offer the customer two things.

  1. Offer the customer a custom color palette where they can create their own color palette for all 4 or 5 themes. Then at convert time, create code that generates these as dynamic colors.
  2. When picking a color, it is a pre-fixed list of system colors and their own palette.

This way your code generator doesn’t need to know as it’s simply using the color objects your customers specified or system related colors.