Option to use dark theme

ghost commented at 10:01 am on August 21, 2020: none

I understand priority is to keep things simple and secure however some users prefer dark theme.
Dynamically change the theme to either light or dark.
Almost every bitcoin wallet for desktop has dark theme.
Those pictures are looking good: https://github.com/bitcoin/bitcoin/issues/9639
Did some research related to light/dark theme and qt although I am not the best person to suggest code related to design: https://github.com/Alexhuszagh/BreezeStyleSheets

unknown added the label Feature on Aug 21, 2020

jonatack commented at 10:26 am on August 21, 2020: contributor

Concept ACK for a GUI option, if it makes dark mode easier for users to have.

I use the GUI with dark mode theme only, thanks to these tips from @laanwj: https://twitter.com/orionwl/status/1240948484334813185 and https://twitter.com/orionwl/status/1240954362614120448

Bosch-0 commented at 8:12 am on August 23, 2020: none

What would be the technical hurdles of having a dark / light theme toggle switch in the settings / setup of the GUI?

hebasto commented at 8:18 am on August 23, 2020: member

@Bosch-0

What would be the technical hurdles of having a dark / light theme toggle switch in the settings / setup of the GUI?

release-notes-0.17.0.md:

The GUI suffers from visual glitches in the new MacOS dark mode.

Bosch-0 commented at 8:32 am on August 23, 2020: none

Link did not work: https://bitcoincore.org/en/releases/0.17.0/

Bosch-0 commented at 8:33 am on August 23, 2020: none

Looks like it is disabled in MacOS

https://github.com/bitcoin/bitcoin/pull/14593

hebasto commented at 8:36 am on August 23, 2020: member

Link did not work: https://bitcoincore.org/en/releases/0.17.0/

Fixed.

Looks like it is disabled in MacOS

bitcoin/bitcoin#14593

Yes. This is a kind of workaround.

goums commented at 12:48 pm on December 11, 2020: none

I’m using Dark mode on self compiled GUI, thanks to the tips shared by @jonatack

I confirm, @hebasto comment:

The GUI suffers from visual glitches in the new MacOS dark mode.

I’ve found two main UI glitches:

Icons stay in black on dark background:
Tabs focus and separator (in blue) are not clean:

Otherwise, the dark mode seems pretty OK on macOS Big Sur.

I’ll try to make PR to address the 2 issues above, if you think of any other glitches, let me know.

prusnak commented at 3:32 pm on December 13, 2020: contributor

It seems that using https://github.com/ColinDuquesnoy/QDarkStyleSheet might resolve most of the visual issues.

Switching to dark mode in macOS, Qt will trigger an event of the type QEvent.PaletteChange which can be detected and actioned upon in the main widget’s changeEvent method.

goums commented at 1:36 pm on December 17, 2020: none

@prusnak for now, the GUI is not using any self defined palette, it inherits the OS color palette.

We could force our own light / dark palette, but that will be a bigger change, and might involve some UI designers.

My idea was to keep the current system as it is, but just fix the 2/3 glitches that occur on mac OS dark mode. It should be easier to integrate in the codebase.

goums commented at 2:35 pm on December 18, 2020: none

@prusnak I’ve tried to play with QPalette and styleSheet to fix the display glitches, but it’s not working because the bugs are directly in QMacStyle definition.

One solution could be to use the embedded QT style fusion which requires no dependencies, and support Light / Dark mode out of the box. See my comment with screenshots on this related issue: #136 (comment)

ghost commented at 2:29 am on January 8, 2021: none

I was reading https://github.com/bitcoin-core/bitcoin-devwiki/wiki/0.21-Release-Candidate-Testing-Guide and it has dark mode screenshots

So do we already have dark theme in bitcoin core gui?

goums commented at 10:55 am on January 8, 2021: none

@prayank23 currently, QT inherits from OS theme, so it depends on your OS, you can have dark mode on linux distributions. on macos, it has been disabled because of the many glitches that were detected

I was reading https://github.com/bitcoin-core/bitcoin-devwiki/wiki/0.21-Release-Candidate-Testing-Guide and it has dark mode screenshots

I think this is linux platform screenshots

ghost commented at 8:45 pm on March 9, 2021: none

It seems that using https://github.com/ColinDuquesnoy/QDarkStyleSheet might resolve most of the visual issues. @prusnak I tried following the steps mentioned in README.rst but getting error when I launch bitcoin-qt

Steps that I followed:

Clone https://github.com/ColinDuquesnoy/QDarkStyleSheet.git
Copy qdarkstyle/style.qss and qdarkstyle/style.qrc in src/qt
Add path for style.qrc in contrib/bitcoin-qt.pro

0RESOURCES += \
1    ../src/qt/bitcoin.qrc
2    ../src/qt/style.qrc

Add below code in src/qt/bitcoingui.cpp:

0#include <QTextStream>

 0
 1QFile f(":/home/satoshi/bitcoin/src/qt/style.qss");
 2
 3if (!f.exists())   {
 4    printf("Unable to set stylesheet, file not found\n");
 5}
 6else   {
 7    f.open(QFile::ReadOnly | QFile::Text);
 8    QTextStream ts(&f);
 9    qApp->setStyleSheet(ts.readAll());
10}

Launch bitcoin-qt

Error: Unable to set stylesheet, file not found

jarolrod commented at 5:34 am on March 10, 2021: member

@prayank23 on Ubuntu/Debian (as your screenshot suggests you are using), just set a dark GTK theme.

ghost commented at 3:50 pm on March 10, 2021: none

@jarolrod I understand the workaround as jonatack had shared links when I created this issue. I am trying to add option in Bitcoin Core to switch light/dark theme which can work on all platforms irrespective of OS settings.

jarolrod commented at 3:53 pm on March 10, 2021: member

@prayank23 I see, you’d need to come up with a stylesheet for both (light + dark) I believe. Maybe in talks with the design community. And you can add a toggle button somewhere in the menu.

ghost commented at 9:22 pm on March 26, 2021: none

Its working :) Suggestion by @hebasto in IRC channel ##bitcoin-core-gui helped. Had to remove : from QFile f(":/home/satoshi/bitcoin/src/qt/style.qss");

There are few things that will need to be changed or added. Screenshots:

Splash screen still looks the same:

ghost commented at 3:02 pm on March 27, 2021: none

This does not work on Windows as expected

MarcoFalke referenced this in commit 3bcd278aa6 on Mar 29, 2021

hebasto commented at 8:52 am on July 4, 2021: member

After #366 is merged the Bitcoin Core GUI should follow system appearance settings. It works on macOS. Also it works on some DEs on Linux. Not sure if anybody test the current master on Windows, though.

Going to close this issue. Feel free to open a new platform or DE specific one.

hebasto closed this on Jul 4, 2021

bitcoin-core locked this on Aug 16, 2022

Option to use dark theme #68