search

achannarasappa / ticker

Terminal stock ticker with live updates and position tracking
GNU General Public License v3.0
4.94k stars 267 forks source link

Color Configuring #53

Closed valentin-ok closed 3 years ago

valentin-ok commented 3 years ago

The Dark Grey is barely readable on dark terminals when there's sunlight in the room.

Best regards ticker_cutoff_date

Edit: This is a tricky one. ticker isn't using ANSI colors but termenv, which doesn't respect color schemes.

I patched it with fatih/color to use ANSI for most Text and it improved readability for me a lot.

I guess this is a fundamental decision everyone has to decide for themselves. I have no problem with maintaining a patch so I am fine.

ticker

diff --git a/go.mod b/go.mod
index d546e43..7b48c24 100644
--- a/go.mod
+++ b/go.mod
@@ -7,6 +7,7 @@ require (
        github.com/adrg/xdg v0.3.0
        github.com/charmbracelet/bubbles v0.7.5
        github.com/charmbracelet/bubbletea v0.12.2
+       github.com/fatih/color v1.7.0
        github.com/go-resty/resty/v2 v2.3.0
        github.com/jarcoal/httpmock v1.0.7
        github.com/lucasb-eyer/go-colorful v1.0.3
diff --git a/go.sum b/go.sum
index e79c0f2..d970abb 100644
--- a/go.sum
+++ b/go.sum
@@ -50,6 +50,7 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
 github.com/dgryski/go-sip13 v0.0.0-20181026042036-e10d5fee7954/go.mod h1:vAd38F8PWV+bWy6jNmig1y/TA+kYO4g3RSRF0IAv0no=
+github.com/fatih/color v1.7.0 h1:DkWD4oS2D8LGGgTQ6IvwJJXSL5Vp2ffcQg58nFV38Ys=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/fsnotify/fsnotify v1.4.9 h1:hsms1Qyu0jgnwNXIxa+/V/PDsU6CfLf6CNO8H7IWoS4=
@@ -145,6 +146,7 @@ github.com/lucasb-eyer/go-colorful v1.0.3 h1:QIbQXiugsb+q10B+MI+7DI1oQLdmnep86tW
 github.com/lucasb-eyer/go-colorful v1.0.3/go.mod h1:R4dSotOR9KMtayYi1e77YzuveK+i7ruzyGqttikkLy0=
 github.com/magiconair/properties v1.8.1 h1:ZC2Vc7/ZFkGmsVC9KvOjumD+G5lXy2RtTKyzRKO2BQ4=
 github.com/magiconair/properties v1.8.1/go.mod h1:PppfXfuXeibc/6YijjN8zIbojt8czPbwD3XqdrwzmxQ=
+github.com/mattn/go-colorable v0.0.9 h1:UVL0vNpWh04HeJXV0KLcaT7r06gOH2l4OW6ddYRUIY4=
 github.com/mattn/go-colorable v0.0.9/go.mod h1:9vuHe8Xs5qXnSaW/c/ABM9alt+Vo+STaOChaDxuIBZU=
 github.com/mattn/go-isatty v0.0.3/go.mod h1:M+lRXTBqGeGNdLjl/ufCoiOlB5xdOkqRJdNxMWT7Zi4=
 github.com/mattn/go-isatty v0.0.12 h1:wuysRhFDzyxgEmMf5xjvJ2M9dZoWAXNNr5LSBS7uHXY=
diff --git a/internal/ui/ui.go b/internal/ui/ui.go
index 4c03fd5..08fdb8e 100644
--- a/internal/ui/ui.go
+++ b/internal/ui/ui.go
@@ -10,19 +10,21 @@ import (
        "ticker/internal/ui/component/watchlist"
        "time"

-       . "ticker/internal/ui/util"
+       // . "ticker/internal/ui/util"
        . "ticker/internal/ui/util/text"

        "github.com/charmbracelet/bubbles/viewport"
        tea "github.com/charmbracelet/bubbletea"
        "github.com/go-resty/resty/v2"
+       "github.com/fatih/color"
 )

 var (
-       styleLogo = NewStyle("#ffc27d", "#f37329", true)
-       styleHelp = NewStyle("#4e4e4e", "", true)
+       styleLogo = color.New(color.FgBlack, color.BgYellow).SprintFunc()
+       styleHelp = color.New(color.FgHiBlack).SprintFunc()
 )

+
 const (
        footerHeight = 1
 )
diff --git a/internal/ui/util/style.go b/internal/ui/util/style.go
index 813d84f..c0659a7 100644
--- a/internal/ui/util/style.go
+++ b/internal/ui/util/style.go
@@ -5,6 +5,7 @@ import (

        "github.com/lucasb-eyer/go-colorful"
        te "github.com/muesli/termenv"
+       "github.com/fatih/color"
 )

 const (
@@ -12,12 +13,12 @@ const (
 )

 var (
-       StyleNeutral       = NewStyle("#d4d4d4", "", false)
-       StyleNeutralBold   = NewStyle("#d4d4d4", "", true)
-       StyleNeutralFaded  = NewStyle("#616161", "", false)
-       StyleLine          = NewStyle("#3a3a3a", "", false)
-       StyleTag           = NewStyle("#d4d4d4", "#3a3a3a", false)
-       StyleTagEnd        = NewStyle("#3a3a3a", "#3a3a3a", false)
+       StyleNeutral       = color.New(color.FgWhite).SprintFunc()
+       StyleNeutralBold   = color.New(color.FgWhite, color.Bold).SprintFunc()
+       StyleNeutralFaded  = color.New(color.FgHiBlack).SprintFunc()
+       StyleLine          = color.New(color.FgBlack).SprintFunc()
+       StyleTag           = color.New(color.FgWhite, color.BgBlack).SprintFunc()
+       StyleTagEnd        = color.New(color.FgWhite, color.BgBlack).SprintFunc()
        StylePricePositive = NewStyleFromGradient("#C6FF40", "#779929")
        StylePriceNegative = NewStyleFromGradient("#FF7940", "#994926")
 )
achannarasappa commented 3 years ago

I hadn't head about fatih/color - thanks for turning me onto it. I'll definitely be looking into it.

The current color scheme definitely does make an assumption that the user is using a black background and I'm sure ticker looks pretty wonky with a light or non-block color background. I think this is worth addressing - whether it be with fatih/color or some other library

valentin-ok commented 3 years ago

I just found out that termenv can do the basic ANSI colors 0 to 15 as well. It's just not documented.

https://github.com/muesli/termenv/blob/701b1fc7232bc1fe4d2f4030c5f0803d9bac63db/examples/color-chart/main.go#L10 https://github.com/muesli/termenv/blob/701b1fc7232bc1fe4d2f4030c5f0803d9bac63db/ansicolors.go#L3

Edit: Yes, this works:

diff --git a/internal/ui/ui.go b/internal/ui/ui.go
index 310c6e6..e9267e3 100644
--- a/internal/ui/ui.go
+++ b/internal/ui/ui.go
@@ -19,8 +19,8 @@ import (
 )

 var (
-       styleLogo = NewStyle("#ffc27d", "#f37329", true)
-       styleHelp = NewStyle("#4e4e4e", "", true)
+       styleLogo = NewStyleANSI(0, 3, true)
+       styleHelp = NewStyleANSI(8, 256, true)
 )

 const (
diff --git a/internal/ui/util/style.go b/internal/ui/util/style.go
index 813d84f..3ecb219 100644
--- a/internal/ui/util/style.go
+++ b/internal/ui/util/style.go
@@ -12,12 +12,12 @@ const (
 )

 var (
-       StyleNeutral       = NewStyle("#d4d4d4", "", false)
-       StyleNeutralBold   = NewStyle("#d4d4d4", "", true)
-       StyleNeutralFaded  = NewStyle("#616161", "", false)
-       StyleLine          = NewStyle("#3a3a3a", "", false)
-       StyleTag           = NewStyle("#d4d4d4", "#3a3a3a", false)
-       StyleTagEnd        = NewStyle("#3a3a3a", "#3a3a3a", false)
+       StyleNeutral       = NewStyleANSI(te.ANSIWhite, 256, false)
+       StyleNeutralBold   = NewStyleANSI(te.ANSIWhite, 256, true)
+       StyleNeutralFaded  = NewStyleANSI(te.ANSIBrightBlack, 256, false)
+       StyleLine          = NewStyleANSI(te.ANSIBlack, 256, false)
+       StyleTag           = NewStyleANSI(te.ANSIWhite, te.ANSIBlack, false)
+       StyleTagEnd        = NewStyleANSI(te.ANSIWhite, te.ANSIBlack, false)
        StylePricePositive = NewStyleFromGradient("#C6FF40", "#779929")
        StylePriceNegative = NewStyleFromGradient("#FF7940", "#994926")
 )
@@ -30,6 +30,14 @@ func NewStyle(fg string, bg string, bold bool) func(string) string {
        return s.Styled
 }

+func NewStyleANSI(fg te.ANSIColor, bg te.ANSIColor, bold bool) func(string) string {
+       s := te.Style{}.Foreground(fg).Background(bg)
+       if bold {
+               s = s.Bold()
+       }
+       return s.Styled
+}
+
achannarasappa commented 3 years ago

I misunderstood your original request - I think the color scheme as-is is good. Changing it to use ANSI 16 would constitute a rather significant change in user experience in my opinion.

In the recent version, I've simplified the colors scheme to ANSI 256 where it made sense. I hope this at least somewhat addresses this problem for you. Perhaps another improvement could be to allow user configuration of color scheme - feel free to open that as a separate issue if you'd like.