feat(browser): use native Chromium dark mode (#1494)

2024-08-17 02:00:25 +03:00 · 2023-04-30 02:29:03 -04:00 · 2023-04-30 02:29:03 -04:00 · b5ca9e70dd
commit b5ca9e70dd
parent 0f0c2dc47a
5 changed files with 180 additions and 58 deletions
--- a/src/libs/browser/settings.cpp
+++ b/src/libs/browser/settings.cpp
@ -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);
--- a/src/libs/core/settings.cpp
+++ b/src/libs/core/settings.cpp
@ -24,7 +24,7 @@

 #include "application.h"

-#include <QCoreApplication>
+#include <QApplication>
 #include <QDir>
 #include <QFileInfo>
 #include <QSettings>
@ -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";
@ -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());
@ -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"),
@ -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"),
@ -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));
--- a/src/libs/core/settings.h
+++ b/src/libs/core/settings.h
@ -79,7 +79,14 @@ public:
    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;
@ -118,6 +125,19 @@ public:
    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();
--- a/src/libs/ui/settingsdialog.cpp
+++ b/src/libs/ui/settingsdialog.cpp
@ -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));

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

--- a/src/libs/ui/settingsdialog.ui
+++ b/src/libs/ui/settingsdialog.ui
@ -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">
@ -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">