Dark mode apps with Clarion?

Has anyone successfully made a dark mode-type Clarion app without third-party templates? I’m looking to mimic the dark mode look of Spotify’s Windows app, for instance.

I gave it a try a few years ago but stumbled and gave up while trying to get browse boxes and buttons to look consistent.

I played a little with Windows themes with limited success and finally abandoned.

1 Like

I thought @noyantis had some kind of skinning thing.

1 Like

Leave the app like it is, let people change their OS theme if they want dark mode.

Hi Jeff,

That’s right, all of the Codejock controls support Dark Theme modes.

For Clarion controls / windows etc - then our G-Visuals allows you to define any number of styles - we use this ourselves to allow the user to switch to and from Dark Mode. It comes in really handy for one of our apps that is used in Caterpillar shovels - the site operates 24 hours a day so they have a real need to quickly switch between daytime and night time mode.

Thanks,

Andy
noyantis.com

1 Like

That’s about as far as I got. Flat buttons looked okay until you hover over them and there was a certain pixel-level control that was lacking the dark aesthetic (e.g. browses) so I gave up.

AFAIK, that only impacts the OS and apps that cascade that setting. It seems that Clarion apps would need a good amount of finessing to make them look polished in a dark mode.

The obstacle for me is the cost of buying the entire suite of Codejock controls for over $1200 Canadian, rather than having the option to buy the individual controls. I did message Codejock last year when you and I messaged about a different control, but they replied that they no longer license individual products. i.e. You can buy everything or buy nothing.

Is there a demo or screenshots available? I don’t see that at https://noyantis.com/product/g-visuals/.

Hi Leroy,

Yes, the link is:-

https://noyantis.com/downloads/G-VisualsDemo.exe

I don’t think that is the latest so will upload a new one tomorrow.
I’ll also cover it at the start of today’s webinar if you want to pop in :slight_smile:

Thanks,

Andy

I don’t think that is the latest so will upload a new one tomorrow.

Thank you.

I’ll also cover it at the start of today’s webinar if you want to pop in :slight_smile:

I have to look up what time that will be. Hopefully I can make it.

If I’m correct then it is not enough to make up controls only, the window itself also needs to be drawn dark (title bar, system buttons, system menu). Also, there are contrast themes in Windows (Desert, Night sky etc).

The sheet is painted incorrectly.

Hi, 5pm UTC / GMT,

Sign up link is:-

Thanks,

Andy

1 Like

That looks better but still very Clarion-esque mid-2000s.

the window itself also needs to be drawn dark (title bar, system buttons, system menu)

Agreed.

You could run your Dark Theme in my GitHub System Colors example to see them all in a simple format. This is Peter’s dark purple theme:

Classic colors


There is ?Sheet{PROP:NoTheme} that turns On/Off System Colors for Sheets.

I have this Sheet Tab example you could try your OS Dark Theme with most Sheet/Tab options. I would think some will not work without NoTheme. This also shows a lot of control types (Button, Check, Radio, Spin, Text…) like your example.

image

3 Likes

Actually, it is possible. without any third party products, but really hard.
That is why I coded my own solution. You design your windows with no colors or anything, and then you can set the theme at runtime.
No ugly artifacts on mouse over. Nice transparencies are supported.
Also, buttons and windows get skinned at runtime.
And you can have a non standard browse as well. And on top of that, the end user can customize the browse colors and fonts and sizes at runtime.


1 Like

That looks pretty good, but there’s no dark mode applied to the app frame, menu, window frame behind the tab, the drop down field, or the numeric field spinner controls.

You are right. I am working on it.
After I am done, it will skin everything.

1 Like

I’ll be curious to see what you come up with.

As for the app frame colors you can have a look at the example app in my earlier post OS Themes and setting toolbar button "selected" color
This is pretty much built in Clarion template feature, I only added some code for changing toolbar color