Implement dark mode #401

tuhalang · 2021-05-08T02:00:13Z

Resolve #399

Create switch button on setting page
Switch light mode or dark mode when clicking the switch button

ui/decredmaterial/label.go

ui/compontents.go

oshorefueled · 2021-05-11T09:54:22Z

The dark mode doesn't seem to be working well. This is what I get on my end when I launch the app

oshorefueled · 2021-05-12T15:01:25Z

I get a crash with this log when I run the app.

goroutine 1 [running, locked to thread]:
github.com/planetdecred/dcrlibwallet.(*MultiWallet).ReadUserConfigValue(0x0, 0x4e43e0c, 0xc, 0x4bf9400, 0xc0008ec059, 0x4e34600, 0x1)
/Users/klinsmann/go/pkg/mod/github.com/planetdecred/dcrlibwallet@v1.5.3-0.20210224132742-5d0bc5e13370/multiwallet_config.go:64 +0x44
github.com/planetdecred/dcrlibwallet.(*MultiWallet).ReadBoolConfigValueForKey(...)
/Users/klinsmann/go/pkg/mod/github.com/planetdecred/dcrlibwallet@v1.5.3-0.20210224132742-5d0bc5e13370/multiwallet_config.go:110
github.com/planetdecred/godcr/wallet.(*Wallet).ReadBoolConfigValueForKey(0xc00079a640, 0x4e43e0c, 0xc, 0x40800000ffb5513f)
/Users/klinsmann/go/src/github.com/raedahgroup/godcr/wallet/commands.go:773 +0x71
github.com/planetdecred/godcr/ui.(*Window).OverviewPage(0xc000457200, 0xc00049a6e0, 0xc00079a640, 0xc00010c000, 0xc000457310, 0xc0004572a0, 0xc0003e6360, 0xc00066cfa0, 0xc00066cff0, 0xc00066d040, ...)
/Users/klinsmann/go/src/github.com/raedahgroup/godcr/ui/overview_page.go:90 +0xbb
github.com/planetdecred/godcr/ui.(*Window).loadPage(0xc000457200, 0xc00049a6e0, 0xc00079a640, 0xc00010c000, 0xc000457310, 0xc0004572a0, 0xc0003e6360, 0xc00066cfa0, 0xc00066cff0, 0xc00066d040, ...)
/Users/klinsmann/go/src/github.com/raedahgroup/godcr/ui/page.go:356 +0x11f
github.com/planetdecred/godcr/ui.(*Window).addPages(0xc000457200, 0xc000651dd0)
/Users/klinsmann/go/src/github.com/raedahgroup/godcr/ui/page.go:350 +0x6749
github.com/planetdecred/godcr/ui.CreateWindow(0xc00079a640, 0xc000651dd0, 0xc00079a8c0, 0x1, 0x1, 0xc00049c600, 0x0, 0x1, 0x0)
/Users/klinsmann/go/src/github.com/raedahgroup/godcr/ui/window.go:122 +0x809
main.main()
/Users/klinsmann/go/src/github.com/raedahgroup/godcr/main.go:121 +0x5e8

oshorefueled · 2021-05-14T21:06:45Z

The address text on the receive page isn't visible

Modals don't seem to be affected by the dark mode

beansgum

Some texts are not readable

- Remove function LableColor - Add dark mode for ticket page

- Sometimes, the application is crashed because the wallet hasn't loaded - Checking the wallet is not nil before read the config properties

- Fix darkmode for modals - Fix darkmode for receive address

- Fix some texts are not readable when switch darkmode

oshorefueled · 2021-05-23T20:53:36Z

ui/overview_page.go

@@ -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)


You shouldn't need to pass the window struct to the handler method. It seems you're trying to call the reload method from the handler after toggling the dark mode option. Is there a reason you need to re-initialize the icons and pages after toggling the dark mode option?

Yes, i need re-initialize pages after toggling the dark mode option.

oshorefueled · 2021-05-23T20:54:44Z

ui/page.go

+func (win *Window) reloadPage(common pageCommon) {
+	win.loadPage(common.icons)
+}


This seems like a redundant wrapper for the loadPage method.

oshorefueled · 2021-05-23T21:31:27Z

ui/overview_page.go

