Object Theme Library (for Dark or Light Theme)

[coco2]

Is there a way to get normal buttons instead of fancy ones?

[ChrisR]

To ignore ButtonGadget and ButtonImageGadget in ObjectTheme and keep their default appearance,
you can comment out the lines inside _AddButtonTheme() macro

Code: Select all

  Macro _AddButtonTheme(Gadget)
;     If MapSize(ThemeAttribute()) > 0   ; SetObjectTheme() Done
;       If FindMapElement(ObjectTheme(), Str(GadgetID(Gadget)))
;         AddButtonTheme(Gadget, ObjectTheme(), #True)  ; UpdateTheme = #True
;       Else
;         AddMapElement(ObjectTheme(), Str(GadgetID(Gadget)))
;         AddButtonTheme(Gadget, ObjectTheme())
;       EndIf
;     EndIf
  EndMacro

[coco2]

Thanks, could you tell me how to keep the colour theme, but remove the fountain fill and extra outline, and keep the original corner radius?

[ChrisR]

You can customize the Buttons by changing the #PB_GadgetType_Button attributes for the Theme used, written in the DataSection.
To have buttons with a background color and avoid the fading effect, use the same color for #PB_Gadget_BackColor and #PB_Gadget_OuterColor
Choose your Border Color for #PB_Gadget_BorderColor attributes, ex: $ADADAD
To keep rectangular buttons without rounded corners, uses the value 0 for #PB_Gadget_RoundX and #PB_Gadget_RoundY
And to avoid text shadows, disable (0) #PB_Gadget_EnableShadow
Example:

Code: Select all

Data.l #PB_GadgetType_Button,          #PB_Gadget_BackColor,             $FFD8CA         ; Border Color: Color | #PB_Default = Window BackColor. If IsDarkColor AccentColor 80
Data.l #PB_GadgetType_Button,          #PB_Gadget_OuterColor,            $FFD8CA         ; Outer Color: Color | #PB_Default = Window BackColor. If not IsDarkColor AccentColor 80
Data.l #PB_GadgetType_Button,          #PB_Gadget_CornerColor,           #PB_Default     ; Corner Color: Color | #PB_Default = Window BackColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_GrayBackColor,         #PB_Default     ; Gray Back Color: Color | #PB_Default = Disabled Button BackColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_FrontColor,            #Black          ; Text Color: Color | #PB_Default = If IsDarkColor Button BackColor White else Black
Data.l #PB_GadgetType_Button,          #PB_Gadget_GrayTextColor,         #PB_Default     ; Gray Text Color: Color | #PB_Default = Disabled Button FrontColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_EnableShadow,          0               ; Enable Shadow Color 0 | 1 | #PB_Default = 0
Data.l #PB_GadgetType_Button,          #PB_Gadget_ShadowColor,           #PB_Default     ; Shadow Color: Color | #PB_Default = If IsDarkColor Button FrontColor White else Black
Data.l #PB_GadgetType_Button,          #PB_Gadget_BorderColor,           $ADADAD          ; Border Color: Color | #PB_Default = if IsDarkColor(Window) Button BackColor else Button OuterColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_HighLightBorder,       #PB_Default     ; HighLight Border Color: Color | #PB_Default = GetSysColor_(#COLOR_HIGHLIGHT)
Data.l #PB_GadgetType_Button,          #PB_Gadget_RoundX,                0               ; The radius of the RoundBox corners in the x direction
Data.l #PB_GadgetType_Button,          #PB_Gadget_RoundY,                0               ; The radius of the RoundBox corners in the y direction

It is the same for ButtonImageGadget.
Feel free to play with attribute values to better understand their uses

[coco2]

Thanks very much for the help, I will try these.

Also, auto theme seem to have a problem with TextGadget, I'm just getting a white square where the text should be.

Code: Select all

XIncludeFile "ObjectTheme.pbi"
UseModule ObjectTheme
SetObjectTheme(#ObjectTheme_Auto, #Black)
OpenWindow(0, 0, 0, 500, 200, "Test Window", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_ScreenCentered)
ButtonGadget(0, 10, 10, 40, 27, "Test", #PB_Button_Default)
TextGadget(1, 10, 43, 400, 20, "The quick brown fox jumps over the lazy dog")
Define event.i    
Repeat
  event = WaitWindowEvent(10)
Until event = #PB_Event_CloseWindow

[ChrisR]

Indeed there is a problem with TextGadget and the black color. I'll take a look next week.
It works with a color close to black: SetObjectTheme(#ObjectTheme_Auto, $000001)

[coco2]

OK thanks, also do you know why ButtonImage gadget is not centering the image and shows white for the background?

Code: Select all

XIncludeFile "ObjectTheme.pbi"
UseModule ObjectTheme
Path$ = #PB_Compiler_Home  + "Examples" + #PS$ + "Sources" + #PS$ + "Data" + #PS$ + "ToolBar" + #PS$ + ""
SetObjectTheme(#ObjectTheme_DarkBlue)
UsePNGImageDecoder()
LoadImage(0, Path$ + "Properties.png")
OpenWindow(0, 0, 0, 500, 200, "Test Window", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_ScreenCentered)
ButtonImageGadget(0, 10, 10, 30, 30, ImageID(0))
Define event.i    
Repeat
  event = WaitWindowEvent(10)
Until event = #PB_Event_CloseWindow

[coco2]

Buttons also have a hover backcolor, but I'm not getting that when I edit the value. How do you make the colour of the background change when hovering over the button?

[ChrisR]

For background color change when hovering button,
it's the position of the gradient color that changes betweent the background color and the outer color.
If you use the same color for the 2, there will be no gradient and no change on hovering.

Code: Select all

DrawingMode(#PB_2DDrawing_Gradient | #PB_2DDrawing_AlphaBlend)
; Draw an ellipse a little wider than the button and slightly offset upwards, to have a gradient with the background color in the 4 corners and more important at the bottom
EllipticalGradient(cX / 2, cY * 2 / 5, cX * 3 / 5, cY * 4 / 5)
GradientColor(0.0, ButtonBackColor | $BE000000)
Select I
  Case 0, 4   ; imgRegular, imgDisabled
    GradientColor(0.15, ButtonBackColor | $BE000000)
  Case 1, 3   ; imgHilite, imgHiPressed
    GradientColor(0.3,  ButtonBackColor | $BE000000)
  Case 2      ; imgPressed
    GradientColor(0.45, ButtonBackColor | $BE000000)
EndSelect
GradientColor(1.0,  \lButtonOuterColor | $BE000000)
RoundBox(0, 0, cX, cY, \lRoundX, \lRoundY)

I'll try to find some time to look at the TextBox with the black background and the "centering" image for ButtonImage.

[ChrisR]

Also, auto theme seem to have a problem with TextGadget, I'm just getting a white square where the text should be.

In Macro _SetObjectBrush change the line

Code: Select all

If SavColor <> Color

By

Code: Select all

If SavColor <> Color Or (SavColor = Color And Color = 0)

[coco2]

Thanks for the fix for auto black.

The fix you've given me for the hover background colour doesn't do what I want though. I want to make the button the same as a normal button. A normal button has one consistent background and when you hover over it, it has a slightly brighter colour. Is it possible to do that?

[ChrisR]

I've updated on Github to version 1.5.5

- For TextGadget with black background.
- Centering images in ButtonImages
- For Tansparent Images in ButtonImages, as for buttons, a gradient is applied between the background color and the outer color.
With the same 2 colors, the gradient has no effect. The closer the colors are, the less visible the gradient is and vice versa.

For what you want, the closest I have is with this configuration:
But it won't be identical to Windows, it's deliberate.
The effect applied here is a gradient, in ellipse form between the 2 colors, with a more pronounced gradient on hovering.
By choosing 2 fairly close colors, you can get close to the Windows effect but not the same.

Code: Select all

Data.l #PB_GadgetType_Button,          #PB_Gadget_BackColor,             $E1E1E1         ; Background Color: Color | #PB_Default = Window BackColor. If IsDarkColor AccentColor 80
Data.l #PB_GadgetType_Button,          #PB_Gadget_OuterColor,            $FBF1E5         ; Outer Color: Color | #PB_Default = Window BackColor. If not IsDarkColor AccentColor 80
Data.l #PB_GadgetType_Button,          #PB_Gadget_CornerColor,           #PB_Default     ; Corner Color: Color | #PB_Default = Window BackColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_GrayBackColor,         #PB_Default     ; Gray Back Color: Color | #PB_Default = Disabled Button BackColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_FrontColor,            #Black          ; Text Color: Color | #PB_Default = If IsDarkColor Button BackColor White else Black
Data.l #PB_GadgetType_Button,          #PB_Gadget_GrayTextColor,         #PB_Default     ; Gray Text Color: Color | #PB_Default = Disabled Button FrontColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_EnableShadow,          0               ; Enable Shadow Color 0 | 1 | #PB_Default = 0
Data.l #PB_GadgetType_Button,          #PB_Gadget_ShadowColor,           #PB_Default     ; Shadow Color: Color | #PB_Default = If IsDarkColor Button FrontColor White else Black
Data.l #PB_GadgetType_Button,          #PB_Gadget_BorderColor,           $ADADAD         ; Border Color: Color | #PB_Default = if IsDarkColor(Window) Button BackColor else Button OuterColor
Data.l #PB_GadgetType_Button,          #PB_Gadget_HighLightBorder,       #PB_Default     ; HighLight Border Color: Color | #PB_Default = GetSysColor_(#COLOR_HIGHLIGHT)
Data.l #PB_GadgetType_Button,          #PB_Gadget_RoundX,                0               ; The radius of the RoundBox corners in the x direction
Data.l #PB_GadgetType_Button,          #PB_Gadget_RoundY,                0               ; The radius of the RoundBox corners in the y direction

Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_BackColor,             $E1E1E1         ; Background Color: Color | #PB_Default = Window BackColor. If IsDarkColor AccentColor 80  
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_OuterColor,            $FBF1E5         ; Outer Color: Color | #PB_Default = Window BackColor. If not IsDarkColor AccentColor 80
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_CornerColor,           #PB_Default     ; Corner Color: Color | #PB_Default = Window BackColor
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_GrayBackColor,         #PB_Default     ; Gray Back Color: Color | #PB_Default = Disabled Button BackColor
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_FrontColor,            #Black          ; Text Color: Color | #PB_Default = If IsDarkColor Button BackColor White else Black
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_GrayTextColor,         #PB_Default     ; Gray Text Color: Color | #PB_Default = Disabled Button FrontColor
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_EnableShadow,          0               ; Enable Shadow Color 0 | 1 | #PB_Default = 0
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_ShadowColor,           #PB_Default     ; Shadow Color: Color | #PB_Default = If IsDarkColor Button FrontColor White else Black
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_BorderColor,           $ADADAD         ; Border Color: Color | #PB_Default = if IsDarkColor(Window) Button BackColor else Button OuterColor 
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_HighLightBorder,       #PB_Default     ; HighLight Border Color: Color | #PB_Default = GetSysColor_(#COLOR_HIGHLIGHT)
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_RoundX,                0               ; The radius of the RoundBox corners in the x direction
Data.l #PB_GadgetType_ButtonImage,     #PB_Gadget_RoundY,                0               ; The radius of the RoundBox corners in the y direction

Thanks for your feedback coco2, it helps to improve

[coco2]

Thanks for the updates.

On the topic of the buttons, I tried this but it didn't work:

Code: Select all

Data.l #PB_GadgetType_Button,          #PB_Gadget_BackColor,             $333333         ; Border Color: Color | #PB_Default = Window BackColor. If IsDarkColor AccentColor 80
Data.l #PB_GadgetType_Button,          #PB_Gadget_OuterColor,            $333334         ; Outer Color: Color | #PB_Default = Window BackColor. If not IsDarkColor AccentColor 80

The button background doesn't change on hover.

[ChrisR]

Of course, you don't get any contrast with 2 such similar colors and so no effect on hovering.
Well, it's probably not what you'd like, you can have a look on the forum, there are lots of other codes with custom buttons.

Otherwise, for you or others, here's a screenshot that should be more telling to illustrate the Button config and colors

[blueb]

Hi Chris,

Tried both ObjectTheme Demos... (new version ObjectTheme v1.5.5)

line 3476: ProcedureReturn SetObjectButtonColor(ObjectTheme(), Attribute, Color)
Error: Is not a function..


I'm pretty sure it happened on the previous version too.