Darkmode compatible IconButton

my Tadpole application used dozens of BevelButtons with Icons for various activities… Well as we all know by now, these are not native controls, and therefore not compatible with the new Mojave Darkmode. So as part of my effort to make Tadpole Darkmode compatible, I needed a replacement button type.

Here is what I came up with. An Icon Button, that can take a Caption, an Icon or Both. The icon can be positioned to the Left, Right, Center, Above or Below the Caption. If Above or Below is specified, but either the Icon or Caption is not supplied, it reverts to Center.

Background and Textcolors can be defined for Light Mode, Dark Mode, or Disabled mode, as well as a specific Icon for each (for any icon to appear, the Light version must be supplied)

icon sizes are : 16x16, 24x24, 32x32 and 48x48… whatever image you supply is expanded/reduced to those sizes

Control is based on a CANVAS, so it shows only as a Rectangle at design time

Source code is available for $10 (email me at rdavids3@cox.net for details if interested)

@Dave S do you a have a screenshot of the IconButtons in action?


what do you mean “in action”?
they get clicked, your app responds :slight_smile:
not sure what you are asking

Debugmode … running.

Probably: What do they look like if you click on them (just MouseDown, not Up). What happens if you click on it, then move the Mouse out (and have a MouseUp outside of the Button). How do they look like in these states in LightMode and DarkMode. How do they look like on other Platforms (e.g.: Linux - do they have rounded corners), …

They are not animated
They respond to MouseDown (calls a defined Event “Action”), there are no other defined Events (except PAINT)
They are Canvas so they don’t have rounded corners
They look like the picture I posted, with the ability to choose any colors you wish for Light/Dark Mode
They automatically respond to any transition from light->dark->light mode
The last Win10 update destroyed my Win test machine, so I can’t test it on Windows, but no reason it shouldn’t work

MouseDown is one line of code

If mousedown(x,y)=False Then action

The rest for the most part is in the Paint Event and the properties

I don’t expect an “Action fired” on MouseDown in a Button… only in MouseUp :wink:
So that I can move the Mouse out of the Button (should I accidentally have clicked on one) - and not get the Action fired.

MouseDown should probably just adjust the BackgroundColor to get a visual indication that the button is in a “pushed down state”.
MouseUp should fire the Action-Event.

Ok… I have taken your comments to heart … :slight_smile: and “improved” this control.

It now is animated, as in it highlights (lowlight?) when mouse is down
Action only occurs on MouseUp and the mouse is INSIDE the button still

Here is a macOS only demo

macOS 64bit IconButton Demo

For this demo I just used one icon… but in normal use you can supply a different icon for both dark and light mode

The “Comparison” button is a Square Pushbutton (not a bevel button) that I used to make sure colors etc were correct.

for those curious… the Icon is my Basset Hound - Abby