Need Help Overriding Font Color w/ Bubble tea + lipgloss

[MattHep12]

Hi all, I've been working on a todo list and its been going well, however I cannot get over this obstacle. I've tried for hours, but can't get the text color to remain white on my todo list (todoList []storage.Task) field inside my model struct. The only time my text is white is when the "uncompletedTaskBg" var is applied. To go further, its not the variable itself, its the color. When I change my hexcode to "#333344" on other vars the text will be white. Why? I want white text over a green background on completed tasks, and
white text over a blue background on uncompleted tasks. Thanks. Here are my styling vars:

var (
	white              = lipgloss.Color("#FFFFFF")
	headerBg           = lipgloss.Color("#222233")
	uncompletedTaskBg  = lipgloss.Color("#333344")
	completedTaskBg    = lipgloss.Color("#00b300")
	buttonBg           = lipgloss.Color("#444455")
	activeUncompleteBg = lipgloss.Color("#0096FF")
	activeCompletedBg  = lipgloss.Color("#00FF00")
	borderColor        = lipgloss.Color("#AAAAAA")
	inputStyle         = lipgloss.NewStyle().Foreground(white)
	selectedItemStyle  = lipgloss.NewStyle().PaddingLeft(2).Foreground(white).Bold(true)
	paginationStyle    = list.DefaultStyles().PaginationStyle.PaddingLeft(4)

	header = lipgloss.NewStyle().
		Background(headerBg).
		Foreground(white).
		Bold(true).
		Padding(0, 2)
	footerStyle = lipgloss.NewStyle().
			Foreground(lipgloss.Color(white)). // Gray color
			PaddingTop(1).
			Render
	uncompletedTaskStyle = lipgloss.NewStyle().
				Background(uncompletedTaskBg).
				Foreground(white).
				Bold(true).
				Padding(0, 2)
	completedTaskStyle = lipgloss.NewStyle().
				Background(completedTaskBg).
				Foreground(white).
				Bold(true).
				Padding(0, 2)
	activeUncompletedTaskStyle = uncompletedTaskStyle.
					Background(activeUncompleteBg).
					Foreground(white)
	activeCompletedTaskStyle = completedTaskStyle.
					Background(activeCompletedBg).
					Foreground(white)
	buttonStyle = lipgloss.NewStyle().
			Background(buttonBg).
			Foreground(white).
			Bold(true).
			Padding(0, 2).
			Border(lipgloss.NormalBorder(), true).
			BorderForeground(borderColor)
	activeButtonStyle = buttonStyle.
				Background(activeUncompleteBg).
				Foreground(white). // Ensure text stays white
				BorderForeground(white)
	docStyle = lipgloss.NewStyle().Padding(1, 2, 1, 2)
)

And here is my View() func:

func (m model) View() string {
	doc := strings.Builder{}
	terminalWidth := m.dimensions.width

	columnWidths := []int{
		terminalWidth / 2,
		terminalWidth / 6,
		terminalWidth / 6,
		terminalWidth / 10,
	}

	for i := range columnWidths {
		if columnWidths[i] < 10 {
			columnWidths[i] = 10
		}
	}

	// Render tab navigation
	var renderedTabs []string
	for i, title := range m.tabTitles {
		if i == m.currentTab {
			renderedTabs = append(renderedTabs, activeButtonStyle.Render(title))
		} else {
			renderedTabs = append(renderedTabs, buttonStyle.Render(title))
		}
	}
	row := lipgloss.JoinHorizontal(0, renderedTabs...)

	// Header row
	headerRow := fmt.Sprintf(
		"%-4s %-*s | %-*s | %-*s | %-*s",
		"", columnWidths[0], "Task Name",
		columnWidths[1], "Due Date",
		columnWidths[2], "Category",
		columnWidths[3], "Priority",
	)
	headers := header.Render(headerRow)

	// Render Active (Incomplete) Tasks
	var todoEntries []string
	for i, task := range m.todoList {
		if task.Completed {
			continue // Skip completed tasks in this section
		}
		checkbox := "[ ]"
		if task.Completed {
			checkbox = "[✔]"
		}
		style := uncompletedTaskStyle
		if i == m.currentTask && !m.todoList[i].Completed {
			style = activeUncompletedTaskStyle
		}

		todoRow := fmt.Sprintf(
			"%s %-*s | %-*s | %-*s | %-*s",
			checkbox,
			columnWidths[0], task.Name,
			columnWidths[1], task.DueDate,
			columnWidths[2], task.Category,
			columnWidths[3], task.Priority,
		)
		todoEntries = append(todoEntries, style.Render(todoRow))
	}
	todos := lipgloss.JoinVertical(0, todoEntries...)

	// Render Completed Tasks
	var completedEntries []string
	for i, task := range m.todoList {
		if !task.Completed {
			continue // Skip incomplete tasks
		}
		checkbox := "[✔]"
		style := completedTaskStyle
		if i == m.currentTask {
			style = activeCompletedTaskStyle
		}

		completedRow := fmt.Sprintf(
			"%s %-*s | %-*s | %-*s | %-*s",
			checkbox,
			columnWidths[0], task.Name,
			columnWidths[1], task.DueDate,
			columnWidths[2], task.Category,
			columnWidths[3], task.Priority,
		)
		completedEntries = append(completedEntries, style.Render(completedRow))
	}
	completedTasks := lipgloss.JoinVertical(0, completedEntries...)

	// Footer with Keybindings
	footer := footerStyle("Keybindings: [A] Add Task  [R] Remove Task  [E] Edit Task  [Space] Toggle Complete  [←/→] Switch Tabs  [Q] Quit")

	// Assemble final UI
	switch m.currentTab {
	case 0:
		doc.WriteString(row + "\n")
		if m.addingTask {
			for i := 0; i < len(m.inputModel.Inputs); i++ {
				doc.WriteString(inputStyle.Width(columnWidths[i]).Render(m.inputModel.Inputs[i].View()) + "\n")
			}
		} else {
			doc.WriteString(headers + "\n")
			doc.WriteString(todos + "\n")
			if len(completedEntries) > 0 {
				doc.WriteString("\n" + header.Render("Completed Tasks") + "\n")
				doc.WriteString(completedTasks + "\n")
			}
		}
	case 1:
		doc.WriteString(row + "\n")
		doc.WriteString(m.recipes.View())
	case 2:
		doc.WriteString(row + "\n")
		doc.WriteString(m.ingredients.View())
	}

	doc.WriteString("\n" + footer + "\n")
	return docStyle.Render(doc.String())
}

Thank you for any help.

[MattHep12]

Notice text is white on incomplete and unselected but nothing else.

[MattHep12]

After messing with it some more it will only be white if the background color is sufficiently dark enough. How can I override this functionality?

[MattHep12]

Fixed the problem by unassigning white and using #FFFFFF directly.