+	if win.wallet != nil {
+		isDarkModeOn := win.wallet.ReadBoolConfigValueForKey("isDarkModeOn")
+		if isDarkModeOn != win.theme.DarkMode {
+			win.theme.SwitchDarkMode(isDarkModeOn)


Why is this method called in the overview and settings page. Shouldn't it be called just once from the settings page?

I called it in the settings page to handle the button click event dark mode. In the overview page because it is the first page loaded when app startup, i can read config from the wallet in this page and switch to the dark mode.

oshorefueled · 2021-05-23T21:46:35Z

ui/compontents.go

@@ -71,7 +79,8 @@ 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)
+							//return page.theme.LabelColor(values.TextSize14, amountDCRtoUSDString, page.theme.Color.DeepBlue).Layout(gtx)


remove redundant comments

oshorefueled · 2021-05-23T21:52:07Z

ui/compontents.go

+			label := page.theme.Label(values.TextSize20, mainText)
+			if isSwitchColor {
+				label.Color = page.theme.Color.DeepBlue
+			}
+			return label.Layout(gtx)


Why is the colour for the text being done specifically here, shouldn't it be affected like other text colours in the app?

Because the text in here alway display black color independent dark or light mode

request has been resolved

tuhalang force-pushed the dark_mode branch from ba2b630 to 1cfaf15 Compare May 8, 2021 03:48

Sirmorrison previously requested changes May 11, 2021

View reviewed changes

ui/decredmaterial/label.go Outdated Show resolved Hide resolved

ui/compontents.go Outdated Show resolved Hide resolved

ui/compontents.go Outdated Show resolved Hide resolved

ui/compontents.go Outdated Show resolved Hide resolved

tuhalang force-pushed the dark_mode branch from 1cfaf15 to 55b37ea Compare May 11, 2021 17:14

tuhalang force-pushed the dark_mode branch from 5fccf85 to bcc3ff4 Compare May 13, 2021 12:47

beansgum suggested changes May 21, 2021

View reviewed changes

tuhalang added 5 commits May 23, 2021 18:33

Implement dark mode

64e7f3e

fix go lint

bcb6181

Fix feedback:

252ce9e

- Remove function LableColor - Add dark mode for ticket page

Fix crash app when startup

87fd4f7

- Sometimes, the application is crashed because the wallet hasn't loaded - Checking the wallet is not nil before read the config properties

Fix feedback:

4ad65f8

- Fix darkmode for modals - Fix darkmode for receive address

tuhalang force-pushed the dark_mode branch from 93b06cd to 4bf8f5f Compare May 23, 2021 12:29

tuhalang requested a review from beansgum May 23, 2021 12:41

Fix feedback:

e418236

- Fix some texts are not readable when switch darkmode

tuhalang force-pushed the dark_mode branch from 2089f33 to e418236 Compare May 23, 2021 15:29

oshorefueled suggested changes May 23, 2021

View reviewed changes

Remove redundant comments and function

3bf0ffc

oshorefueled approved these changes May 25, 2021

View reviewed changes

beansgum approved these changes May 25, 2021

View reviewed changes

oshorefueled merged commit 809285f into planetdecred:master May 25, 2021

song50119 pushed a commit to song50119/godcr that referenced this pull request May 29, 2021

Implement dark mode (planetdecred#401)

88a8157

song50119 pushed a commit to song50119/godcr that referenced this pull request Apr 24, 2022

Implement dark mode (planetdecred#401)

0ee71ff

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement dark mode #401

Implement dark mode #401

tuhalang commented May 8, 2021

oshorefueled commented May 11, 2021

oshorefueled commented May 12, 2021

oshorefueled commented May 14, 2021

beansgum left a comment

oshorefueled May 23, 2021

tuhalang May 24, 2021

oshorefueled May 23, 2021

oshorefueled May 23, 2021

tuhalang May 24, 2021

oshorefueled May 23, 2021

oshorefueled May 23, 2021

tuhalang May 24, 2021

Implement dark mode #401

Implement dark mode #401

Conversation

tuhalang commented May 8, 2021

oshorefueled commented May 11, 2021

oshorefueled commented May 12, 2021

oshorefueled commented May 14, 2021

beansgum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment