Tech Tip: Utility Method to Create Dark Mode Versions of 4D Button Images

PRODUCT: 4D | VERSION: 19 | PLATFORM: Mac & Win

Published On: November 1, 2021

The 4D installation comes with icons for the standard action buttons, such as next record and last record. These images are typically located in the "/Resources/Images/Buttons/" directory. While these images appear fine in light mode, the colors of the images do not contrast well in dark mode. Looking more closely at the four states of the images, if the active/hovered state and disabled state were swapped, the colors work be more appropriate to dark mode as shown in the following example:

For a four state button, the top quarter is the enabled state, the second is the clicked state, the third is the hovered state, and the fourth is the disabled state.
The utility method will take the original image and break it up into the three states, and then reassemble them into the new image. The new image will be saved at the same location with "_dark" appened to the name.

As explained in the documentation (https://developer.4d.com/docs/en/FormEditor/pictures.html#dark-mode-pictures-macos-only)
In dark mode, referenced pictures will try to find a dark mode picture with the same name as the standard (light scheme) version with the suffix "_dark". This will allow the images to automatically toggle without additional coding.

Below is the utility method:

var $folderPath_t; $newPath_t : Text
var $image_ob : Object
var $images_c : Collection
var $disable_p; $enable_p; $clicked_p; $result_p : Picture

$folderPath_t:=Get 4D folder(Current resources folder)+"Images\\Buttons\\Light Grey\\"

If (Test path name($folderPath_t)=Is a folder)

   $images_c:=Folder($folderPath_t; fk platform path).files(fk ignore invisible)

   For each ($image_ob; $images_c)

      READ PICTURE FILE($image_ob.platformPath; $disable_p)

      $enable_p:=$disable_p
      $clicked_p:=$disable_p

      PICTURE PROPERTIES($enable_p; $width; $height)

      TRANSFORM PICTURE($enable_p; Crop; 0; $height/4*3; $width; $height/4)
      TRANSFORM PICTURE($disable_p; Crop; 0; 0; $width; $height/4)
      TRANSFORM PICTURE($clicked_p; Crop; 0; $height/4; $width; $height/4)

      COMBINE PICTURES($result_p; $enable_p; Vertical concatenation; $clicked_p)
      COMBINE PICTURES($result_p; $result_p; Vertical concatenation; $enable_p)
      COMBINE PICTURES($result_p; $result_p; Vertical concatenation; $disable_p)

      $newPath_t:=$folderPath_t+$image_ob.name+"_dark"+$image_ob.extension
      If (Test path name($newPath_t)<0)
         WRITE PICTURE FILE($newPath_t; $result_p)
      End if
   End for each

   TRACE // Success
Else

   TRACE // Could not find Folder
End if