Problem Statement

The current OneDev icon variants suffer from insufficient contrast when rendered against backgrounds that do not match their intended theme. The black icon becomes invisible on dark or dark-colored surfaces, and the white icon becomes invisible on light or light-colored surfaces. This is not limited to the OneDev application itself. It affects any integration point where the icon is embedded externally and the host environment uses a theme outside of our control.

Real-World Impact

1. Identity portal: We use the OneDev icon as a launch target for users to SSO directly into OneDev. Users choose their own light or dark theme settings on the portal. We cannot enforce a single theme, so we cannot guarantee the icon will be visible.

2. Browser themes: Users with non-standard browser themes (dark red, dark blue, purple, and similar) find the black icon nearly impossible to see. Switching to the white icon fixes dark theme users but breaks visibility for users on light browser themes.

3. Temporary workaround: We replaced the icon with the old GitLab icon. The GitLab icon uses a range of contrasting colors, which makes it visible regardless of browser theme. This is not an ideal long-term solution since we are no longer running GitLab.

Proposed Solution

Add a high-contrast border outline to both the black and white icon variants. This way either variant can be rendered on any background color while remaining clearly identifiable.

Visual Description

Imagine the existing OneDev logo shape wrapped in a solid border that is approximately 8 to 12 percent of the icon width:

• Black icon variant: Black fill with a thick white border outline around the entire shape. On dark backgrounds, the white border ensures the icon remains visible even when the black interior blends in.
• White icon variant: White fill with a thick black border outline around the entire shape. On light backgrounds, the black border ensures the icon stands out even when the white interior blends in.

The border should follow the full outer contour of the logo, including any inner cutouts, so the silhouette is immediately recognizable at small sizes (16px, 24px, and 32px).

Benefits

• Either icon variant becomes usable on any background color or theme
• No theme detection logic required at integration points
• Reduces accessibility friction for users on custom or non-standard themes
• Minimal visual change to the existing brand identity

Suggested Implementation

• Provide bordered versions alongside existing unbordered versions in the brand asset package
• Name them clearly (e.g., onedev-black-bordered.svg, onedev-white-bordered.svg)
• Use the bordered variants as defaults for externally shared or embedded use cases