Hi, I have a Mapbox map with a color scale but the modebar covers up the top of the color scale. I tried to set the modebar to hover, however this still leaves a grey rectangle where the modebar usually is (covering up the top of the color scale). Is there anyway the change the opacity of this background rectangle when the map is not being hovered over? or even at all times?
Thanks.
Example of rectangle over the bar:
Example of rectangle not over the bar (modebar removed) - notice full color scale range.

I made a step in the right direction, however I now have a side issue. I can change the background color of the modebar to be transparent (as shown below), however there is then an annoying issue that when I hover over the buttons, they turn white which makes them hard to see(whereas they should turn near black). Any solution to this?
modebar={
‘bgcolor’: ‘rgba(0,0,0,0)’,
‘color’:‘rgba(0,0,0,1)’
},
Example of modebar transparent background working:

Example of it turning white on hover:

Referencia = Layout in JavaScript
layout = {
title: ‘’,
modebar: {
orientation: ‘h’,
bgcolor: ‘#ffffff’,
color:‘red’,
activecolor:‘red’,
position: ‘left’
}}

r - Plotly with transparent modebar background when hovered - Stack Overflow