# Change color of modal close button from dark to light in Bootstrap 5
**URL:** https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156
**Category:** Tips and Tricks
**Created:** [July 30, 2022, 3:53pm UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156 "2022-07-30T15:53:20Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [July 30, 2022, 3:53pm UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/1 "2022-07-30T15:53:20Z")
I recently created a Bootstrap 5 modal and gave it a dark background, which resulted in a problem… the default close button is black.
The Bootstrap 5 modal uses an SVG background image for the “X” close button (unlike Bootstrap 4, which used a font.) Changing the color of the close button in Bootstrap 4 was easily done by changing the `color:` rule on the `.close` class.
I was about to make a new light SVG “X” when I read that Bootstrap 5 added a `btn-close-white` utility class which changes the standard dark SVG “X” from black to white. All you have to do is highlight the button in the HTML, and then you can add the class in the Attributes panel.
Maybe the devs might want to add this as an toggleable option in the UI in a future release? @martin
---
### Author:  [@martin](https://forum.bootstrapstudio.io/u/martin)
#### Post date: [August 1, 2022, 8:35am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/2 "2022-08-01T08:35:21Z")
Thanks for the tip! We will add it as an option in our next updates.
---
### Author:  [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [December 20, 2022, 12:07am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/3 "2022-12-20T00:07:24Z")
Giving this a bump as it doesn’t seem to have ever made it into any of the recent updates.
---
### Author:  [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)
#### Post date: [December 20, 2022, 3:41am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/4 "2022-12-20T03:41:33Z")
Its in the options on 6.2.1 under Close Options \> Color
---
### Author:  [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [December 20, 2022, 4:39am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/5 "2022-12-20T04:39:20Z")
That option only shows up if you’re using the dedicated Close component. If you’re working with a Bootstrap Modal, the close button is part of the header, but doesn’t show up in the Overview panel, and thus it has no selectable options through the UI.
The only way you can select it is through the HTML. Then you can add the `btn-close-white` class via the Attributes panel.
My suggestion was that it should be made an option under the Modal Options.
---
### Author:  [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)
#### Post date: [December 20, 2022, 2:54pm UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/6 "2022-12-20T14:54:56Z")
I would agree for the component switch its a great addition.
However, Bootstrap Studio had better rethink locked components and handy switchs because with the new convert parse custom code to componets ability they have added and mass import of html, css, and javascript, I foresee a clash between the designers ease of the ui and the simple input or import of universal Bootstrap code by developers coming available in Bootstrap 5.3 and beyond (light dark sub component styling) is about to occur. Might it be time to relax on the switch and concentrate more on the user adding there own custom options ? I mean you can actually add the button switch yourself… right ?
---
### Author:  [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)
#### Post date: [December 23, 2022, 3:51am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/7 "2022-12-23T03:51:00Z")
I was reading the Bootstrap 5.3 documents (upcoming) and it looks like btn-close-white is going to be deprecated.
Instead data-bs-theme=“dark” will be used to invert the background svg image using the filter property without overriding its value. ✖
---
### Author:  [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [December 23, 2022, 8:46am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156/8 "2022-12-23T08:46:12Z")
Interesting. Frankly, I’m not thrilled when CSS frameworks start to make UI choices for us based on what they think looks best. But as long as we can override the stock settings, I guess it’s not a big deal.