Log in to AnswerLog in to Follow
Soren Staun
21Views
10Comments
Solved
[Reactive OutSystemsUI Dark Mode] Dark mode issues with Highcharts labels
Question
Reactive
Forge
Reactive OutSystemsUI Dark Mode
Forge component by José Pedro Proença

(This question is for https://www.outsystems.com/forge/component-discussions/8695/Reactive+OutSystemsUI+Dark+Mode, but the forum keeps changing the Forge Component to Image Toolbox. I've reposted it twice, and it keeps doing this. I have no way of modifying this in the post, and reposting only takes it back to Image Toolbox. This is *not* related to Image Toolbox, but to Reactive Dark Mode (see link)).

hey,

Component generally works fine for me, but I'm having issues with the highcharts as they bind their styling to the element:

<text x="101" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="52" opacity="1" aria-hidden="true">WinElke</text>

So with a specific "color:#666666" it's very hard to hit this element with a CSS definition. How are you guys handling turning the highcharts labels white?

(Notice black mouse over and very unreadable #666 on black background)

0
0
on 4th Apr

Hi Soren,

you can see in the demo app how they solved it

this can be a start, they forgot about color-0 though, and they forgot about the case where a label gets deselected (highcharts-legend-item-hidden), which turns lightgrey in normal mode, and I guess should maybe still turn lightgrey in the dark mode.  Because of above css, that is not happening.


Good luck,

Dorine

See solution in context
0
0
on 5th Apr

I guess a client action with a bit of jQuery to swap it around could work ....

0
0
on 5th Apr

Hi Soren,

you can see in the demo app how they solved it

this can be a start, they forgot about color-0 though, and they forgot about the case where a label gets deselected (highcharts-legend-item-hidden), which turns lightgrey in normal mode, and I guess should maybe still turn lightgrey in the dark mode.  Because of above css, that is not happening.


Good luck,

Dorine

0
0
on 5th Apr

Hey Dorine,

Thanks for your answer, it set me on the right track even if I didn't manage to find the demo app you mention :)

Here's part of what I ended up with, also a tad of config for DevExtreme widgets:

/* DevExtreme */
.dark-theme .dxc-arg-title text,
.dark-theme .dxc-val-title text,
.dark-theme .dxc-arg-elements text
{
    fill: white !important;
}

/* Highcharts */
.dark-theme .highcharts-axis-labels text,
.dark-theme .dxc-val-elements text,
.dark-theme .highcharts-color-0 text,
.dark-theme .highcharts-color-1 text,
.dark-theme .highcharts-color-2 text,
.dark-theme .highcharts-color-3 text,
.dark-theme .highcharts-color-4 text,
.dark-theme .highcharts-color-5 text,
.dark-theme .highcharts-color-6 text,
.dark-theme .highcharts-color-7 text,
.dark-theme .highcharts-color-8 text
{
    fill: white !important;
}
0
0
13 days ago

Hi Soren,

glad to help.

As for the demo, it is encouraged to make a demo available when you add a component to the forge.  Not all components have one, though.

It is usually in the form of a separate module or application that you can install from the forge.

this is how it looks on outsystems website


this is how it looks in service studio


Dorine

1
0
13 days ago

Cool! Do we have a tutorial for making components which describes how to do this as well? I've made a component, but want an easy way to test it rather than deploy my entire project to see if it works?

0
0
13 days ago

at the top of the forge webpage, there's a link to the faq.

one of the references on the faq page is to this guide

I'm not sure though that forge components are meant as a way to test parts of your work.  What exactly do you mean ?

Dorine

0
0
12 days ago

Replying to Dorine Boudry's comment on 11 Apr 2021 07:01:50

Well, in other programming situations you'd expect to be able to build a component in a fairly isolated manner - so it's self-contained.

It should contain:

  • Working config
  • All the layout it needs, images etc.
  • Documentation
  • Test cases to see if the developer has broken it

Currently I have my widgets in my widget module, and to see if they're working, I need to deploy both THAT module and my main module (which is the largest one I'm working with, so takes more time). I thought that the way you described where you have a widget and a widget-demo module would be a way to "unit test" the widgets instead of having to deploy everything.

If there are better ways to work with tests of widgets, do tell :-)

I know a lot of JS libraries have a built in test suite as well which tries to break the code.

0
0
12 days ago

Replying to Soren Staun's comment on 11 Apr 2021 08:09:10

Oh,

yes agree that you can have a dedicated 'test module' consuming your widget module to be able to test it in an isolated way.

I myself am not working on real outsystems projects yet, just messing about a little in my personal environment.  So others on the forum can advise better in testing approach.  

I know there is a bdd framework available in the forge but haven't used it, i think it is more for back end testing.  

And if you want to test front end, you can use any available tool to test at browser level, like selenium, i guess.

But none of that requires publishing anything on the forge, that is only if you want to share components with the community.

Dorine

1
0
12 days ago

Oh, and this will hit the tooltips by hitting the 3 specific classes used in the tooltip highlighting. Just keeping for future reference for people: (Obviously change #555 to your favourite dark color)

.dark-theme .highcharts-label.highcharts-tooltip.highcharts-color-0 text
{
    fill: #555 !important;
}
0
0
13 days ago

hmmm, my favourite dark color, that would be 666, right ?


(sorry, bad joke)

1
0
12 days ago
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.