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 colors
+      </message>
     </messages>
     <includes>
       <include name="IDR_BRAVE_TAG_SERVICES_POLYFILL" file="resources/js/tag_services_polyfill.js" type="BINDATA" />

browser/resources/settings/brave_appearance_page/brave_appearance_browser_proxy.html

@@ -0,0 +1,2 @@
+<link rel="href" src="chrome://resources/html/cr.html">
+<script src="brave_appearance_browser_proxy.js"></script>

browser/resources/settings/brave_appearance_page/brave_appearance_browser_proxy.js

@@ -0,0 +1,39 @@
+/* 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/. */
+
+cr.define('settings', function() {
+  /** @interface */
+  class BraveAppearanceBrowserProxy {
+    /**
+     * @return {!Promise<string>}
+     */
+    getBraveThemeType() {}
+    /**
+     * @param {string} theme name.
+     */
+    setBraveThemeType(theme) {}
+  }
+
+  /**
+   * @implements {settings.BraveAppearanceBrowserProxy}
+   */
+  class BraveAppearanceBrowserProxyImpl {
+    /** @override */
+    getBraveThemeType() {
+      return cr.sendWithPromise('getBraveThemeType');
+    }
+
+    /** @override */
+    setBraveThemeType(theme) {
+      chrome.send('setBraveThemeType', [theme]);
+    }
+  }
+
+  cr.addSingletonGetter(BraveAppearanceBrowserProxyImpl);
+
+  return {
+    BraveAppearanceBrowserProxy: BraveAppearanceBrowserProxy,
+    BraveAppearanceBrowserProxyImpl: BraveAppearanceBrowserProxyImpl,
+  };
+});

browser/resources/settings/brave_appearance_page/brave_appearance_page.html

@@ -0,0 +1,27 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
+<link rel="import" href="brave_appearance_browser_proxy.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../settings_vars_css.html">
+
+<dom-module id="settings-brave-appearance-page">
+  <template>
+    <style include="settings-shared md-select iron-flex">
+    </style>
+    <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>
+  </template>
+  <script src="brave_appearance_page.js"></script>
+</dom-module>

browser/resources/settings/brave_appearance_page/brave_appearance_page.js

@@ -0,0 +1,57 @@
+/* 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/. */
+
+(function() {
+'use strict';
+
+/**
+ * 'settings-brave-appearance-page' is the settings page containing brave's
+ * appearance settings.
+ */
+Polymer({
+  is: 'settings-brave-appearance-page',
+
+  properties: {
+    braveThemeTypes_: {
+      readOnly: true,
+      type: Array,
+      value: [
+        'Default',
+        'Light',
+        'Dark',
+      ],
+    },
+    braveThemeType_: String,
+  },
+
+  /** @private {?settings.BraveAppearanceBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  created: function() {
+    this.browserProxy_ = settings.BraveAppearanceBrowserProxyImpl.getInstance();
+  },
+
+  /** @override */
+  ready: function() {
+    this.browserProxy_.getBraveThemeType().then(theme => {
+      this.braveThemeType_ = theme;
+    });
+  },
+
+  /**
+   * @param {string} theme1
+   * @param {string} theme2
+   * @return {boolean}
+   * @private
+   */
+  braveThemeTypeEqual_: function(theme1, theme2) {
+    return theme1 === theme2;
+  },
+
+  onBraveThemeTypeChange_: function() {
+    this.browserProxy_.setBraveThemeType(this.$.braveThemeType.value);
+  },
+});
+})();

browser/resources/settings/settings_resources.grd

@@ -52,7 +52,7 @@
       <structure name="IDR_SETTINGS_APPEARANCE_FONTS_PAGE_HTML" file="appearance_page/appearance_fonts_page.html" type="chrome_html" allowexternalscript="true" preprocess="true" />
       <structure name="IDR_SETTINGS_APPEARANCE_FONTS_PAGE_JS" file="appearance_page/appearance_fonts_page.js" type="chrome_html" />
       <structure name="IDR_SETTINGS_APPEARANCE_PAGE_HTML" file="appearance_page/appearance_page.html" type="chrome_html" preprocess="true" allowexternalscript="true" />
-      <structure name="IDR_SETTINGS_APPEARANCE_PAGE_JS" file="appearance_page/appearance_page.js" type="chrome_html" preprocess="true" />
+      <structure name="IDR_SETTINGS_APPEARANCE_PAGE_JS" file="appearance_page/appearance_page.js" type="chrome_html" preprocess="true" /><structure name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_HTML" file="brave_appearance_page/brave_appearance_browser_proxy.html" type="chrome_html" /><structure name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_JS" file="brave_appearance_page/brave_appearance_browser_proxy.js" type="chrome_html" preprocess="true" /><structure name="IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_JS" file="brave_appearance_page/brave_appearance_page.js" type="chrome_html" preprocess="true" /><structure name="IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_HTML" file="brave_appearance_page/brave_appearance_page.html" type="chrome_html" preprocess="true" allowexternalscript="true" />
       <structure name="IDR_SETTINGS_APPEARANCE_HOME_URL_INPUT_HTML" file="appearance_page/home_url_input.html" type="chrome_html" />
       <structure name="IDR_SETTINGS_APPEARANCE_HOME_URL_INPUT_JS" file="appearance_page/home_url_input.js" type="chrome_html" />
       <structure name="IDR_SETTINGS_BASIC_PAGE_JS" file="basic_page/basic_page.js" preprocess="true" type="chrome_html" />

