Class

# ColorGroup

<div class="rst-class">

forsearch

</div>

Color

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

## Description

The <span class="title-ref">ColorGroup</span> class allows you to do dynamic light/dark target color selection.

## Methods

<div class="rst-class">

table-centered_column_4

</div>

| Name                                      | Parameters                                                                                                                               | Returns                                   | Shared |
|-------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|--------|
| `AddColor<colorgroup.addcolor>`           | platform As `Platforms<colorgroup.platforms>`, aColor As `Color</api/data_types/color>`                                                  |                                           |        |
| `AddColorPair<colorgroup.addcolorpair>`   | platform As `Platforms<colorgroup.platforms>`, lightColor As `Color</api/data_types/color>`, darkColor As `Color</api/data_types/color>` |                                           |        |
| `AddNamedColor<colorgroup.addnamedcolor>` | platform As `Platforms<colorgroup.platforms>`, name As `String</api/data_types/string>`                                                  |                                           |        |
| `Constructor<colorgroup.constructor0>`    | defaultColor As `Color</api/data_types/color>`                                                                                           |                                           |        |
| `Constructor<colorgroup.constructor1>`    | defaultLightColor As `Color</api/data_types/color>`, defaultDarkColor As `Color</api/data_types/color>`                                  |                                           |        |
| `Constructor<colorgroup.constructor2>`    | name As `String</api/data_types/string>`                                                                                                 |                                           |        |
| `Mode<colorgroup.mode>`                   | platform As `Platforms<colorgroup.platforms>` = `Platforms.Current<colorgroup.platforms>`                                                | `Modes<colorgroup.modes>`                 |        |
| `Name<colorgroup.name>`                   |                                                                                                                                          | `String</api/data_types/string>`          |        |
| `NamedColor<colorgroup.namedcolor>`       | name As `String</api/data_types/string>`                                                                                                 | <span class="title-ref">ColorGroup</span> | ✓      |
| `ToColor<colorgroup.tocolor>`             |                                                                                                                                          | `Color</api/data_types/color>`            |        |
| `Values<colorgroup.values>`               |                                                                                                                                          | `Color()</api/data_types/color>`          |        |

## Enumerations

<div id="colorgroup.modes">

<div class="rst-class">

forsearch

</div>

</div>

ColorGroup.Modes

### Modes

> The mode for the color group (Single, Dual, Named).
>
> | Enum   | Description                                                |
> |--------|------------------------------------------------------------|
> | Single | A single color.                                            |
> | Dual   | A dual color has separate colors for light and dark modes. |
> | Named  | Refers to an OS system color name.                         |
> | None   | No color is selected.                                      |

<div id="colorgroup.platforms">

<div class="rst-class">

forsearch

</div>

</div>

ColorGroup.Platforms

### Platforms

> The platform for the color group.
>
> | Enum    | Description                  |
> |---------|------------------------------|
> | Current | The current platform.        |
> | Default | The default platform.        |
> | Desktop | Desktop apps.                |
> | Mobile  | Mobile (Android & iOS) apps. |
> | Web     | Web apps.                    |

## Method descriptions

<div id="colorgroup.addcolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.AddColor

**AddColor**(platform As `Platforms<colorgroup.platforms>`, aColor As `Color</api/data_types/color>`)

> Adds a single color to a color group.

<div id="colorgroup.addcolorpair">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.AddColorPair

**AddColorPair**(platform As `Platforms<colorgroup.platforms>`, lightColor As `Color</api/data_types/color>`, darkColor As `Color</api/data_types/color>`)

> Adds a dual color to a color group.

<div id="colorgroup.addnamedcolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.AddNamedColor

**AddNamedColor**(platform As `Platforms<colorgroup.platforms>`, name As `String</api/data_types/string>`)

> Adds a named color to a color group.
>
> On iOS if you provide a name for a color that is not supported on the device, the appropriate color as defined in iOS 13 will be returned.
>
> <div class="warning">
>
> <div class="title">
>
> Warning
>
> </div>
>
> Named colors are case-sensitive.
>
> </div>

<div id="colorgroup.constructor0">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.Constructor

**Constructor**(defaultColor As `Color</api/data_types/color>`)

> Creates a single mode <span class="title-ref">ColorGroup</span> with the specified color.
>
> <div class="note">
>
> <div class="title">
>
> Note
>
> </div>
>
> `Constructors</api/language/constructor>` are special methods called when you create an object with the `New</api/language/new>` keyword and pass in the parameters above.
>
> </div>

<div id="colorgroup.constructor1">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.Constructor

**Constructor**(defaultLightColor As `Color</api/data_types/color>`, defaultDarkColor As `Color</api/data_types/color>`)

> Creates a dual mode <span class="title-ref">ColorGroup</span> with the specified light and dark colors.

<div id="colorgroup.constructor2">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.Constructor

**Constructor**(name As `String</api/data_types/string>`)

