Elgato_dark/podman-desktop
1
0
Fork 0
mirror of https://github.com/podman-desktop/podman-desktop synced 2026-04-21 17:47:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

docs: add how to use color registry (#7578)

Browse source 
### What does this PR do?

Adds documentation on how to use the color registry.

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

N/A

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

https://github.com/containers/podman-desktop/issues/7576

### How to test this PR?

<!-- Please explain steps to verify the functionality,
do not forget to provide unit/component tests -->

Please confirm these are the correct steps.

Signed-off-by: Charlie Drage <charlie@charliedrage.com>
This commit is contained in:
Charlie Drage 2024-06-13 09:05:05 -04:00 committed by GitHub
parent 0359392b18
commit 7d8090ac4e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
CONTRIBUTING.md
View file

@ -362,6 +362,29 @@ Podman Desktop is modularized into extensions for each 'Provider'. You can also
See our [extensions documentation](https://podman-desktop.io/docs/extensions) on our website for more information.
### UI colors
Colors in Podman Desktop are now managed by a [`color-registry.ts`](https://github.com/containers/podman-desktop/blob/main/packages/main/src/plugin/color-registry.ts) file in order to easily switch between light and dark mode.
When contributing a UI component to Podman Desktop that is colorized, you must go through some steps to figure out what color to use and how to reference it.
Steps:
1. Open the [`color-registry.ts`](https://github.com/containers/podman-desktop/blob/main/packages/main/src/plugin/color-registry.ts) file.
2. Figure out which color category from the `initColors()` function.
3. Use the referenced color with the format `[var(--pd-<color>)]`
Example:
1. Choose what UI component you want to add: Ex. I want to add a new primary button.
2. Look under `initColors()` and pick `this.initButton()` and scroll down to `protected initButton()`.
3. Pick a color. I want to use the the "primary" button. So I will pick: `${button}primary-bg`.
4. Scroll up and note the `const` below `protected initButton()` which is `const button = 'button-';`
5. The color can be referenced with `[var(--pd-button-primary-bg)]`. The `[var(--pd-` portion will always be consistent when refering to a color variable.
6. For example:
```ts
<Button class="bg-[var(--pd-button-primary-bg)]"/>
```
## Maintainer tasks
List of maintainer tasks to help the project run smoothly.