Option to use dark theme

[ghost]

• 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: Design for a bitcoin wallet bitcoin/bitcoin#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

[jonatack]

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]

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

[hebasto]

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

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

[Bosch-0]

Looks like it is disabled in MacOS

bitcoin/bitcoin#14593

[hebasto]

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]

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:

1. Icons stay in black on dark background:
   

2. 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]

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]

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

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

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]

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

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:

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

RESOURCES += \
    ../src/qt/bitcoin.qrc
    ../src/qt/style.qrc

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

#include <QTextStream>

QFile f(":/home/satoshi/bitcoin/src/qt/style.qss");

if (!f.exists())   {
    printf("Unable to set stylesheet, file not found\n");
}
else   {
    f.open(QFile::ReadOnly | QFile::Text);
    QTextStream ts(&f);
    qApp->setStyleSheet(ts.readAll());
}

5. Launch bitcoin-qt

Error: Unable to set stylesheet, file not found

[jarolrod]

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

[ghost]

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

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

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]

This does not work on Windows as expected

[hebasto]

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.