Skip to content

Commit f75e6ab

Browse files
committed
Add the ability to specify a second custom logo for PatternFly 6
1 parent 2890ccc commit f75e6ab

File tree

1 file changed

+205
-0
lines changed

1 file changed

+205
-0
lines changed

enhancements/console/custom-logos.md

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
title: custom-logos
3+
authors:
4+
- "@cajieh"
5+
reviewers:
6+
- "@jhadvig "
7+
- "@spadgett"
8+
- "@everettraven"
9+
- "@JoelSpeed"
10+
approvers:
11+
- "@spadgett"
12+
api-approvers:
13+
- "@JoelSpeed"
14+
creation-date: 2025-02-11
15+
last-updated: 2025-02-11
16+
---
17+
18+
# Custom Logos
19+
20+
## Summary
21+
22+
The OpenShift Container Platform (OCP) web console was upgraded to PatternFly 6. In PatternFly 6, the masthead color changes based on light or dark mode. As a result, a single custom logo may not be suitable for both themes.
23+
24+
This proposal is to add the ability to specify custom logos to support light and dark theme modes for the masthead and favicon in the Console UI.
25+
26+
## Background info
27+
28+
The OpenShift Container Platform (OCP) web console was upgraded to PatternFly 6. In PatternFly 6, the masthead color changes based on light or dark mode. As a result, a single custom logo may not be suitable for both theme modes.
29+
30+
To address this, we need to allow users to add custom logos compatible with light and dark themes for both the masthead and favicon. This ensures that the logos are always visible and aesthetically pleasing, regardless of the theme mode.
31+
32+
The custom logos feature will enable users to specify different logos for the masthead and favicon based on the theme mode. This will involve exposing a new API endpoint to support custom logos for both light and dark themes.
33+
34+
## Motivation
35+
36+
The existing OKD and OpenShift logos are designed for a dark masthead background and include white text, making them ineffective in a light theme. To ensure logos remain visible and visually appealing in both light and dark themes, users need the ability to add custom logos for the masthead and favicon that adapt to the theme mode. To support this, a new API endpoint will be introduced, allowing users to specify different logos for light and dark themes.
37+
38+
### User Stories
39+
40+
* As an OpenShift web console user, I want to be able to add different custom logos for light and dark theme modes in the masthead and favicon.
41+
42+
### Goals
43+
44+
This feature will allow users to add custom logos for the masthead and favicon that are compatible with both light and dark themes in the OpenShift web console.
45+
46+
### Non-Goals
47+
48+
49+
## Proposal
50+
51+
### API Design Details
52+
53+
The configuration for custom logos will include support for both masthead and favicon types with separate files for light and dark themes:
54+
55+
```yaml
56+
customLogos:
57+
- type: Masthead
58+
themes:
59+
- type: Light
60+
file:
61+
key: logo-light.svg
62+
name: masthead-logo-light
63+
- type: Dark
64+
file:
65+
key: logo-dark.svg
66+
name: masthead-logo-dark
67+
- type: Favicon
68+
themes:
69+
- type: Light
70+
file:
71+
key: favicon-light.png
72+
name: favicon-logo-light
73+
- type: Dark
74+
file:
75+
key: favicon-dark.png
76+
name: favicon-logo-dark
77+
```
78+
79+
80+
### Workflow Description
81+
82+
├── spec
83+
│ ├── customization
84+
│ ├── customLogos
85+
│ ├── type
86+
│ ├── themes
87+
│ ├── type
88+
│ ├── file
89+
│ ├── key
90+
│ ├── name
91+
└── ...
92+
93+
### API Extensions
94+
95+
N/A
96+
97+
### Risks and Mitigations
98+
99+
1. 1. Users could set both the `CustomLogoFile` and `CustomLogos` APIs, and the `CustomLogos` API configuration will take precedence over the old `CustomLogoFile` field.
100+
101+
2. Each of the Console supported themes can be configured individually by setting either the Light or Dark theme type, or by applying a default theme to all supported themes using the Default theme type. If the Default theme type is set along with a specific Dark or Light theme, the specific theme setting will override the default one.
102+
103+
3. Users might experience confusion with the introduction of new logo configuration options. The prevoious method represented by `CustomLogo` will be deprecated. Provide comprehensive documentation that will guide users through the transition. Include clear instructions about the changes and their benefits.
104+
105+
### Drawbacks
106+
107+
N/A
108+
109+
### Attributes Description
110+
111+
#### customLogos
112+
- `type`: Enumerate which specifies the type of custom logo. Available custom logo types are `Masthead` and `Favicon`.
113+
- `themes`: A list of themes for which the custom logo is defined.
114+
115+
#### themes
116+
- `type`: Enumerate which specifies the type of theme. Available theme types are `Light`, `Dark` and `Default`.
117+
- `file`: Contains the file details for the custom logo.
118+
119+
#### file
120+
- `key`: The key or path to the custom logo file.
121+
- `name`: The name of the ConfigMap containing the custom logo file.
122+
123+
## Test Plan
124+
125+
Provide tests as part of the console `CustomLogos` implementation and verify that it was shown in the UI. The following tests will be added:
126+
- Unit tests for API
127+
- Unit and E2E tests for console-operator
128+
- E2E tests for console
129+
130+
131+
## Graduation Criteria
132+
133+
N/A
134+
135+
136+
#### Dev Preview -> Tech Preview
137+
138+
N/A
139+
140+
### Tech Preview -> GA
141+
142+
N/A
143+
144+
### Dev Preview -> Tech Preview
145+
146+
N/A
147+
148+
#### Removing a deprecated feature
149+
150+
The current custom logo field in `customization.customLogo` is deprecated and will be removed in a future release. Users are encouraged to transition to the new custom logos configuration that supports light and dark modes for the masthead and favicon. The new custom logos feature also includes support for a default theme for all unspecified themes.
151+
152+
N/A
153+
154+
#### Failure Modes
155+
156+
N/A
157+
158+
### Removing a deprecated feature
159+
160+
N/A
161+
162+
## Upgrade / Downgrade Strategy
163+
164+
N/A
165+
166+
## Version Skew Strategy
167+
168+
N/A
169+
170+
## Operational Aspects of API Extensions
171+
172+
N/A
173+
174+
## Support Procedures
175+
176+
N/A
177+
178+
## Tracking Link
179+
180+
For more information, refer to the [OpenShift Documentation](https://docs.openshift.com/container-platform/4.17/web_console/customizing-the-web-console.html#adding-a-custom-logo_customizing-web-console).
181+
182+
TODO: Update the URL to point to CustomLogos docs later on.
183+
184+
### Implementation Details/Notes/Constraints
185+
186+
N/A
187+
188+
### Topology Considerations
189+
190+
N/A
191+
192+
#### Hypershift / Hosted Control Planes
193+
194+
N/A
195+
196+
#### Standalone Clusters
197+
198+
N/A
199+
200+
#### Single-node Deployments or MicroShift
201+
202+
N/A
203+
204+
## Alternatives
205+

0 commit comments

Comments
 (0)