Problem/Motivation

I've opened that issue already over in the Gin queue: https://git.drupalcode.org/project/gin/-/work_items/3506312

There are two problems:. First the styling for the switch component differs between light and dark mode. In light mode you have the same gray background for every accent color in the off state and the same green color in the on state. While in dark mode you are having the same gray background color for every accent color in the off state while in the on state the background color mirrors the chosen accent color. In light mode the color contrast between the switch background and the page background is high enough, same for the color contrast between the switch background and the white knob.

one disabled toggle switch and one enabled toggle switch in light mode in the default admin theme

Due to the fact that in dark mode the accent color is used for the on state a lot of combinations fail SC1.4.11.

one disabled toggle switch and one enabled toggle switch with orange accent color in dark mode in the default admin theme

I've labeled the contrasts that dont meet SC1.4.11 in the following list with 🚫.

Off State (the same for every accent color choice):
page #3b3b3f #2a2a2d 1.28:1 🚫
knob #3b3b3f #ffffff 11.15:1 ✅

=> the switch looks more like a checkbox, in particular with several switch toggles right underneath eachother, because the background has a way too low contrast against the page background.

On State:
Blue
page #555aa3 #2a2a2d 2.1:1 🚫
knob #555aa3 #ffffff 6.22:1 ✅

Light Blue:
page #50608d #2a2a2d 2.32:1 🚫
knob #50608d #ffffff 6.17:1 ✅

Dark Purple
page #6a4b9a #2a2a2d 2.1:1 🚫
knob #6a4b9a #ffffff 6.81:1 ✅

Purple
page #7049ae #2a2a2d 2.22:1 🚫
knob #7049ae #ffffff 6.48:1 ✅

Teal
page #436663 #2a2a2d 2.27:1 🚫
knob #436663 #ffffff 6.33:1 ✅

Green
page #436746 #2a2a2d 2.23:1 🚫
knob #436746 #ffffff 6.41:1 ✅

Pink
page #50608d #2a2a2d 2.27:1 🚫
knob #50608d #ffffff 6.29:1 ✅

Red
page #974743 #2a2a2d 2.25:1 🚫
knob #974743 #ffffff 6.39:1 ✅

Orange
page #88533e #2a2a2d 2.25:1 🚫
knob #88533e #ffffff 6.26:1 ✅

Yellow
page #755b37 #2a2a2d 2.25:1 🚫
knob #755b37 #ffffff 6.33:1 ✅

Neutral
page #545454 #2a2a2d 1.89:1 🚫
knob #545454 #ffffff 7.57:1 ✅

Steps to reproduce

Got to admin/appearance/settings/default_admin and play around switching between light and dark mode, with some toggle switches on and some toggle switches off, and start switching between the given accent colors and observe how the contrast behaves.

Proposed resolution

First decide if the light mode should also adapt the chosen accent color or if in dark mode that adaption should be dropped and a single color across accent colors should be chosen for the on state?

Either way, ensure that the background of the switch component in light and dark mode has always a color contrast of 3:1 against the page background and the knob having a color contrast of 3:1 against the switch component background as well. not matter if the switch is mirroring the accent color choice or not.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
dark_mode.jpg33.7 KBrkoller
light_mode.jpg38.25 KBrkoller

Issue fork drupal-3636128

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rkoller created an issue. See original summary.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue summary: View changes
rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue summary: View changes
sapnil_biswas’s picture

sapnil_biswas commented
Assigned: Unassigned » sapnil_biswas

I would love to work on this issue!

sapnil_biswas opened merge request !17739

sapnil_biswas’s picture

sapnil_biswas commented
Assigned: sapnil_biswas » Unassigned
Status: Active » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs subsystem maintainer review

First decide if the light mode should also adapt the chosen accent color or if in dark mode that adaption should be dropped and a single color across accent colors should be chosen for the on state?

Going off the summary don't see where this was decided.

Can we upload testing screenshots showing these passing 3:1

Before we starting removing dark-mode settings I'd like a sub-maintainer to weigh in.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented

re #7

Going off the summary don't see where this was decided.

It was not decided I am asking for feedback. From my point of view it should be consistent. either light should have one background color for on state and one for off state and on dark mode one background color for on state and one for off state. Or use in light mode the accent color in on state as well, same as it is currently used in dark mode.

Can we upload testing screenshots showing these passing 3:1

i havent had time to test the MR and if it fixes things. (i think first the first question about consistency should be decided on

Before we starting removing dark-mode settings I'd like a sub-maintainer to weigh in.

i never suggested to remove any settings. it is just about the visual styling of the switch component.