4

As is the web standard, disabled inputs become "grayed out", getting a little darker and sometimes less opaque:

enabled buttons and input disabled buttons and input

So my question is how to replicate this in dark mode. This is how it looks when they're enabled:

enabled buttons and input - dark mode

And the options are to make them either lighter (to mimic them being grayed out) or darker (because that's what happens in light mode) when disabling:

disabled buttons and input option 1 - dark mode disabled buttons and input option 2 - dark mode

Is there an existing pattern for this?

3

Disabled buttons are usually a play on contrast/opacity.

Here is MUI light theme:

A light theme showing buttons in various states

And here is their dark theme:

A dark theme showing buttons in various states

This library follows Google's Material Design guidelines and you can have a look at the dark/light styling of many UI components in both light and dark theme (see toggle button at the app bar right side):

https://material-ui.com/components/buttons/

| improve this answer | |
2

A rule of thumb is to reduce the button's opacity vs. graying out.

When the disabled button is transparent, users can see some semblance of the button in its enabled state. Although the button is faded out, some color still bleeds through for recognition. As the disabled button transitions to an enabled state, its new appearance is what they expect.

A transparent button ... blends into the background more, while a gray one stands out in the foreground (unless the background is gray). Foreground elements are more noticeable, which means users are more likely to click a gray disabled button. When they do, they’ll wonder why it’s not doing anything.

Another issue with gray buttons is that it’s easy for users to mistake them for secondary actions. Gray is often used to communicate a low priority button (e.g., cancel buttons). When they see a gray button, they won’t know for sure if it’s disabled unless they click it. This uncertainty and unpredictability is not an optimal user experience.

| improve this answer | |
1

A way to show the inactive state is to keep the background color unchanged but change the text color by making it darker.

Visual studio dark theme does this in the menu:
visual studio dark theme menu

| improve this answer | |
0

Disabling a control doesn't make it darker per se, it reduces its contrast.

The desired effect is not to make a disabled control look gray for the sake of being gray, it's to make it less prominent when compared to enabled controls.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.