Map colours from the colour palette from dark theme to light theme

[benoitf]

Is your enhancement related to a problem? Please describe

To implement light theme, we would need a mapping between colours of the current colour palette

like bg-charcoal-800 needs to be mapped to bg-gray-200

Describe the solution you'd like

Defines a mapping between colours when using light or dark theme

Describe alternatives you've considered

any other suggestions is welcome

Additional context

No response

[feloy]

Is your enhancement related to a problem? Please describe

To implement light theme, we would need a mapping between colours of the current colour palette

like bg-charcoal-800 needs to be mapped to bg-gray-200

I'm afraid it won't work because of contrasts between foreground and background colors. For exemple, a bg-charcoal-800 used in one place could be different, in light mode, from another bg-charcoal-800 used somewhere else.

It would need to introduce a level of abstraction indicating the semantic of the colour (page background, button background, button foreground, etc)

[benoitf]

@feloy AFAIK it should work fine to shape the initial design

I mean, for example based on some guidelines we don't use charcoal for buttons, and bg- mean background, for text colour it would be text- something

Of course it would require to review the final screen, but it can give a clear overview. Also the palette is quite limited so it could work.

I think you're asking too much details, if everything need a context
I would go for simplicity first and iterate

[deboer-tim]

This would be a good topic for UX call, although due to US holiday we don't have one this week. I think there will be some rough mapping (and we'll have to extrapolate in order to apply light mode everywhere without UX being a bottleneck), but I agree with @feloy that it's unlikely to be a direct mapping for everywhere/all components.

Maybe we can start by asking for a mockup of one or two screens (e.g. Dashboard or Containers page and Settings > Resources)? That'll give us something concrete to work on, and most of the mapping to apply elsewhere?

[ekidneyrh]

Hi! I started on this today. I have a non-setting screen, the Dashboard:

and a Settings page:

I kept most of the purple the same and tried to be consistent with the colours. What do you think?

[feloy]

Except the Settings button in the first page which is not contrasted, as a light mode guy, I like it :) 👍

[benoitf]

nice progress

Probably we would need to run screens with a11y tools checking contrast, etc

[benoitf]

FYI I added some comments there #5878

[benoitf]

I notice that colors in penpot are different than the one currently implemented for the dark theme

current implementation:

in penpot, hover is purple, current implementation is gray
in penpot, background color is lighter than current implementation

current implementation background color of navbar is charcoal-800
penpot for dark theme: charcoal-600

you confirm the new colors for dark theme that will replace the current implementation ?

[ekidneyrh]

you confirm the new colors for dark theme that will replace the current implementation ?

I know @mairin is working on the official dark theme colouring - so i would say wait maybe until it's confirmed that it's complete.

[ekidneyrh]

For the light theme, I have some updates.

To add more contrast, I added in the use of purple for the second menu and upped the gray for the boxes and inverted background.

I have checked all the text and icon contrast to make sure they comply with WCAG guild lines, everything is at least AA rated I believe.

The only thing I'm worried about is the little panel of coloured icons in the main nav bar - I'll have to find a colour that would work with those.

[ekidneyrh]

Another update.

I added light mode into the theming section of the design system penpot doc.

Here are the values:

#Light mode colours

##Global Nav Theming

global-nav-bg: gray-100
global-nav-icon: charcoal-200
global-nav-icon-hover: purple-800
global-nav-icon-hover-bg: purple-300
global-nav-icon-inset-bg: dustypurple-200
global-nav-icon-selected-highlight: purple-600
global-nav-icon-selected: purple-800
global-nav-icon-selected-bg: purple-300
global-nav-icon-notification-dot: purple-600

##Secondary Nav Theming

secondary-nav-bg: dustypurple-100
secondary-nav-header-text: charcoal-900
secondary-nav-text: charcoal-700
secondary-nav-text-hover: purple-800
secondary-nav-text-hover-bg: purple-300
secondary-nav-text-selected: purple-800
secondary-nav-selected-bg: purple-300
secondary-nav-selected-highlight: purple-600
secondary-nav-icon-notification-dot: purple-600
secondary-nav-expander: charcoal-700

##Content Theming

content-breadcrumb: purple-900
content-breadcrumb-2: purple-600
content-header: charcoal-900
content-header-icon: gray-300
content-card-header-text: charcoal-900
content-card-bg: gray-050
content-card-text: purple-900
content-card-inset-bg: dustypurple-200
action-button: purple-600
action-button-text: white
ghost-button: purple-600
content-bg: gray-300
card-checked-box-icon: purple-600
content-card-icon: purple-900

##Invert Content Theming

invert-content-bg: gray-050
invert-content-header-text: charcoal-900
invert-content-header-2-text: charcoal-900
invert-content-card-bg: gray-300
invert-content-card-header-text: charcoal-900
invert-content-card-text: charcoal-700
invert-button-active: purple-600
invert-button-inactive: charcoal-050
invert-info-icon: purple-600

##Statusbar Theming

statusbar-bg: dustypurple-400
statusbar-text: purple-900
statusbar-icon: purple-900

##Titlebar Theming

titlebar-icon: purple-900
titlebar-text: purple-900
titlebar-bg: gray-050

##Focused Input Field Theming

input-field-focused-bg: gray-100
input-field-focused-text: gray-900
input-field-focused-stroke: purple-600
input-field-focused-icon: purple-600

Global Nav Theming:

Secondary Nav Theming:

Content Theming:

Invert Content Theming:

Statusbar Theming:

Titlebar Theming:

Focused Input Field Theming:

I'm sure there'll be more components that come up that need converting so let me know if you come across any :)