Page 4 of 5
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sat May 25, 2024 10:39 pm
by coco2
Is there a way to get normal buttons instead of fancy ones?
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sat May 25, 2024 11:03 pm
by 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
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sat May 25, 2024 11:11 pm
by 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?
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sat May 25, 2024 11:55 pm
by 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
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sun May 26, 2024 12:29 am
by 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
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sun May 26, 2024 12:46 am
by 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)
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sun May 26, 2024 1:10 am
by 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
Re: Object Theme Library (for Dark or Light Theme)
Posted: Sun May 26, 2024 3:07 am
by 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?
Re: Object Theme Library (for Dark or Light Theme)
Posted: Mon May 27, 2024 11:32 am
by 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.
Re: Object Theme Library (for Dark or Light Theme)
Posted: Mon May 27, 2024 5:06 pm
by ChrisR
coco2 wrote: Sun May 26, 2024 12:29 am
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
By
Code: Select all
If SavColor <> Color Or (SavColor = Color And Color = 0)
Re: Object Theme Library (for Dark or Light Theme)
Posted: Tue May 28, 2024 3:05 am
by 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?
Re: Object Theme Library (for Dark or Light Theme)
Posted: Tue May 28, 2024 1:02 pm
by 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
Re: Object Theme Library (for Dark or Light Theme)
Posted: Wed May 29, 2024 2:53 am
by 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.
Re: Object Theme Library (for Dark or Light Theme)
Posted: Wed May 29, 2024 12:13 pm
by 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
Re: Object Theme Library (for Dark or Light Theme)
Posted: Wed May 29, 2024 12:45 pm
by 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.