> Creates a named mode <span class="title-ref">ColorGroup</span> with the specified named color.
>
> On iOS if you provide a name for a color that is not supported on the device, the appropriate color as defined in iOS 13 will be returned.
>
> <div class="warning">
>
> <div class="title">
>
> Warning
>
> </div>
>
> Named colors are case-sensitive.
>
> </div>

<div id="colorgroup.mode">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.Mode

**Mode**(platform As `Platforms<colorgroup.platforms>` = `Platforms.Current<colorgroup.platforms>`) As `Modes<colorgroup.modes>`

> The mode for the color group.

<div id="colorgroup.name">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.Name

**Name** As `String</api/data_types/string>`

> The name for the color group.

<div id="colorgroup.namedcolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.NamedColor

**NamedColor**(name As `String</api/data_types/string>`) As <span class="title-ref">ColorGroup</span>

> Returns the specified named color.
>
> This method is `shared</api/language/shared>`.
>
> Raises these exceptions:
>
> - `UnsupportedOperationException</api/exceptions/unsupportedoperationexception>` on platforms that don't support named colors.
> - `InvalidArgumentException</api/exceptions/invalidargumentexception>` when passing a name that isn't available on the current platform.
>
> Apple provides [documentation](https://developer.apple.com/documentation/appkit/ui-element-colors) for named colors for macOS and iOS.
>
> Additionally `primaryContentBackgroundColor` and `secondaryContentBackgroundColor` are valid names specifically for the macOS alternating table row background colors.
>
> For Android, the available colors vary by the OS version. You can find color names at <https://developer.android.com/reference/android/R.color.html>
>
> For the web, [Web Basic, Web Extended](https://en.wikipedia.org/wiki/Web_colors#Extended_colors) and [Bootstrap](https://getbootstrap.com/docs/5.3/customize/color/) color names can also be used. When using Bootstrap colors, <span class="title-ref">NamedColor</span> will automatically strip off any `--bs-` prefix or `-rgb` suffix.
>
> <div class="warning">
>
> <div class="title">
>
> Warning
>
> </div>
>
> Named colors are case-sensitive.
>
> </div>

<div id="colorgroup.tocolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.ToColor

**ToColor** As `Color</api/data_types/color>`

> Returns the color from the currently selected device mode.
>
> <div class="important">
>
> <div class="title">
>
> Important
>
> </div>
>
> This method is currently only supported for Android.
>
> </div>

<div id="colorgroup.values">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

ColorGroup.Values

**Values** As `Color()</api/data_types/color>`

> The color values for the current platform of the color group.

## Notes

### Comparisons and conversions

A <span class="title-ref">ColorGroup</span> can be directly compared to a `Color</api/data_types/color>` value to determine if they are the same. It's important to remember of course that you can comparing the known color to the color of the <span class="title-ref">ColorGroup</span> at that moment as a <span class="title-ref">ColorGroup</span> can return different colors based upon the state of the device.

``` xojo
If myColorGroup = Color.Blue Then
  Canvas1.DrawingColor = Color.Blue
Else
  Canvas1.DrawingColor = Color.Red
End If
```

When you assign a <span class="title-ref">ColorGroup</span> to a `Color</api/data_types/color>` property or variable, the color you receive the is color at that moment. For example, in a <span class="title-ref">ColorGroup</span> set to dual color, if you ask for the color when the device is in dark mode, you'll get the dark color.

Assigning a color to a <span class="title-ref">ColorGroup</span> assigns it to the Light Color (the default).

You can assign a named color to a <span class="title-ref">ColorGroup</span> by setting the <span class="title-ref">ColorGroup</span> equal to the name:

``` xojo
Var myColorGroup As ColorGroup

' https://developer.apple.com/documentation/appkit/nscolor/linkcolor
myColorGroup = "linkColor"
```

For macOS and iOS, Apple provides a [complete list](https://developer.apple.com/documentation/appkit/nscolor/ui_element_colors) of valid named colors. These colors will automatically switch between light and dark modes. Apple's [Adaptable System Colors](https://developer.apple.com/documentation/appkit/nscolor/standard_colors) will also automatically switch between light and dark modes but the Fixed Colors will not.

When using a name from Apple's documentation, the case must match as well.

Beside that, you can assign a <span class="title-ref">ColorGroup</span> by setting the <span class="title-ref">ColorGroup</span> equal to the integer value of a color:

``` xojo
Var myColorGroup As ColorGroup

' Red = &hFF0000
myColorGroup = &hFF0000 ' = 16711680
```

## Compatibility

|                       |                      |
|-----------------------|----------------------|
| **Project Types**     | Desktop, Mobile, Web |
| **Operating Systems** | All                  |

<div id="graphics.colorgroup/see_also">

<div class="seealso">

`Object</api/data_types/additional_types/object>` parent class; `Color</api/data_types/color>` data type; `Supporting Dark Mode and More with Color Groups</topics/graphics/supporting_dark_mode_and_more_with_color_groups>`, `Supporting Dark Mode</topics/user_interface/supporting_dark_mode>` topics

</div>

</div>