browser/ui/BUILD.gn

@@ -59,6 +59,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_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..b000205ff1ca4d4d62c53abffa93df237fc05756 100644
+--- a/chrome/browser/resources/settings/appearance_page/appearance_page.html
++++ b/chrome/browser/resources/settings/appearance_page/appearance_page.html
+@@ -19,6 +19,10 @@
+ <link rel="import" href="appearance_fonts_page.html">
+ <link rel="import" href="home_url_input.html">
+
++<if expr="not _google_chrome">
++<link rel="import" href="../brave_appearance_page/brave_appearance_page.html">
++</if>
++
+ <dom-module id="settings-appearance-page">
+   <template>
+     <style include="settings-shared md-select iron-flex">
+@@ -102,6 +106,9 @@
+           </div>
+ </if>
+         </div>
++ <if expr="not _google_chrome">
++        <settings-brave-appearance-page></settings-brave-appearance-page>
++</if>
+         <settings-toggle-button elide-label
+             hidden="[[!pageVisibility.homeButton]]"
+             pref="{{prefs.browser.show_home_button}}"

script/chromium-rebase-l10n.py

@@ -48,6 +48,48 @@ def main():
         brave_page_visibility_element.set('type', 'chrome_html')
         page_visibility_element = xml_tree.xpath('//structure[@name="IDR_SETTINGS_PAGE_VISIBILITY_JS"]')[0]
         page_visibility_element.addprevious(brave_page_visibility_element)
+
+    # Add four resources for brave theme options
+    # Add IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_HTML(brave_appearance_browser_proxy.html)
+    brave_appearance_browser_proxy_html_element_len = len(xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_HTML"]'))
+    if brave_appearance_browser_proxy_html_element_len == 0:
+        brave_appearance_browser_proxy_html_element = etree.Element('structure')
+        brave_appearance_browser_proxy_html_element.set('name', 'IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_HTML')
+        brave_appearance_browser_proxy_html_element.set('file', 'brave_appearance_page/brave_appearance_browser_proxy.html')
+        brave_appearance_browser_proxy_html_element.set('type', 'chrome_html')
+        appearance_page_js_element = xml_tree.xpath('//structure[@name="IDR_SETTINGS_APPEARANCE_PAGE_JS"]')[0]
+        appearance_page_js_element.addnext(brave_appearance_browser_proxy_html_element)
+    # Add IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_JS(brave_appearance_browser_proxy.js)
+    brave_appearance_browser_proxy_js_element_len = len(xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_JS"]'))
+    if brave_appearance_browser_proxy_js_element_len == 0:
+        brave_appearance_browser_proxy_js_element = etree.Element('structure')
+        brave_appearance_browser_proxy_js_element.set('name', 'IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_JS')
+        brave_appearance_browser_proxy_js_element.set('file', 'brave_appearance_page/brave_appearance_browser_proxy.js')
+        brave_appearance_browser_proxy_js_element.set('type', 'chrome_html')
+        brave_appearance_browser_proxy_js_element.set('preprocess', 'true')
+        brave_appearance_browser_proxy_html_element = xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_HTML"]')[0]
+        brave_appearance_browser_proxy_html_element.addnext(brave_appearance_browser_proxy_js_element)
+    # Add IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_HTML(brave_appearance_page.html)
+    brave_appearance_page_html_element_len = len(xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_HTML"]'))
+    if brave_appearance_page_html_element_len == 0:
+        brave_appearance_page_html_element = etree.Element('structure')
+        brave_appearance_page_html_element.set('name', 'IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_HTML')
+        brave_appearance_page_html_element.set('file', 'brave_appearance_page/brave_appearance_page.html')
+        brave_appearance_page_html_element.set('type', 'chrome_html')
+        brave_appearance_page_html_element.set('preprocess', 'true')
+        brave_appearance_page_html_element.set('allowexternalscript', 'true')
+        brave_appearance_browser_proxy_js_element = xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_JS"]')[0]
+        brave_appearance_browser_proxy_js_element.addnext(brave_appearance_page_html_element)
+    # Add IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_JS(brave_appearance_page.js)
+    brave_appearance_page_js_element_len = len(xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_JS"]'))
+    if brave_appearance_page_js_element_len == 0:
+        brave_appearance_page_js_element = etree.Element('structure')
+        brave_appearance_page_js_element.set('name', 'IDR_SETTINGS_BRAVE_APPEARANCE_PAGE_JS')
+        brave_appearance_page_js_element.set('file', 'brave_appearance_page/brave_appearance_page.js')
+        brave_appearance_page_js_element.set('type', 'chrome_html')
+        brave_appearance_page_js_element.set('preprocess', 'true')
+        brave_appearance_page_html_element = xml_tree.xpath('//structure[@name="IDR_SETTINGS_BRAVE_APPEARANCE_BROWSER_PROXY_JS"]')[0]
+        brave_appearance_page_html_element.addnext(brave_appearance_page_js_element)
   if filename == 'browser_resources':
     elem1 = xml_tree.xpath('//include[@name="IDR_MD_HISTORY_SIDE_BAR_HTML"]')[0]
     elem1.set('flattenhtml', 'true')