Add brave theme option to settings page

app/brave_generated_resources.grd

@@ -138,6 +138,10 @@ By installing this extension, you are agreeing to the Google Widevine Terms of U
       <message name="IDS_BLOCKED_AUTOPLAY_NO_ACTION" desc="Radio button choice to continue blocking a site from autoplay media, displayed in bubble when a page tries to autoplay media.">
         Continue blocking autoplay
       </message>
+      <!-- Appearance -->
+      <message name="IDS_SETTINGS_APPEARANCE_SETTINGS_BRAVE_THEMES" desc="The label for brave theme change setting options">
+        Brave Themes
+      </message>
     </messages>
     <includes>
       <include name="IDR_BRAVE_TAG_SERVICES_POLYFILL" file="resources/js/tag_services_polyfill.js" type="BINDATA" />

browser/ui/BUILD.gn

@@ -49,6 +49,8 @@ source_set("ui") {
     "webui/brave_webui_source.h",
     "webui/brave_welcome_ui.cc",
     "webui/brave_welcome_ui.h",
+    "webui/settings/brave_appearance_handler.cc",
+    "webui/settings/brave_appearance_handler.h",
   ]
 
   if (is_linux) {

browser/ui/webui/brave_md_settings_ui.cc

@@ -4,14 +4,14 @@
 
 #include "brave/browser/ui/webui/brave_md_settings_ui.h"
 
+#include "brave/browser/ui/webui/settings/brave_appearance_handler.h"
 #include "chrome/browser/ui/webui/settings/metrics_reporting_handler.h"
 
 BraveMdSettingsUI::BraveMdSettingsUI(content::WebUI* web_ui,
                                      const std::string& host)
     : MdSettingsUI(web_ui) {
-#if defined(BRAVE_CHROMIUM_BUILD)
   web_ui->AddMessageHandler(std::make_unique<settings::MetricsReportingHandler>());
-#endif
+  web_ui->AddMessageHandler(std::make_unique<BraveAppearanceHandler>());
 }
 
 BraveMdSettingsUI::~BraveMdSettingsUI() {

browser/ui/webui/settings/brave_appearance_handler.cc

@@ -0,0 +1,84 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "brave/browser/ui/webui/settings/brave_appearance_handler.h"
+
+#include <string>
+
+#include "base/bind.h"
+#include "base/values.h"
+#include "brave/browser/themes/brave_theme_service.h"
+#include "brave/common/pref_names.h"
+#include "chrome/browser/profiles/profile.h"
+#include "components/prefs/pref_service.h"
+#include "content/public/browser/web_ui.h"
+
+namespace {
+void SetBraveThemeTypePref(Profile* profile,
+                           BraveThemeService::BraveThemeType type) {
+  profile->GetPrefs()->SetInteger(kBraveThemeType, type);
+}
+
+BraveThemeService::BraveThemeType GetBraveThemeTypeFromString(
+    base::StringPiece theme) {
+  if (theme == "Default")
+    return BraveThemeService::BRAVE_THEME_TYPE_DEFAULT;
+
+  if (theme == "Light")
+    return BraveThemeService::BRAVE_THEME_TYPE_LIGHT;
+
+  if (theme == "Dark")
+    return BraveThemeService::BRAVE_THEME_TYPE_DARK;
+
+  NOTREACHED();
+  return BraveThemeService::BRAVE_THEME_TYPE_DEFAULT;
+}
+
+std::string GetStringFromBraveThemeType(
+    BraveThemeService::BraveThemeType theme) {
+  switch (theme) {
+    case BraveThemeService::BRAVE_THEME_TYPE_DEFAULT:
+      return "Default";
+    case BraveThemeService::BRAVE_THEME_TYPE_LIGHT:
+      return "Light";
+    case BraveThemeService::BRAVE_THEME_TYPE_DARK:
+      return "Dark";
+    default:
+      NOTREACHED();
+  }
+}
+}  // namespace
+
+void BraveAppearanceHandler::RegisterMessages() {
+  profile_ = Profile::FromWebUI(web_ui());
+
+  web_ui()->RegisterMessageCallback(
+      "getBraveThemeType",
+      base::BindRepeating(&BraveAppearanceHandler::GetBraveThemeType,
+                          base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "setBraveThemeType",
+      base::BindRepeating(&BraveAppearanceHandler::SetBraveThemeType,
+                          base::Unretained(this)));
+}
+
+void BraveAppearanceHandler::SetBraveThemeType(const base::ListValue* args) {
+  CHECK_EQ(args->GetSize(), 1U);
+  CHECK(profile_);
+
+  std::string theme;
+  args->GetString(0, &theme);
+  SetBraveThemeTypePref(profile_, GetBraveThemeTypeFromString(theme));
+}
+
+void BraveAppearanceHandler::GetBraveThemeType(const base::ListValue* args) {
+  CHECK_EQ(args->GetSize(), 1U);
+  CHECK(profile_);
+
+  AllowJavascript();
+  ResolveJavascriptCallback(
+      args->GetList()[0].Clone(),
+      base::Value(GetStringFromBraveThemeType(
+          BraveThemeService::GetBraveThemeType(profile_))));
+}

browser/ui/webui/settings/brave_appearance_handler.h

@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef BRAVE_BROWSER_UI_WEBUI_SETTINGS_BRAVE_APPEARANCE_HANDLER_H_
+#define BRAVE_BROWSER_UI_WEBUI_SETTINGS_BRAVE_APPEARANCE_HANDLER_H_
+
+#include "chrome/browser/ui/webui/settings/settings_page_ui_handler.h"
+
+class Profile;
+
+class BraveAppearanceHandler : public settings::SettingsPageUIHandler {
+ public:
+  BraveAppearanceHandler() = default;
+  ~BraveAppearanceHandler() override = default;
+
+ private:
+  // SettingsPageUIHandler overrides:
+  void RegisterMessages() override;
+  void OnJavascriptAllowed() override {}
+  void OnJavascriptDisallowed() override {}
+
+  void SetBraveThemeType(const base::ListValue* args);
+  void GetBraveThemeType(const base::ListValue* args);
+
+  Profile* profile_ = nullptr;
+
+  DISALLOW_COPY_AND_ASSIGN(BraveAppearanceHandler);
+};
+
+#endif  // BRAVE_BROWSER_UI_WEBUI_SETTINGS_BRAVE_APPEARANCE_HANDLER_H_

chromium_src/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -26,7 +26,9 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source, Profile* profi
     {"siteSettingsAutoplayAsk",
       IDS_SETTINGS_SITE_SETTINGS_AUTOPLAY_ASK},
     {"siteSettingsAutoplayAskRecommended",
-      IDS_SETTINGS_SITE_SETTINGS_AUTOPLAY_ASK_RECOMMENDED}
+      IDS_SETTINGS_SITE_SETTINGS_AUTOPLAY_ASK_RECOMMENDED},
+    {"appearanceSettingsBraveTheme",
+      IDS_SETTINGS_APPEARANCE_SETTINGS_BRAVE_THEMES},
   };
   AddLocalizedStringsBulk(html_source, localized_strings,
                           arraysize(localized_strings));

patches/chrome-browser-resources-settings-appearance_page-appearance_browser_proxy.js.patch

@@ -0,0 +1,41 @@
+diff --git a/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js b/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js
+index c75464dc66ecedd8dbfac47b0dbdb4b6c68fd969..fd62faf174909c5c385277c08bb782bd4127d442 100644
+--- a/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js
++++ b/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js
+@@ -45,6 +45,17 @@ cr.define('settings', function() {
+      * @return {!Promise<boolean>}
+      */
+     validateStartupPage(url) {}
++
++    // <if expr="not _google_chrome">
++    /**
++     * @return {!Promise<string>}
++     */
++    getBraveThemeType() {}
++    /**
++     * @param {string} theme name.
++     */
++    setBraveThemeType(theme) {}
++    // </if>
+   }
+
+   /**
+@@ -105,6 +116,18 @@ cr.define('settings', function() {
+     validateStartupPage(url) {
+       return cr.sendWithPromise('validateStartupPage', url);
+     }
++
++    // <if expr="not _google_chrome">
++    /** @override */
++    getBraveThemeType() {
++      return cr.sendWithPromise('getBraveThemeType');
++    }
++
++    /** @override */
++    setBraveThemeType(theme) {
++      chrome.send('setBraveThemeType', [theme]);
++    }
++    // </if>
+   }
+
+   cr.addSingletonGetter(AppearanceBrowserProxyImpl);

patches/chrome-browser-resources-settings-appearance_page-appearance_page.html.patch

@@ -0,0 +1,25 @@
+diff --git a/chrome/browser/resources/settings/appearance_page/appearance_page.html b/chrome/browser/resources/settings/appearance_page/appearance_page.html
+index 720d25d126a118315a08cef90d77d1fc78775254..5072dfc50d1108b2eea75c6079ae144395d5c04b 100644
+--- a/chrome/browser/resources/settings/appearance_page/appearance_page.html
++++ b/chrome/browser/resources/settings/appearance_page/appearance_page.html
+@@ -175,6 +175,20 @@
+             </template>
+           </select>
+         </div>
++<if expr="not _google_chrome">
++        <div class="settings-box">
++          <div class="start">$i18n{appearanceSettingsBraveTheme}</div>
++          <select id="braveThemeType" class="md-select"
++              on-change="onBraveThemeTypeChange_">
++            <template is="dom-repeat" items="[[braveThemeTypes_]]">
++              <option value="[[item]]"
++                  selected="[[braveThemeTypeEqual_(item, braveThemeType_)]]">
++                [[item]]
++              </option>
++            </template>
++          </select>
++        </div>
++</if>
+ <if expr="is_macosx">
+         <settings-toggle-button pref="{{prefs.webkit.webprefs.tabs_to_links}}"
+             label="$i18n{tabsToLinks}">

patches/chrome-browser-resources-settings-appearance_page-appearance_page.js.patch

@@ -0,0 +1,59 @@
+diff --git a/chrome/browser/resources/settings/appearance_page/appearance_page.js b/chrome/browser/resources/settings/appearance_page/appearance_page.js
+index 1c7e3474a595250da00bc9249a047e4e1eae1786..e585821e63703e66c9f06f928ec35713d15f570f 100644
+--- a/chrome/browser/resources/settings/appearance_page/appearance_page.js
++++ b/chrome/browser/resources/settings/appearance_page/appearance_page.js
+@@ -87,6 +87,20 @@ Polymer({
+       ],
+     },
+
++    // <if expr="not _google_chrome">
++    braveThemeTypes_: {
++      readOnly: true,
++      type: Array,
++      value: [
++        'Default',
++        'Light',
++        'Dark',
++      ],
++    },
++
++    braveThemeType_: String,
++    // </if>
++
+     /** @private */
+     themeSublabel_: String,
+
+@@ -150,6 +164,11 @@ Polymer({
+           this.isWallpaperPolicyControlled_ = isPolicyControlled;
+         });
+     // </if>
++    // <if expr="not _google_chrome">
++    this.browserProxy_.getBraveThemeType().then(theme => {
++      this.braveThemeType_ = theme;
++    });
++    // </if>
+   },
+
+   /**
+@@ -323,5 +342,21 @@ Polymer({
+   zoomValuesEqual_: function(zoom1, zoom2) {
+     return Math.abs(zoom1 - zoom2) <= 0.001;
+   },
++
++  // <if expr="not _google_chrome">
++  /**
++   * @param {string} theme1
++   * @param {string} theme2
++   * @return {boolean}
++   * @private
++   */
++  braveThemeTypeEqual_: function(theme1, theme2) {
++    return theme1 === theme2;
++  },
++
++  onBraveThemeTypeChange_: function() {
++    this.browserProxy_.setBraveThemeType(this.$.braveThemeType.value);
++  },
++  // </if>
+ });
+ })();