Skip to content

Commit

Permalink
feat(browser): use native Chromium dark mode (#1494)
Browse files Browse the repository at this point in the history
  • Loading branch information
@trollixx
trollixx authored Apr 30, 2023
1 parent 0f0c2dc commit b5ca9e7
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 58 deletions.
10 changes: 9 additions & 1 deletion src/libs/browser/settings.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,17 @@ void Settings::applySettings()
// TODO: Apply to all open pages.
m_webProfile->scripts()->clear(); // Remove all scripts first.

if (m_appSettings->isDarkModeEnabled) {
// Qt 5.14+ uses native Chromium dark mode.
#if QT_VERSION < QT_VERSION_CHECK(5, 14, 0)
const bool enableDarkMode
= m_appSettings->contentAppearance == Core::Settings::ContentAppearance::Dark
|| (m_appSettings->contentAppearance == Core::Settings::ContentAppearance::Automatic
&& m_appSettings->colorScheme() == Core::Settings::ColorScheme::Dark);

if (enableDarkMode) {
setCustomStyleSheet(QStringLiteral("_zeal_darkstylesheet"), DarkModeCssUrl);
}
#endif

if (m_appSettings->isHighlightOnNavigateEnabled) {
setCustomStyleSheet(QStringLiteral("_zeal_highlightstylesheet"), HighlightOnNavigateCssUrl);
Expand Down
41 changes: 38 additions & 3 deletions src/libs/core/settings.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

#include "application.h"

#include <QCoreApplication>
#include <QApplication>
#include <QDir>
#include <QFileInfo>
#include <QSettings>
Expand All @@ -34,6 +34,12 @@
#include <QWebEngineProfile>
#include <QWebEngineSettings>

#if QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)
#include <QStyleHints>
#else
#include <QPalette>
#endif

namespace {
// Configuration file groups
constexpr char GroupContent[] = "content";
Expand Down Expand Up @@ -63,6 +69,21 @@ Settings::~Settings()
save();
}

Zeal::Core::Settings::ColorScheme Settings::colorScheme()
{
#if QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)
return QApplication::styleHints()->colorScheme();
#else
// Pre Qt 6.5 detection from https://www.qt.io/blog/dark-mode-on-windows-11-with-qt-6.5.
const QPalette p;
if (p.color(QPalette::WindowText).lightness() > p.color(QPalette::Window).lightness()) {
return ColorScheme::Dark;
}

return ColorScheme::Light;
#endif
}

void Settings::load()
{
QScopedPointer<QSettings> settings(qsettings());
Expand All @@ -89,6 +110,21 @@ void Settings::load()
settings->endGroup();

settings->beginGroup(GroupContent);

// Dark mode needs to be applied before Qt WebEngine is initialized.
contentAppearance = settings->value(QStringLiteral("appearance"),
QVariant::fromValue(ContentAppearance::Automatic)).value<ContentAppearance>();

#if QT_VERSION >= QT_VERSION_CHECK(5, 14, 0)
const bool enableDarkMode
= contentAppearance == ContentAppearance::Dark
|| (contentAppearance == ContentAppearance::Automatic && colorScheme() == ColorScheme::Dark);

if (enableDarkMode) {
qputenv("QTWEBENGINE_CHROMIUM_FLAGS", "--blink-settings=forceDarkModeEnabled=true,darkModeInversionAlgorithm=4");
}
#endif

// Fonts
QWebEngineSettings *webSettings = QWebEngineProfile::defaultProfile()->settings();
serifFontFamily = settings->value(QStringLiteral("serif_font_family"),
Expand Down Expand Up @@ -130,7 +166,6 @@ void Settings::load()
webSettings->setFontSize(QWebEngineSettings::DefaultFixedFontSize, defaultFixedFontSize);
webSettings->setFontSize(QWebEngineSettings::MinimumFontSize, minimumFontSize);

isDarkModeEnabled = settings->value(QStringLiteral("dark_mode"), false).toBool();
isHighlightOnNavigateEnabled = settings->value(QStringLiteral("highlight_on_navigate"), true).toBool();
customCssFile = settings->value(QStringLiteral("custom_css_file")).toString();
externalLinkPolicy = settings->value(QStringLiteral("external_link_policy"),
Expand Down Expand Up @@ -219,7 +254,7 @@ void Settings::save()
settings->setValue(QStringLiteral("default_fixed_font_size"), defaultFixedFontSize);
settings->setValue(QStringLiteral("minimum_font_size"), minimumFontSize);

settings->setValue(QStringLiteral("dark_mode"), isDarkModeEnabled);
settings->setValue(QStringLiteral("appearance"), QVariant::fromValue(contentAppearance));
settings->setValue(QStringLiteral("highlight_on_navigate"), isHighlightOnNavigateEnabled);
settings->setValue(QStringLiteral("custom_css_file"), customCssFile);
settings->setValue(QStringLiteral("external_link_policy"), QVariant::fromValue(externalLinkPolicy));
Expand Down
22 changes: 21 additions & 1 deletion src/libs/core/settings.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,14 @@ class Settings final : public QObject
Q_ENUM(ExternalLinkPolicy)
ExternalLinkPolicy externalLinkPolicy = ExternalLinkPolicy::Ask;

bool isDarkModeEnabled;
enum class ContentAppearance : unsigned int {
Automatic = 0,
Light,
Dark
};
Q_ENUM(ContentAppearance)
ContentAppearance contentAppearance = ContentAppearance::Automatic;

bool isHighlightOnNavigateEnabled;
QString customCssFile;
bool isSmoothScrollingEnabled;
Expand Down Expand Up @@ -118,6 +125,19 @@ class Settings final : public QObject
explicit Settings(QObject *parent = nullptr);
~Settings() override;

// Helper functions.
#if QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)
typedef Qt::ColorScheme ColorScheme;
#else
enum class ColorScheme {
Unknown,
Light,
Dark,
};
#endif

static ColorScheme colorScheme();

public slots:
void load();
void save();
Expand Down
22 changes: 20 additions & 2 deletions src/libs/ui/settingsdialog.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,18 @@ void SettingsDialog::loadSettings()
ui->fixedFontSizeComboBox->setCurrentText(QString::number(settings->defaultFixedFontSize));
ui->minFontSizeComboBox->setCurrentText(QString::number(settings->minimumFontSize));

ui->darkModeCheckBox->setChecked(settings->isDarkModeEnabled);
switch (settings->contentAppearance) {
case Core::Settings::ContentAppearance::Automatic:
ui->appearanceAutoRadioButton->setChecked(true);
break;
case Core::Settings::ContentAppearance::Light:
ui->appearanceLightRadioButton->setChecked(true);
break;
case Core::Settings::ContentAppearance::Dark:
ui->appearanceDarkRadioButton->setChecked(true);
break;
}

ui->highlightOnNavigateCheckBox->setChecked(settings->isHighlightOnNavigateEnabled);
ui->customCssFileEdit->setText(QDir::toNativeSeparators(settings->customCssFile));

Expand Down Expand Up @@ -278,7 +289,14 @@ void SettingsDialog::saveSettings()
settings->defaultFixedFontSize = ui->fixedFontSizeComboBox->currentData().toInt();
settings->minimumFontSize = ui->minFontSizeComboBox->currentData().toInt();

settings->isDarkModeEnabled = ui->darkModeCheckBox->isChecked();
if (ui->appearanceAutoRadioButton->isChecked()) {
settings->contentAppearance = Core::Settings::ContentAppearance::Automatic;
} else if (ui->appearanceLightRadioButton->isChecked()) {
settings->contentAppearance = Core::Settings::ContentAppearance::Light;
} else if (ui->appearanceDarkRadioButton->isChecked()) {
settings->contentAppearance = Core::Settings::ContentAppearance::Dark;
}

settings->isHighlightOnNavigateEnabled = ui->highlightOnNavigateCheckBox->isChecked();
settings->customCssFile = QDir::fromNativeSeparators(ui->customCssFileEdit->text());

Expand Down
143 changes: 92 additions & 51 deletions src/libs/ui/settingsdialog.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,98 @@
<string>Content</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_3">
<item>
<widget class="QGroupBox" name="styleGroupBox">
<property name="title">
<string>Style</string>
</property>
<layout class="QVBoxLayout" name="verticalLayout_17">
<item>
<layout class="QHBoxLayout" name="horizontalLayout_4">
<item>
<widget class="QLabel" name="appearanceLabel">
<property name="text">
<string>Appearance (requires restart):</string>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="appearanceAutoRadioButton">
<property name="text">
<string>A&amp;utomatic</string>
</property>
<property name="checked">
<bool>true</bool>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="appearanceLightRadioButton">
<property name="text">
<string>&amp;Light</string>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="appearanceDarkRadioButton">
<property name="text">
<string>&amp;Dark</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_3">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</item>
<item>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QLabel" name="customCssFileLabel">
<property name="text">
<string>&amp;Custom CSS file:</string>
</property>
<property name="buddy">
<cstring>customCssFileEdit</cstring>
</property>
</widget>
</item>
<item>
<widget class="QLineEdit" name="customCssFileEdit">
<property name="clearButtonEnabled">
<bool>true</bool>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="customCssFileBrowseButton">
<property name="text">
<string>Bro&amp;wse…</string>
</property>
</widget>
</item>
</layout>
</item>
<item>
<widget class="QCheckBox" name="highlightOnNavigateCheckBox">
<property name="text">
<string>&amp;Highlight on navigate</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QGroupBox" name="fontsGroupBox">
<property name="title">
Expand Down Expand Up @@ -405,57 +497,6 @@
</layout>
</widget>
</item>
<item>
<widget class="QGroupBox" name="styleGroupBox">
<property name="title">
<string>Style</string>
</property>
<layout class="QFormLayout" name="formLayout_5">
<item row="1" column="0" colspan="2">
<widget class="QCheckBox" name="darkModeCheckBox">
<property name="text">
<string>&amp;Dark mode</string>
</property>
</widget>
</item>
<item row="2" column="0" colspan="2">
<widget class="QCheckBox" name="highlightOnNavigateCheckBox">
<property name="text">
<string>&amp;Highlight on navigate</string>
</property>
</widget>
</item>
<item row="3" column="0" colspan="2">
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QLabel" name="customCssFileLabel">
<property name="text">
<string>&amp;Custom CSS file:</string>
</property>
<property name="buddy">
<cstring>customCssFileEdit</cstring>
</property>
</widget>
</item>
<item>
<widget class="QLineEdit" name="customCssFileEdit">
<property name="clearButtonEnabled">
<bool>true</bool>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="customCssFileBrowseButton">
<property name="text">
<string>Bro&amp;wse…</string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QGroupBox" name="groupBox_7">
<property name="title">
Expand Down

0 comments on commit b5ca9e7

Please sign in to comment.