Skip to content

Commit

Permalink
Implement dark mode (#401)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tuhalang
tuhalang committed May 25, 2021
1 parent c113394 commit 809285f
Show file tree
Hide file tree
Showing 17 changed files with 178 additions and 58 deletions.
1 change: 1 addition & 0 deletions ui/account_details_page.go
View file
Expand Up @@ -167,6 +167,7 @@ func (pg *acctDetailsPage) accountBalanceLayout(gtx layout.Context, common *page
func (pg *acctDetailsPage) acctBalLayout(gtx layout.Context, balType string, mainBalance, subBalance string, isFirst bool) layout.Dimensions {
mainLabel := pg.theme.Body1(mainBalance)
subLabel := pg.theme.Caption(subBalance)
subLabel.Color = pg.theme.Color.DeepBlue
marginTop := values.MarginPadding16
marginLeft := values.MarginPadding35
if isFirst {
Expand Down
36 changes: 24 additions & 12 deletions ui/compontents.go
View file
Expand Up @@ -44,15 +44,23 @@ type (

// layoutBalance aligns the main and sub DCR balances horizontally, putting the sub
// balance at the baseline of the row.
func (page pageCommon) layoutBalance(gtx layout.Context, amount string) layout.Dimensions {
func (page pageCommon) layoutBalance(gtx layout.Context, amount string, isSwitchColor bool) layout.Dimensions {
// todo: make "DCR" symbols small when there are no decimals in the balance
mainText, subText := breakBalance(page.printer, amount)
return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return page.theme.Label(values.TextSize20, mainText).Layout(gtx)
label := page.theme.Label(values.TextSize20, mainText)
if isSwitchColor {
label.Color = page.theme.Color.DeepBlue
}
return label.Layout(gtx)
}),
layout.Rigid(func(gtx C) D {
return page.theme.Label(values.TextSize14, subText).Layout(gtx)
label := page.theme.Label(values.TextSize14, subText)
if isSwitchColor {
label.Color = page.theme.Color.DeepBlue
}
return label.Layout(gtx)
}),
)
}
Expand All @@ -74,7 +82,7 @@ func (page pageCommon) layoutUSDBalance(gtx layout.Context) layout.Dimensions {
Top: values.MarginPadding3,
Left: values.MarginPadding8,
}
border := widget.Border{Color: page.theme.Color.LightGray, CornerRadius: unit.Dp(8), Width: unit.Dp(0.5)}
border := widget.Border{Color: page.theme.Color.Gray, CornerRadius: unit.Dp(8), Width: unit.Dp(0.5)}
return inset.Layout(gtx, func(gtx C) D {
padding := layout.Inset{
Top: values.MarginPadding3,
Expand All @@ -85,7 +93,7 @@ func (page pageCommon) layoutUSDBalance(gtx layout.Context) layout.Dimensions {
return border.Layout(gtx, func(gtx C) D {
return padding.Layout(gtx, func(gtx C) D {
amountDCRtoUSDString := formatUSDBalance(page.printer, page.amountDCRtoUSD)
return page.theme.Label(values.TextSize14, amountDCRtoUSDString).Layout(gtx)
return page.theme.Body2(amountDCRtoUSDString).Layout(gtx)
})
})
})
Expand Down Expand Up @@ -122,7 +130,7 @@ func (page pageCommon) layoutTopBar(gtx layout.Context) layout.Dimensions {
}),
layout.Rigid(func(gtx C) D {
return layout.Center.Layout(gtx, func(gtx C) D {
return page.layoutBalance(gtx, page.info.TotalBalance)
return page.layoutBalance(gtx, page.info.TotalBalance, true)
})
}),
layout.Rigid(func(gtx C) D {
Expand Down Expand Up @@ -192,7 +200,7 @@ func (page pageCommon) layoutNavDrawer(gtx layout.Context) layout.Dimensions {
return list.Layout(gtx, len(page.drawerNavItems), func(gtx C, i int) D {
background := page.theme.Color.Surface
if page.drawerNavItems[i].page == *page.page {
background = page.theme.Color.LightGray
background = page.theme.Color.ActiveGray
}
txt := page.theme.Label(values.TextSize16, page.drawerNavItems[i].page)
return decredmaterial.Clickable(gtx, page.drawerNavItems[i].clickable, func(gtx C) D {
Expand Down Expand Up @@ -235,7 +243,7 @@ func (page pageCommon) layoutNavDrawer(gtx layout.Context) layout.Dimensions {
Left: leftInset,
Top: values.MarginPadding4,
}.Layout(gtx, func(gtx C) D {
textColor := page.theme.Color.Gray3
textColor := page.theme.Color.Gray4
if page.drawerNavItems[i].page == *page.page {
textColor = page.theme.Color.DeepBlue
}
Expand Down Expand Up @@ -321,7 +329,7 @@ func transactionRow(gtx layout.Context, common pageCommon, row TransactionRow) l
return layout.Inset{Left: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return common.layoutBalance(gtx, row.transaction.Balance)
return common.layoutBalance(gtx, row.transaction.Balance, true)
}),
layout.Rigid(func(gtx C) D {
if row.showBadge {
Expand All @@ -342,7 +350,11 @@ func transactionRow(gtx layout.Context, common pageCommon, row TransactionRow) l
s = row.transaction.Status
}
status := common.theme.Body1(s)
status.Color = common.theme.Color.Gray
if row.transaction.Status != "confirmed" {
status.Color = common.theme.Color.Gray5
} else {
status.Color = common.theme.Color.Gray4
}
status.Alignment = text.Middle
return status.Layout(gtx)
})
Expand Down Expand Up @@ -669,7 +681,7 @@ func (page *pageCommon) walletAccountLayout(gtx layout.Context, wallAcct walletA
acct := page.theme.Label(values.TextSize18, wallAcct.accountName)
acct.Color = page.theme.Color.Text
return endToEndRow(gtx, acct.Layout, func(gtx C) D {
return page.layoutBalance(gtx, wallAcct.totalBalance)
return page.layoutBalance(gtx, wallAcct.totalBalance, true)
})
}),
layout.Rigid(func(gtx C) D {
Expand Down Expand Up @@ -887,7 +899,7 @@ func ticketCard(gtx layout.Context, c pageCommon, t *wallet.Ticket) layout.Dimen
return layout.Inset{
Top: values.MarginPadding16,
}.Layout(gtx, func(gtx C) D {
return c.layoutBalance(gtx, t.Amount)
return c.layoutBalance(gtx, t.Amount, true)
})
}),
layout.Rigid(func(gtx C) D {
Expand Down
101 changes: 76 additions & 25 deletions ui/decredmaterial/theme.go
View file
Expand Up @@ -57,11 +57,15 @@ type Theme struct {
LightBlue color.NRGBA
LightGray color.NRGBA
InactiveGray color.NRGBA
ActiveGray color.NRGBA
Gray1 color.NRGBA
Gray2 color.NRGBA
Gray3 color.NRGBA
Orange color.NRGBA
Orange2 color.NRGBA
Gray4 color.NRGBA
Gray5 color.NRGBA
Gray6 color.NRGBA
}
Icon struct {
ContentCreate *widget.Icon
Expand All @@ -81,35 +85,78 @@ type Theme struct {
collapseIcon *widget.Image

dropDownMenus []*DropDown

DarkMode bool
}

func (t *Theme) setColorMode(darkMode bool) {
if darkMode {
t.DarkMode = true
t.Color.Primary = rgb(0x57B6FF)
t.Color.Text = argb(0x99FFFFFF)
t.Color.Hint = rgb(0x8997A5)
t.Color.InvText = rgb(0xffffff)
t.Color.Overlay = rgb(0x000000)
t.Color.Surface = rgb(0x252525)
t.Color.Success = green
t.Color.Success2 = rgb(0xE1F8EF)
t.Color.Danger = rgb(0xed6d47)
t.Color.Gray = argb(0x99FFFFFF)
t.Color.Gray1 = rgb(0x1E1E1E)
t.Color.Gray2 = rgb(0x8997a5)
t.Color.Gray3 = argb(0xDEFFFFFF)
t.Color.Gray4 = argb(0x99FFFFFF)
t.Color.Gray5 = argb(0x61FFFFFF)
t.Color.Gray6 = argb(0xCCFFFFFF)
t.Color.LightGray = rgb(0x121212)
t.Color.ActiveGray = rgb(0x363636)
t.Color.DeepBlue = argb(0xDEFFFFFF)
t.Color.InactiveGray = rgb(0xc4cbd2)
t.Color.Black = rgb(0x000000)
t.Color.Background = argb(0x22444444)
t.Color.LightBlue = rgb(0xe4f6ff)
t.Color.Orange = rgb(0xD34A21)
t.Color.Orange2 = rgb(0xF8E8E7)
t.TextSize = unit.Sp(16)
} else {
t.DarkMode = false
t.Color.Primary = keyblue
t.Color.Text = darkblue
t.Color.Hint = rgb(0x8997A5)
t.Color.InvText = rgb(0xffffff)
t.Color.Overlay = rgb(0x000000)
t.Color.Surface = rgb(0xffffff)
t.Color.Success = green
t.Color.Success2 = rgb(0xE1F8EF)
t.Color.Danger = rgb(0xed6d47)
t.Color.Gray = rgb(0x596D81)
t.Color.Gray1 = rgb(0xe6eaed)
t.Color.Gray2 = rgb(0x8997a5)
t.Color.Gray3 = rgb(0x3d5873)
t.Color.Gray4 = rgb(0x3d5873)
t.Color.Gray5 = rgb(0x3d5873)
t.Color.Gray6 = rgb(0x091440)
t.Color.LightGray = rgb(0xf3f5f6)
t.Color.ActiveGray = rgb(0xf3f5f6)
t.Color.DeepBlue = rgb(0x091440)
t.Color.InactiveGray = rgb(0xc4cbd2)
t.Color.Black = rgb(0x000000)
t.Color.Background = argb(0x22444444)
t.Color.LightBlue = rgb(0xe4f6ff)
t.Color.Orange = rgb(0xD34A21)
t.Color.Orange2 = rgb(0xF8E8E7)
t.TextSize = unit.Sp(16)
}
}

func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image) *Theme {
func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image, isDarkModeOn bool) *Theme {
t := &Theme{
Shaper: text.NewCache(fontCollection),
Base: material.NewTheme(fontCollection),
Shaper: text.NewCache(fontCollection),
Base: material.NewTheme(fontCollection),
DarkMode: false,
}
t.Color.Primary = keyblue
t.Color.Text = darkblue
t.Color.Hint = rgb(0x8997A5)
t.Color.InvText = rgb(0xffffff)
t.Color.Overlay = rgb(0x000000)
t.Color.Surface = rgb(0xffffff)
t.Color.Success = green
t.Color.Success2 = rgb(0xE1F8EF)
t.Color.Danger = rgb(0xed6d47)
t.Color.Gray = rgb(0x596D81)
t.Color.Gray1 = rgb(0xe6eaed)
t.Color.Gray2 = rgb(0x8997a5)
t.Color.Gray3 = rgb(0x3d5873)
t.Color.LightGray = rgb(0xf3f5f6)
t.Color.DeepBlue = rgb(0x091440)
t.Color.InactiveGray = rgb(0xc4cbd2)
t.Color.Black = rgb(0x000000)
t.Color.Background = argb(0x22444444)
t.Color.LightBlue = rgb(0xe4f6ff)
t.Color.Orange = rgb(0xD34A21)
t.Color.Orange2 = rgb(0xF8E8E7)
t.TextSize = unit.Sp(16)

t.setColorMode(isDarkModeOn)

t.checkBoxCheckedIcon = mustIcon(widget.NewIcon(icons.ToggleCheckBox))
t.checkBoxUncheckedIcon = mustIcon(widget.NewIcon(icons.ToggleCheckBoxOutlineBlank))
Expand All @@ -126,6 +173,10 @@ func NewTheme(fontCollection []text.FontFace, decredIcons map[string]image.Image
return t
}

func (t *Theme) SwitchDarkMode(isDarkModeOn bool) {
t.setColorMode(isDarkModeOn)
}

func (t *Theme) Background(gtx layout.Context, w layout.Widget) {
layout.Stack{
Alignment: layout.N,
Expand Down
6 changes: 6 additions & 0 deletions ui/decredmaterial/votebar.go
View file
Expand Up @@ -30,6 +30,7 @@ type VoteBar struct {
noColor color.NRGBA
bgColor color.NRGBA
thumbCol color.NRGBA
notifyColor color.NRGBA

yesLabel Label
noLabel Label
Expand Down Expand Up @@ -69,6 +70,7 @@ func (t *Theme) VoteBar(infoIcon, legendIcon *widget.Icon) VoteBar {
legendIcon: legendIcon,
thumbCol: t.Color.InactiveGray,
bgColor: t.Color.Gray1,
notifyColor: t.Color.Gray4,
passTooltipLabel: t.Caption(""),
totalVotesTooltipLabel: t.Caption("Total votes"),
quorumRequirementTooltipLabel: t.Caption("Quorum requirement"),
Expand Down Expand Up @@ -281,6 +283,10 @@ func (v *VoteBar) layoutInfo(gtx C) D {

func (v *VoteBar) layoutInfoTooltip(gtx C, rect image.Rectangle) {
inset := layout.Inset{Top: unit.Dp(20), Left: unit.Dp(-180)}
v.totalVotesTooltipLabel.Color = v.notifyColor
v.totalVotesCountLabel.Color = v.notifyColor
v.quorumRequirementTooltipLabel.Color = v.notifyColor
v.quorumRequirementCountLabel.Color = v.notifyColor
v.quorumTooltip.Layout(gtx, rect, inset, func(gtx C) D {
gtx.Constraints.Min.X = gtx.Px(unit.Dp(180))
gtx.Constraints.Max.X = gtx.Px(unit.Dp(180))
Expand Down
2 changes: 1 addition & 1 deletion ui/modal_templates.go
View file
Expand Up @@ -163,7 +163,7 @@ func (m *ModalTemplate) createNewAccount() []layout.Widget {
}),
layout.Rigid(func(gtx C) D {
info := m.th.Body1(" cannot ")
info.Color = m.th.Color.Black
info.Color = m.th.Color.DeepBlue
return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
return info.Layout(gtx)
})
Expand Down
14 changes: 12 additions & 2 deletions ui/overview_page.go
View file
Expand Up @@ -86,6 +86,7 @@ type overviewPage struct {
}

func (win *Window) OverviewPage(c pageCommon) layout.Widget {

pg := overviewPage{
theme: c.theme,
tab: c.navTab,
Expand Down Expand Up @@ -162,7 +163,7 @@ func (win *Window) OverviewPage(c pageCommon) layout.Widget {
pg.cachedIcon = c.icons.cached

return func(gtx C) D {
pg.Handler(gtx, c)
pg.Handler(gtx, c, win)
return pg.Layout(gtx, c)
}
}
Expand Down Expand Up @@ -639,7 +640,16 @@ func (pg *overviewPage) walletSyncBox(gtx layout.Context, inset layout.Inset, de
})
}

func (pg *overviewPage) Handler(eq event.Queue, c pageCommon) {
func (pg *overviewPage) Handler(eq event.Queue, c pageCommon, win *Window) {

if win.wallet != nil {
isDarkModeOn := win.wallet.ReadBoolConfigValueForKey("isDarkModeOn")
if isDarkModeOn != win.theme.DarkMode {
win.theme.SwitchDarkMode(isDarkModeOn)
win.loadPage(c.icons)
}
}

if pg.walletInfo.Synced {
pg.sync.Text = pg.text.disconnect
}
Expand Down
5 changes: 5 additions & 0 deletions ui/page.go
View file
Expand Up @@ -219,6 +219,11 @@ func (win *Window) addPages(decredIcons map[string]image.Image) {
listGridIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["list_grid"])},
}

win.loadPage(ic)
}

func (win *Window) loadPage(ic pageIcons) {

appBarNavItems := []navHandler{
{
clickable: new(widget.Clickable),
Expand Down
6 changes: 3 additions & 3 deletions ui/privacy_page.go
View file
Expand Up @@ -232,9 +232,9 @@ func (pg *privacyPage) mixerInfoLayout(gtx layout.Context, c *pageCommon) layout
}),
layout.Rigid(func(gtx C) D {
if c.wallet.IsAccountMixerActive(c.info.Wallets[*c.selectedWallet].ID) {
return c.layoutBalance(gtx, unmixedBalance)
return c.layoutBalance(gtx, unmixedBalance, true)
}
return c.layoutBalance(gtx, unmixedBalance)
return c.layoutBalance(gtx, unmixedBalance, true)
}),
)
}),
Expand All @@ -253,7 +253,7 @@ func (pg *privacyPage) mixerInfoLayout(gtx layout.Context, c *pageCommon) layout
return t.Layout(gtx)
}),
layout.Rigid(func(gtx C) D {
return c.layoutBalance(gtx, mixedBalance)
return c.layoutBalance(gtx, mixedBalance, true)
}),
)
}),
Expand Down
1 change: 1 addition & 0 deletions ui/receive_page.go
View file
Expand Up @@ -225,6 +225,7 @@ func (pg *receivePage) addressLayout(gtx layout.Context, c pageCommon) layout.Di
return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
layout.Flexed(1, func(gtx C) D {
pg.receiveAddress.Text = pg.addrs
pg.receiveAddress.Color = pg.theme.Color.DeepBlue
pg.receiveAddress.Alignment = text.Middle
pg.receiveAddress.MaxLines = 1
card.Radius = decredmaterial.CornerRadius{NE: 8, NW: 0, SE: 0, SW: 8}
Expand Down
2 changes: 1 addition & 1 deletion ui/send_page.go
View file
Expand Up @@ -478,7 +478,7 @@ func (pg *sendPage) confirmationModal(gtx layout.Context, common pageCommon) lay
layout.Rigid(func(gtx C) D {
return layout.Flex{}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return common.layoutBalance(gtx, pg.sendAmountDCR)
return common.layoutBalance(gtx, pg.sendAmountDCR, true)
}),
layout.Flexed(1, func(gtx C) D {
if pg.usdExchangeSet {
Expand Down

0 comments on commit 809285f

Please sign in to comment.