ElevationProfile widget in dark theme

ChristopheSuter — Sat, 18 Nov 2023 15:01:51 GMT

With dark stylesheet, the popover in the ElevationProfile widget text stays dark, so that it is unreadable

See codepen below

https://codepen.io/christophesuter/pen/qBgxWBp

Does anyone have a workaround ? Or know which css variable is used for this ?

Re: ElevationProfile widget in dark theme

JoelBennett — Wed, 22 Nov 2023 21:06:19 GMT

This is a new bug in 4.28. The tooltip and its contents are not document elements, but are instead graphics rendered on a canvas element, so they're not controllable via CSS. The only workaround I have is to alter my locally hosted copy of the SDK.

The problem appears to occur in the "_updateTextColor" method of the undocumented esri/chunks/Tooltip module. I'm not sure if the problem is because the function is called when it shouldn't be, or because something in the function isn't working as intended. Either way, the function overrides the theme's font color with another color that doesn't stand out very well. It happens with the light theme too, which my apps use.

The construction of the Tooltip instance takes place in the esri/widgets/ElevationProfile/support/chartUtils module. It looks something like this:

const b = Q.Tooltip.new(c.root, { forceHidden: !0, getFillFromSprite: !1, getLabelFillFromSprite: !1, pointerOrientation: "vertical", visible: !1 });

I've modified my local copy to include a property called "autoTextColor" with its value set to false like so:

const b = Q.Tooltip.new(c.root, { autoTextColor: !1, forceHidden: !0, getFillFromSprite: !1, getLabelFillFromSprite: !1, pointerOrientation: "vertical", visible: !1 });

This prevents the aforementioned "_updateTextColor" function from altering the label's color. I don't know of any better way to make this work, since there doesn't appear to be a way to get a reference to the Tooltip from the ElevationProfile widget.

@Noah-Sager perhaps you can add this one to the list...Happy Thanksgiving btw.

Re: ElevationProfile widget in dark theme

AnneFitz — Tue, 28 Nov 2023 17:17:59 GMT

Hi @ChristopheSuter - this bug will be fixed in the next version of the API (v4.29). Thanks for reporting it!

Re: ElevationProfile widget in dark theme

AndrewWinchell1896 — Fri, 12 Jan 2024 22:22:32 GMT

Good to know this will be fixed in the new release. I assume we will still be unable to modify this color directly with CSS in the event we wanted a specific color?

topic Re: ElevationProfile widget in dark theme in ArcGIS JavaScript Maps SDK Questions

ElevationProfile widget in dark theme

Re: ElevationProfile widget in dark theme

Re: ElevationProfile widget in dark theme

Re: ElevationProfile widget in dark theme