# Feature DREAM-70 - Possibility to change logo used in high contrast or dark mode

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

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes | 2 |
| List | a11y report 2026 |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| OP-20329 | Bug | Logos of OP predefined themes should only be used in light standard theme | confirmed |  | 18.0.0 |  | Frontend components and Primer design system, Administration |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Administration / Custom themes, Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Enterprise / Basic (BAS) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design-Settings?node-id=5-3973&t=Xb62Hbq48YMfCGMH-4 |
| Accessibility | Yes |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Behrokh Satarnejad |
| Designer | Marc Alcobé |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** an administrator of a large OpenProject instance  
**I want to** make sure that our custom logo also appears in the top bar when the high contrast mode is in use  
**so that** users still know which application they are currently using and do not get confused

# **Current situation:**

A custom logo will be replaced by an OpenProject logo for users who activate the high contrast mode

_mentioned in support ticket 16869_

# **Acceptance criteria**

#### 1\. Administration (admin/design)

*   On the admin/design page, a separate desktop logo can be uploaded for each available mode: **Light**, **Light High Contrast** and **Dark**.
    
    *   dark high contrast just uses the same as dark mode as they have the same background
        
*   In a new **Mobile Logos** section, a mobile logo can be uploaded for the same modes: **Light**, **Light High Contrast** and **Dark**.
    
*   Uploaded logos can be removed individually. After removal, the fallback logic described below applies.
    

####   

#### 2\. Desktop fallback logic

The desktop logo is determined in the following order. The first matching rule wins:

1.  Desktop logo for the user's mode
    
2.  Mobile logo for the user's mode
    
3.  Light desktop logo
    
4.  Light mobile logo
    
5.  Default: OpenProject logo
    

A logo for a different non-light mode is never used as a fallback. For example, Light High Contrast never falls back to Dark and vice versa.

#### 3\. Mobile fallback logic

1.  Mobile logo for the user's mode
    
2.  Light mobile logo
    
3.  If Desktop shows the default OP logo, then we should show the default **mobile** OP logo, otherwise show **no** mobile logo.
    

## Scenarios

#### Scenario 0: No logos

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">0.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">None (desktop and mobile)</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Default OpenProject logo in all modes (as today)</p></td></tr></tbody></table></figure>

#### DESKTOP

**Scenario 1: User is in Light mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">1.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">1.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light High Contrast only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Default OP logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">1.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Default OP logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">1.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">1.5</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Mobile Light</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light, desktop)</p></td></tr></tbody></table></figure>

**Scenario 2: User is in Dark mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light High Contrast only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Default OP logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.5</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Light High Contrast + Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.6</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">2.7</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Mobile Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Dark)</p></td></tr></tbody></table></figure>

**Scenario 3: User is in Light High Contrast mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">3.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">3.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light High Contrast only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light High Contrast)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">3.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Default OP logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">3.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">3.5</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Light High Contrast + Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light High Contrast)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">3.6</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Mobile Light High Contrast</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light High Contrast)</p></td></tr></tbody></table></figure>

**Scenario 4: User is in Dark High Contrast mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">4.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">4.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light High Contrast only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Default OP logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">4.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">4.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">4.5</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light + Light High Contrast + Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">4.6</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Dark)</p></td></tr></tbody></table></figure>

#### MOBILE

**Scenario 5: User is in Light mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">5.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light (desktop) + Mobile Light</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">5.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light (desktop) only, no mobile logo</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">5.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">OP default mobile logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">5.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Dark desktop and dark mobile&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p">OP default mobile logo</p></td></tr></tbody></table></figure>

**Scenario 6: User is in Dark mode or Dark High Contrast mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">6.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">6.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Light + Mobile Dark</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Dark)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">6.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Dark (desktop) only, no mobile logo</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">6.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light desktop only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">6.5</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light desktop and mobile light</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light)</p></td></tr></tbody></table></figure>

**Scenario 7: User is in Light High Contrast mode**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">No.</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Uploaded logos</p></th><th class="op-uc-table--cell op-uc-table--cell_head" scope="col"><p class="op-uc-p">Expected result</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">7.1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Light only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">7.2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Light + Mobile Light High Contrast</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light High Contrast)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">7.3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Mobile Dark only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">7.4</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light desktop only</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No logo</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">7.5</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Light desktop and mobile light</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Custom mobile logo (Light)</p></td></tr></tbody></table></figure><br>