UI: Add styles and themes support #22

New Issue

kirsle · 2020-04-09T21:59:57Z

kirsle commented

2020-04-09 21:59:57 +00:00

Ideas how to add styles and themes to the UI toolkit.

Basic Overview

Themes and styles should be a sub-package of ui, i.e. at go/ui/style.

Each widget that supports styles will define a .SetStyle() function that will take a widget-specific struct with options relevant to the widget.

A Theme will be a struct with pointers to default styles for all supported widgets. A nil value means that widget is not styled by the theme and the widget should use its own defaults.

Struct Examples

// style.Button
type Button struct {
    Background      render.Color
    Foreground      render.Color  // if child is a Label
    HoverBackground render.Color  // mouse over bgcolor
    BorderStyle     BorderStyle   // like Raised, Sunken
    BorderSize      int
}

// style.Tooltip
type Tooltip struct {
    Background render.Color
    Foreground render.Color
}

// ui.Button signature to set a specific style.
func (w *Button) SetStyle(style style.Button) {}

// The style package would include the default styles for
// each widget independent of any given theme.
const DefaultButton = Button{
    Background: render.Grey,
    Foreground: render.Black,
    HoverBackground: render.Cyan,
    BorderStyle: BorderRaised,
    BorderSize: 2,
}

// style.Theme is a collection of styles.
type Theme struct {
    Button *Button
    Tooltip *Tooltip
    etc.
}

Setting a Theme

Probably have the theme be a global ui package variable that can be changed. New widgets created after a theme change will use the theme when they first style themselves.

ui.SetTheme(style.Theme)

When a widget needs its style info the logic should be:

If a custom style was given via .SetStyle(), use that.
Otherwise use the style in the current Theme, if available.
Otherwise fall back to some default styles for the widget.

Default Styles

Provide some Bootstrap-style default styles for buttons, to easily mark a button as "primary", "secondary", "success", "info", "warning" and "danger".

btn.SetStyle(style.ButtonPrimary)

Maybe styles like this can be functions that return their style dynamically, so it can take your theme's style and just set the background color as needed and return it, making it usable for custom themes.

Default Themes

Include a few default built-in themes, like:

Default: styles like what the current defaults are.
Dark: dark mode of the default theme.

Ideas how to add styles and themes to the UI toolkit. ### Basic Overview Themes and styles should be a sub-package of ui, i.e. at go/ui/style. Each widget that supports styles will define a .SetStyle() function that will take a widget-specific struct with options relevant to the widget. A Theme will be a struct with pointers to default styles for all supported widgets. A nil value means that widget is not styled by the theme and the widget should use its own defaults. ### Struct Examples ```go // style.Button type Button struct { Background render.Color Foreground render.Color // if child is a Label HoverBackground render.Color // mouse over bgcolor BorderStyle BorderStyle // like Raised, Sunken BorderSize int } // style.Tooltip type Tooltip struct { Background render.Color Foreground render.Color } // ui.Button signature to set a specific style. func (w *Button) SetStyle(style style.Button) {} // The style package would include the default styles for // each widget independent of any given theme. const DefaultButton = Button{ Background: render.Grey, Foreground: render.Black, HoverBackground: render.Cyan, BorderStyle: BorderRaised, BorderSize: 2, } // style.Theme is a collection of styles. type Theme struct { Button *Button Tooltip *Tooltip etc. } ``` ### Setting a Theme Probably have the theme be a global ui package variable that can be changed. New widgets created after a theme change will use the theme when they first style themselves. `ui.SetTheme(style.Theme)` When a widget needs its style info the logic should be: * If a custom style was given via .SetStyle(), use that. * Otherwise use the style in the current Theme, if available. * Otherwise fall back to some default styles for the widget. ### Default Styles Provide some Bootstrap-style default styles for buttons, to easily mark a button as "primary", "secondary", "success", "info", "warning" and "danger". `btn.SetStyle(style.ButtonPrimary)` Maybe styles like this can be functions that return their style dynamically, so it can take your theme's style and just set the background color as needed and return it, making it usable for custom themes. ### Default Themes Include a few default built-in themes, like: * Default: styles like what the current defaults are. * Dark: dark mode of the default theme.

kirsle added the

ui toolkit

label 2020-04-09 21:59:57 +00:00

Sign in to join this conversation.