# Bug DREAM-124 - OpenProject Dark Mode: reiterate hover/active button colour

Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-124

## Open points

_No work packages_

## Details

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Module |  |
| Target versions | 14.5.0 |
| Observed in versions | 14.4.0 |
| Sprint |  |
| Backlog bucket |  |
| Bug found in version (deprecated) | 14.4.x |
| Requires doc change | No |
| Accessibility | Yes |
| Pull preview |  |
| List | a11y report 2025 |
| Labels |  |

## People

| Attribute | Value |
| --- | --- |
| Assignee | Oliver Günther |
| Accountable | Henriette Darge |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Planning

| Attribute | Value |
| --- | --- |
| Relevance |  |

## Costs

| Attribute | Value |
| --- | --- |
| Votes |  |
| Work |  |
| Labor costs |  |

## Description

# Pain

Please see the two screenshots below. I think the hover colour and the active colour for buttons (in this case wp-table) should be changed (if not considered a bug, then as a feature).

I'm young, I have good eyes, I'm using a MacBook Pro with one of the best displays one can get and I'm having trouble distiguishing the active colour, from the off colour.

In contrast (other two screenshots) where the hover effect is very clearly noticeable.

**--- Full screen button is active, Filter button is hovered**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:514px;" src="/api/v3/attachments/139628/content">

**light mode**

<figure class="image image_resized op-uc-figure" style="width:456px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/159681/content"></div></figure>

**--- Positive Hover effect examples**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:457px;" src="/api/v3/attachments/139613/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:271px;" src="/api/v3/attachments/139611/content">

# Acceptance criteria

  - In dark mode: Active buttons should have a shadow effect to the inside (similar to how it is done in the light mode)
    
      - The shadow should go to the inside, indicating a pressed state
    
      - A dark grey is used as color for the shadow effect

### Environment information

*Please check and fill out the following details to help us identify in what versions and distributions of OpenProject the error occurs*

**OpenProject installation type**

- [x] Hosted cloud edition (your installation)

- [ ] Packaged installation
  
    - What distribution?

- [ ] Docker All-in-one container

- [ ] Docker-compose installation

- [ ] Other (please specify)

**OpenProject version**

*14.4.0*

**Browser**

- [ ] Chrome
- [ ] Firefox
- [x] Safari
- [ ] Mobile Safari
- [ ] Other (please specify)