# Hover Color Export

**URL:** <https://forums.realmacsoftware.com/t/hover-color-export/44857>\
**Category:** RapidWeaver Elements\
**Created:** [October 4, 2024, 11:50pm UTC](https://forums.realmacsoftware.com/t/hover-color-export/44857 "2024-10-04T23:50:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [October 4, 2024, 11:50pm UTC](https://forums.realmacsoftware.com/t/hover-color-export/44857/1 "2024-10-04T23:50:18Z")

</div>

I’m trying to get a hover:color on a button using this:

```auto
{
   "title": "BG Hover Color:",
   "id": "buttonbghovcolor",
   "format": "hover:{{value}}",
   "themeColor": {
     "default": {
       "name": "blue",
       "brightness": 200
     }
   }
 }

```

It’s exporting class as: hover:primary-200 Shouldn’t it be **hover:blue-200**?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 5, 2024, 6:14am UTC](https://forums.realmacsoftware.com/t/hover-color-export/44857/2 "2024-10-05T06:14:24Z")

</div>

think you need to use this code if using tailwind, might not be what you are trying so ignore if that is the case

hover:bg-{{value}}

colour always first starts with this colour for me, you then need to select the colour and change it

[https://share.cleanshot.com/9qWHCn6G](https://share.cleanshot.com/9qWHCn6G)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 5, 2024, 12:06pm UTC](https://forums.realmacsoftware.com/t/hover-color-export/44857/3 "2024-10-05T12:06:11Z")

</div>

@Bill Okay, there’s a few things going on here…

The next beta (beta 16) will use “brand” instead of “primary” as that is a hangover from our initial theme naming from very early betas (so that’s a bug).

To get the default value coming through you’ll need to remove and re-drag on the custom component you’re working on.

And @upssjw is correct, to set the background colour of a button you’ll need to use `bg-{{value}}`.

Here’s how I’d do it:

And here’s the Template code:

```auto
<div id="{{id}}" class="text-lg text-center p-10">
    <button class="{{buttonColor}} hover:{{buttonColorHover}} text-text-900 font-bold py-2 px-4 rounded">
  Click Me
</button>
</div>

```

And here’s the Properties code:

```auto
{
    "groups": [{
        "title": "Theme Color Example",
        "properties": [{
            "title": "Color",
            "id": "buttonColor",
            "format": "bg-{{value}}",
            "themeColor": {
                "default": {
                    "name": "red",
                    "brightness": 500
                }
            }
        },
        {
    "title": "Color",
    "id": "buttonColorHover",
    "format": "bg-{{value}}",
    "themeColor": {
        "default": {
            "name": "red",
            "brightness": 600
        }
    }
}
        ]
    }]
}

```

Any questions, just ask!