diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 236d220b5d2..fd1378ca12d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -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.