Bubbles With Style

Adding Style to your Bubbles App

Now that we have a hello world, let’s add some basic styling. This is pretty simple though there’s no real ‘templates’ so to speak. Most styling in bubbles is done by adding some lipstick to your bubbles.

All you need to do is define a ‘style’.

var fgStyle = lipgloss.NewStyle().
	Bold(true).
	Foreground(lipgloss.Color("#FAFAFA")).
	Background(lipgloss.Color("#7D56F4")).
	PaddingTop(2).
	PaddingLeft(4)

Almost all parameters are optional though obviously nothing will be done if none are set. Then in order to add a style, simply run fgStyle.Render(“any string”) and it will return a view that matches the selected style.

Now, let’s make it so that the style can be turned on/off. We’ll add a new field to the struct called useStyle and we’ll update our view accordingly

func (s helloModel) View() string {
	msg := fmt.Sprintf("%s\n\nPress Ctrl+C or esc  to exit, t to toggle style", s.greeting)
	if s.useStyle {
		return fgStyle.Render(msg)
	}
	return msg
}

So, if useStyle is true, we’ll use the style, otherwise it won’t.

Now we just need to listen for a keybinding to toggle the lipstick.

func (s helloModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var cmd tea.Cmd
	switch msg.(type) {
	case tea.KeyMsg:
		key := msg.(tea.KeyMsg).String()
		switch key {
		case "t":
			s.useStyle = !s.useStyle
		case "ctrl+c", "esc":
			return s, tea.Quit
		}
	}
	return s, cmd
}

Easy enough, so now hitting t will toggle the color mode and hitting Ctrl+C or escape will quit the app.