{"id":13613903,"url":"https://github.com/bokub/rgb-light-card","last_synced_at":"2025-04-07T05:07:02.401Z","repository":{"id":35169708,"uuid":"215327195","full_name":"bokub/rgb-light-card","owner":"bokub","description":"💡 A Home Assistant card for RGB lights","archived":false,"fork":false,"pushed_at":"2024-09-24T04:57:02.000Z","size":476,"stargazers_count":481,"open_issues_count":8,"forks_count":25,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-31T04:04:10.544Z","etag":null,"topics":["home-assistant","lovelace","lovelace-custom-card","rgb-lights"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bokub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-15T15:01:51.000Z","updated_at":"2025-03-25T07:09:34.000Z","dependencies_parsed_at":"2024-08-01T20:44:42.159Z","dependency_job_id":"2f108537-2649-4924-8a40-aeeb0d3fa6f7","html_url":"https://github.com/bokub/rgb-light-card","commit_stats":{"total_commits":73,"total_committers":3,"mean_commits":"24.333333333333332","dds":0.04109589041095896,"last_synced_commit":"557488cc972116a4991f8552dea2a193689e58fb"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Frgb-light-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Frgb-light-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Frgb-light-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Frgb-light-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bokub","download_url":"https://codeload.github.com/bokub/rgb-light-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595334,"owners_count":20963943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["home-assistant","lovelace","lovelace-custom-card","rgb-lights"],"created_at":"2024-08-01T20:00:54.677Z","updated_at":"2025-04-07T05:07:02.354Z","avatar_url":"https://github.com/bokub.png","language":"JavaScript","funding_links":[],"categories":["Lovelace User Interface","Install from Source","Dashboards","JavaScript"],"sub_categories":["Custom Lovelace UI Cards","Smart Home Automation","Custom Cards"],"readme":"# RGB Light Card\n\n[![Codecov][codecov-src]][codecov-href]\n[![Version][version-src]][version-href]\n[![HACS: Default][hacs-src]][hacs-href]\n[![Downloads][downloads-src]][downloads-href]\n[![Hits per month][hits-src]][hits-href]\n[![code style: prettier][code-style-src]][code-style-href]\n\n\u003e A Home Assistant card for RGB lights\n\n\u003cimg alt=\"Light theme\" src=\"https://github.com/user-attachments/assets/1f296f56-7fc9-4707-bd45-008e6f9aa5de\" width=\"400\"\u003e\n\u003cimg alt=\"Dark theme\" src=\"https://github.com/user-attachments/assets/40cf47bb-854d-41fb-879a-b5c8a400bbec\" width=\"400\"\u003e\n\n## Installation\n\nIf you have [HACS](https://hacs.xyz/), you can install the RGB Light Card from there and jump to the \"Configuration\" step\n\nOtherwise, follow these simple steps:\n\n1. In your home assistant, go to the `/config/lovelace/resources` page, or from your dashboard, click on the pencil icon \u003e 3 dots \u003e Manage resources\n\n2. Click on \"Add resource\"\n\n3. Set the URL to `https://cdn.jsdelivr.net/npm/rgb-light-card` and \"JavaScript Module\" as the resource type\n\n4. Click \"Create\"\n\n**Note:** The RGB Light Card will upgrade automatically a few days after every new release (once your browser cache expires)\n\nHowever, you can enforce a [specific version](https://github.com/bokub/rgb-light-card/releases) by adding `@X.X.X` at the end of the URL (e.g: `https://[...]/rgb-light-card@1.8.0`)\n\n## Configuration\n\nThe `rgb-light-card` is meant to be included either:\n\n-   In the [Entities card](https://www.home-assistant.io/dashboards/entities/)\n-   As a feature in a [Tile card](https://www.home-assistant.io/dashboards/tile/)\n\nTo start with an example configuration, you can create a new card in your dashboard, then:\n\n-   Choose \"**Custom: RGB Light Card**\" in the card picker\n-   Or choose the **Tile** card, click on **Add feature** in the **features** section, and select **RGB Light Card (Tile feature)**\n\nExample configuration within an **Entities** card:\n\n```yaml\ntype: entities\nshow_header_toggle: false\nentities:\n    # Displays the light entity. It's optional\n    - entity: light.example_light\n\n    # Card configuration starts here\n    - type: 'custom:rgb-light-card'\n      entity: light.example_light\n      colors:\n          # Any option of the light.turn_on action can be used in each color\n          - rgb_color:\n                - 255\n                - 127\n                - 255\n            brightness: 220\n            transition: 1\n          - hs_color:\n                - 60\n                - 30\n            icon_color: '#fff8b0' # Override icon color\n```\n\nExample configuration as a **Tile** feature:\n\n```yaml\n# Tile card configuration\ntype: tile\nentity: light.example_light\nfeatures:\n    # The \"feature\" configuration starts here\n    - type: custom:rgb-light-card-feature\n      entity: light.example_light\n      colors:\n          # Any option of the light.turn_on action can be used in each color\n          - rgb_color:\n                - 255\n                - 127\n                - 255\n            brightness: 220\n            transition: 1\n          - hs_color:\n                - 60\n                - 30\n            icon_color: '#fff8b0' # Override icon color\n```\n\n\u003e #### Pro tip\n\u003e\n\u003e You can test all the colors options in the **Developer Tools \u003e Actions** page of your Home Assistant.\n\u003e\n\u003e Choose the `light.turn_on` action, edit the options (or the `data` in YAML mode), and click \"Perform Action\" to see the result\n\n### Options\n\n| Name            | Type    | Requirement  | Default | Description                                                                                                                                                                       |\n| --------------- | ------- | ------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `type`          | string  | **Required** |         | `custom:rgb-light-card`                                                                                                                                                           |\n| `entity`        | string  | **Optional** |         | Entity to control. Must be a light or a [light group](https://www.home-assistant.io/integrations/light.group/). If you don't define it, `entity_id` must be defined in each color |\n| `colors`        | array   | **Required** |         | Colors to display. Check out color options below                                                                                                                                  |\n| `justify`       | string  | **Optional** | `left`  | How to distribute free space between icons. Possible values are `left`,`right`,`center`,`between` and `around`. Check out [examples](#justify) below                              |\n| `size`          | number  | **Optional** | `32`    | Diameter of the icons, in pixels                                                                                                                                                  |\n| `label_size`    | number  | **Optional** | `12`    | Size of the labels font, in pixels                                                                                                                                                |\n| `hide_when_off` | boolean | **Optional** | `false` | Hide all the icons if the entity state is `off` or `unavailable`                                                                                                                  |\n\n### Colors options\n\n| Name                                                       | Type   | Requirement  | Default | Description                                                                                                                                                                                                                                        |\n| ---------------------------------------------------------- | ------ | ------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `rgb_color`, `hs_color`, `brightness`, `transition` etc... | any    | **Optional** |         | When you click on a color, it will perform the action `light.turn_on` with **all the options you put here** as action data\u003cbr\u003e [**Click here**](https://www.home-assistant.io/integrations/light#action-lightturn_on) for the full list of options |\n| `icon_color`                                               | string | **Optional** |         | Override icon color. Check out [examples](#icon-color) below                                                                                                                                                                                       |\n| `label`                                                    | string | **Optional** |         | Optional color label. Check out [examples](#labels) below                                                                                                                                                                                          |\n| `entity_id`                                                | string | **Optional** |         | Override the `entity` option for this specific color                                                                                                                                                                                               |\n| `type`                                                     | string | **Optional** | `light` | Can be set to `light` (default), or `action` to change the click action. Read the [explanation](#performing-actions) just below                                                                                                                    |\n| `action`                                                   | string | **Optional** |         | Used with the `action` type to specify the action to perform when clicked                                                                                                                                                                          |\n| `data`                                                     | array  | **Optional** |         | Used with the `action` type to specify the data to be passed to the action                                                                                                                                                                         |\n\n## Performing Actions\n\nBy default, clicking an icon performs the `light.turn_on` action with the options you defined.\n\nIf you want more flexibility, you can use `type: action` to perform a different action, with optional data in a `data` object.\n\nYou can find more information about actions in the [Home Assistant documentation](https://www.home-assistant.io/docs/scripts/perform-actions/)\n\nExample configuration:\n\n```yaml\ntype: entities\nentities:\n    - type: 'custom:rgb-light-card'\n      colors:\n          # First icon calls a script\n          - type: action\n            action: script.turn_on\n            data:\n                entity_id: script.night_mode\n            icon_color: '#90b2ec'\n          # Second icon calls a scene\n          - type: action\n            action: scene.turn_on\n            data:\n                entity_id: scene.romantic\n            icon_color: '#f1a5cb'\n          # Third icon sends a mobile notification\n          - type: action\n            action: notify.mobile_app_pixel_8\n            data:\n                title: Hey\n                message: I'm your mobile phone\n            icon_color: '#77e28a'\n```\n\nNote that you can mix lights and actions in the same card\n\nThe `icon_color` is still optional, but will be grey by default\n\n## Customization examples\n\n### Icon color\n\nThe `icon_color` option accepts the same values as the [CSS background property](https://developer.mozilla.org/docs/Web/CSS/background).\n\nThis means your `icon_color` can be:\n\n-   A HTML color name: \u0026nbsp; `icon_color: gold`\n-   A hexadecimal code: \u0026nbsp; `icon_color: '#FBB48C'`\n-   Any other color compatible with [background-color](https://developer.mozilla.org/docs/Web/CSS/background-color): \u0026nbsp; `icon_color: rgba(42, 204, 77, 0.5)`\n-   A color gradient: \u0026nbsp; `icon_color: 'linear-gradient(15deg, #0250c5, #d43f8d)'`\n-   Or even an image: \u0026nbsp; `icon_color: center/120% url('https://www.home-assistant.io/images/favicon-192x192.png')`\n\nThe 5 examples above will render like this:\n\n![Light icon color examples](https://github.com/bokub/rgb-light-card/raw/images/icon_color_light.png)\n![Dark icon color examples](https://github.com/bokub/rgb-light-card/raw/images/icon_color_dark.png)\n\n⚠️ You **must** wrap your value between quotes if it contains the `#` character\n\n### Material design icons\n\nAs explained above, the `icon_color` option accepts any valid CSS value\n\nIf you want icons in your colors, you can use the [icon tool](https://bokub.github.io/rgb-light-card/test/icon.html)\nto convert [material design icons](https://pictogrammers.com/library/mdi/) into CSS\n\n![Light icons examples](https://github.com/bokub/rgb-light-card/raw/images/icons_light.png)\n![Dark icons examples](https://github.com/bokub/rgb-light-card/raw/images/icons_dark.png)\n\n### Labels\n\nSmall labels can be added below color icons, using the `label` option of each color.\nTheir size can be customized with the `label_size` option (default to 12 pixels).\n\nLabels can be just a text, but also accept HTML, which means you can be really creative:\n\n-   Simple text: `label: Red`\n-   Bold text: `label: \u003cb\u003eOrange\u003c/b\u003e`\n-   Or more complex HTML: `label: '\u003cspan style=\"color: #609fc6\"\u003eBlue\u003c/span\u003e'`\n\n![Light label examples](https://github.com/bokub/rgb-light-card/raw/images/labels_light.png)\n![Dark label examples](https://github.com/bokub/rgb-light-card/raw/images/labels_dark.png)\n\n### Justify\n\nThere are 5 possible values for the `justify` option: `left`,`right`,`center`,`between` and `around`. The default value is `left`.\n\nHere are how the different values are handled:\n\n![Light justify examples](https://github.com/bokub/rgb-light-card/raw/images/justify_light.png)\n![Dark justify examples](https://github.com/bokub/rgb-light-card/raw/images/justify_dark.png)\n\n## License\n\nMIT © [Boris K](https://github.com/bokub)\n\n[version-src]: https://gradgen.bokub.workers.dev/npm/v/rgb-light-card?gradient=b65cff,11cbfa\u0026style=flat\u0026label=version\n[code-style-src]: https://flat.badgen.net/badge/code%20style/prettier/ff69b4\n[hits-src]: https://data.jsdelivr.com/v1/package/npm/rgb-light-card/badge\n[downloads-src]: https://flat.badgen.net/github/assets-dl/bokub/rgb-light-card/1.11.0?label=installs%20(HACS)\n[hacs-src]: https://flat.badgen.net/badge/HACS/default/orange\n[codecov-src]: https://img.shields.io/codecov/c/github/bokub/rgb-light-card?style=flat-square\n[version-href]: https://www.npmjs.com/package/rgb-light-card\n[code-style-href]: https://github.com/bokub/prettier-config\n[hits-href]: https://www.jsdelivr.com/package/npm/rgb-light-card\n[downloads-href]: https://api.github.com/repos/bokub/rgb-light-card/releases/assets/58896952\n[hacs-href]: https://hacs.xyz/\n[codecov-href]: https://codecov.io/gh/bokub/rgb-light-card\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokub%2Frgb-light-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbokub%2Frgb-light-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokub%2Frgb-light-card/lists"}