How to change color of GUI components

Question

I am trying following demo code of fyne:

package main
import (
    "fyne.io/fyne/app"
    "fyne.io/fyne/widget"
)
func main() {
    a := app.New()
    w := a.NewWindow("Hello")
    w.SetContent(
        widget.NewVBox(
            widget.NewLabel("Hello Fyne!"),
            widget.NewButton("Quit", func(){a.Quit()} ),
        ),
    )
    w.ShowAndRun()
}

It runs all right but I want to change color of label to blue and that of button to green. I see there is theme but that seems to be for entire application and not for individual elements.

How can different colors be applied to different GUI components? Thanks for your help.

you could try with a canvas element, as outlined here: https://stackoverflow.com/a/64416951/1782149 — gernotstarke, Jan 04 '21 at 09:05

VonC · Answer 1 · 2019-08-26T06:07:13.753

5

That was proposed in fyne-io/fyne issue 255

I propose individual styles assignable to widgets:

But:

Part of our design is to promote application consistency - a user experience that cannot be trivially compromised by "this label is larger" or "this dropdown is transparent".

Fyne's approach to this is that widgets have a set style (that can be themed) but the canvas remains fully available to do whatever specific designs a developer chooses to code.

So there is no native support to change the color of an individual button.

Andy Williams, author/main contributor of fyne-io/fyne, adds in the comments:

This is quite correct.
The only way to have a widget that is is styled differently to the standard colours is to implement a custom widget and add that functionality yourself.

There are, however, some semantic styles, a button can be “primary, for example, in which case it will use the theme highlight color

edited Aug 26 '19 at 06:07

answered Aug 26 '19 at 04:43

VonC

1,262,500
529
4,410
5,250

This is quite correct. The only way to have a widget that is is styled differently to the standard colours is to implement a custom widget and add that functionality yourself. – andy.xyz Aug 26 '19 at 05:54
There are, however, some semantic styles, a button can be “primary, for example, in which case it will use the theme highlight color. – andy.xyz Aug 26 '19 at 05:55
@ajwillia.ms You wouldn't be https://github.com/andydotxyz, one of the authors/main contributors (https://github.com/fyne-io/fyne/blob/master/AUTHORS) of https://github.com/fyne-io/fyne, by any chance? – VonC Aug 26 '19 at 06:05
@ajwillia.ms I have included your comments in the answer for more visibility. – VonC Aug 26 '19 at 06:07
It will be great if you can post some code here outlining major steps to create `a custom label`. – rnso Aug 26 '19 at 07:02
Hi @VonC, yup that’s me :) – andy.xyz Aug 27 '19 at 08:17
Sorry @rnso we’re not encouraging custom components until next release when the process will be simpler. In general it’s strongly advised to use the standard, themable, well tested components – andy.xyz Aug 27 '19 at 08:18
I hadn't noticed my nick here was out of date, fixed :) – andy.xyz Aug 27 '19 at 08:26
@JohnNewcombe Not sure indeed. That could be a good question to be asked separately (or directly on https://github.com/fyne-io/fyne/issues) – VonC Dec 28 '21 at 10:56

score 2 · Accepted Answer · answered Aug 27 '19 at 08:31

As the standard widgets in Fyne do not support customisation there is no short answer to this (other than we don't advise it).

If you have to do this, for some valid reason that your users require, then you should look at our developer documentation which has a brief introduction to writing custom widgets. However we aim to make this process easier in release 1.2 later this year.

Just to re-iterate comments above the Fyne toolkit is aiming to create a consistent user experience that is simple and fast to program. Every time you create a custom widget so that you can have custom colours or styles you may be confusing your user and you will be making it much harder to maintain the code.

How to change color of GUI components

2 Answers2

Linked