From f701879f1cf8c474b3990627a4709fcdcd9f5018 Mon Sep 17 00:00:00 2001
From: Irene Ni <ini@mozilla.com>
Date: Tue, 2 Apr 2024 00:08:46 +0000
Subject: [PATCH] Bug 1876432 -  Added support for custom themes as its own
 menu in Reader View.
 r=reader-mode-reviewers,fluent-reviewers,desktop-theme-reviewers,hjones,accessibility-frontend-reviewers,bolsson,devtools-reviewers,sfoster,cmkm,jules,ayeddi

Differential Revision: https://phabricator.services.mozilla.com/D204519
---
 .eslintrc-test-paths.js                       |   2 +-
 .eslintrc.js                                  |  24 +-
 .prettierignore                               |   4 +-
 .../extensions/test/browser/browser.toml      |   4 +-
 .../components/storybook/.storybook/main.js   |   2 +
 .../webconsole/test/browser/_jsterm.toml      |   2 +-
 ...itor_reverse_search_keyboard_navigation.js |   2 +-
 modules/libpref/init/all.js                   |  14 +-
 testing/runtimes/manifest-runtimes-unix.json  |   2 +-
 .../runtimes/manifest-runtimes-windows.json   |   2 +-
 .../narrate/NarrateControls.sys.mjs           |   6 +-
 toolkit/components/reader/AboutReader.sys.mjs | 239 +++++++++++++-
 toolkit/components/reader/color-input.css     |  47 +++
 toolkit/components/reader/color-input.mjs     |  69 ++++
 .../components/reader/color-input.stories.mjs |  32 ++
 .../reader/content/aboutReader.html           |  71 +++-
 toolkit/components/reader/jar.mn              |   2 +
 toolkit/components/reader/moz.build           |   4 +-
 .../{test => tests/browser}/browser.toml      |   0
 .../browser_bug1124271_readerModePinnedTab.js |   0
 .../browser_bug1453818_samesite_cookie.js     |   0
 ...browser_bug1780350_readerModeSaveScroll.js |   0
 .../browser}/browser_drag_url_readerMode.js   |   0
 .../browser}/browser_localfile_readerMode.js  |   0
 .../browser}/browser_readerMode.js            |   0
 .../browser}/browser_readerMode_bc_reuse.js   |   0
 .../browser}/browser_readerMode_cached.js     |   2 +-
 .../browser_readerMode_colorSchemePref.js     |  54 +++
 .../browser_readerMode_hidden_nodes.js        |   0
 .../browser}/browser_readerMode_menu.js       |  44 +--
 .../browser}/browser_readerMode_pocket.js     |   0
 .../browser_readerMode_readingTime.js         |   0
 .../browser}/browser_readerMode_refresh.js    |   0
 .../browser}/browser_readerMode_remoteType.js |   0
 ...ser_readerMode_samesite_cookie_redirect.js |   0
 .../browser_readerMode_with_anchor.js         |   0
 .../{test => tests/browser}/getCookies.sjs    |   0
 .../reader/{test => tests/browser}/head.js    |   0
 .../browser}/linkToGetCookies.html            |   2 +-
 .../browser}/readerModeArticle.html           |   0
 .../readerModeArticleContainsLink.html        |   2 +-
 .../readerModeArticleHiddenNodes.html         |   0
 .../browser}/readerModeArticleMedium.html     |   0
 .../browser}/readerModeArticleShort.html      |   0
 .../browser}/readerModeArticleTextPlain.txt   |   0
 .../browser}/readerModeNonArticle.html        |   0
 .../browser}/readerModeRandom.sjs             |   0
 .../browser}/setSameSiteCookie.html           |   0
 .../browser}/setSameSiteCookie.html^headers^  |   0
 .../reader/tests/chrome/chrome.toml           |   3 +
 .../reader/tests/chrome/test_color_input.html |  39 +++
 .../en-US/chrome/global/narrate.properties    |   2 +-
 .../en-US/toolkit/about/aboutReader.ftl       |  49 ++-
 toolkit/modules/AsyncPrefs.sys.mjs            |   5 +
 toolkit/themes/shared/aboutReader.css         | 307 +++++++++++++-----
 toolkit/themes/shared/desktop-jar.inc.mn      |   1 -
 toolkit/themes/shared/narrate.css             |  26 +-
 .../shared/reader/RM-Type-Controls-Arrow.svg  |   7 -
 58 files changed, 884 insertions(+), 187 deletions(-)
 create mode 100644 toolkit/components/reader/color-input.css
 create mode 100644 toolkit/components/reader/color-input.mjs
 create mode 100644 toolkit/components/reader/color-input.stories.mjs
 rename toolkit/components/reader/{test => tests/browser}/browser.toml (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_bug1124271_readerModePinnedTab.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_bug1453818_samesite_cookie.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_bug1780350_readerModeSaveScroll.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_drag_url_readerMode.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_localfile_readerMode.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_bc_reuse.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_cached.js (97%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_colorSchemePref.js (54%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_hidden_nodes.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_menu.js (60%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_pocket.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_readingTime.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_refresh.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_remoteType.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_samesite_cookie_redirect.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/browser_readerMode_with_anchor.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/getCookies.sjs (100%)
 rename toolkit/components/reader/{test => tests/browser}/head.js (100%)
 rename toolkit/components/reader/{test => tests/browser}/linkToGetCookies.html (92%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeArticle.html (100%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeArticleContainsLink.html (98%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeArticleHiddenNodes.html (100%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeArticleMedium.html (100%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeArticleShort.html (100%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeArticleTextPlain.txt (100%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeNonArticle.html (100%)
 rename toolkit/components/reader/{test => tests/browser}/readerModeRandom.sjs (100%)
 rename toolkit/components/reader/{test => tests/browser}/setSameSiteCookie.html (100%)
 rename toolkit/components/reader/{test => tests/browser}/setSameSiteCookie.html^headers^ (100%)
 create mode 100644 toolkit/components/reader/tests/chrome/chrome.toml
 create mode 100644 toolkit/components/reader/tests/chrome/test_color_input.html
 delete mode 100644 toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg

diff --git a/.eslintrc-test-paths.js b/.eslintrc-test-paths.js
index ddbdea85e0f6..b9c29e6f1705 100644
--- a/.eslintrc-test-paths.js
+++ b/.eslintrc-test-paths.js
@@ -217,7 +217,7 @@ const extraBrowserTestPaths = [
   "toolkit/components/pdfjs/test/",
   "toolkit/components/pictureinpicture/tests/",
   "toolkit/components/printing/tests/",
-  "toolkit/components/reader/test/",
+  "toolkit/components/reader/tests/",
   "toolkit/components/thumbnails/test/",
   "toolkit/components/tooltiptext/tests/",
   "toolkit/components/windowcreator/test/",
diff --git a/.eslintrc.js b/.eslintrc.js
index f69a1533df24..614450ab4521 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2078,18 +2078,18 @@ module.exports = {
         "toolkit/components/processtools/tests/browser/browser_test_procinfo.js",
         "toolkit/components/prompts/test/test_modal_prompts.html",
         "toolkit/components/prompts/test/test_subresources_prompts.html",
-        "toolkit/components/reader/test/browser_bug1453818_samesite_cookie.js",
-        "toolkit/components/reader/test/browser_drag_url_readerMode.js",
-        "toolkit/components/reader/test/browser_readerMode_bc_reuse.js",
-        "toolkit/components/reader/test/browser_readerMode_colorSchemePref.js",
-        "toolkit/components/reader/test/browser_readerMode_hidden_nodes.js",
-        "toolkit/components/reader/test/browser_readerMode_menu.js",
-        "toolkit/components/reader/test/browser_readerMode_pocket.js",
-        "toolkit/components/reader/test/browser_readerMode_readingTime.js",
-        "toolkit/components/reader/test/browser_readerMode_refresh.js",
-        "toolkit/components/reader/test/browser_readerMode_remoteType.js",
-        "toolkit/components/reader/test/browser_readerMode_samesite_cookie_redirect.js",
-        "toolkit/components/reader/test/browser_readerMode_with_anchor.js",
+        "toolkit/components/reader/tests/browser/browser_bug1453818_samesite_cookie.js",
+        "toolkit/components/reader/tests/browser/browser_drag_url_readerMode.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_bc_reuse.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_colorSchemePref.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_hidden_nodes.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_menu.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_pocket.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_readingTime.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_refresh.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_remoteType.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_samesite_cookie_redirect.js",
+        "toolkit/components/reader/tests/browser/browser_readerMode_with_anchor.js",
         "toolkit/components/resistfingerprinting/tests/test_spoof_english.html",
         "toolkit/components/satchel/test/browser/browser_privbrowsing_perwindowpb.js",
         "toolkit/components/startup/tests/browser/browser_bug511456.js",
diff --git a/.prettierignore b/.prettierignore
index f3e0bfbd5b0c..dbfc022d782c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -953,8 +953,8 @@ toolkit/components/places/tests/unit/bookmarks_html_localized.html
 toolkit/components/places/tests/unit/bookmarks_html_singleframe.html
 toolkit/components/printing/tests/simplifyArticleSample.html
 toolkit/components/processtools/tests/browser/dummy.html
-toolkit/components/reader/test/readerModeArticleMedium.html
-toolkit/components/reader/test/readerModeArticleShort.html
+toolkit/components/reader/tests/browser/readerModeArticleMedium.html
+toolkit/components/reader/tests/browser/readerModeArticleShort.html
 toolkit/components/translations/content/translations.html
 toolkit/components/translations/tests/browser/translations-tester-no-tag.html
 toolkit/components/url-classifier/tests/mochitest/classifiedAnnotatedFrame.html
diff --git a/browser/components/extensions/test/browser/browser.toml b/browser/components/extensions/test/browser/browser.toml
index f68b3b94a1d6..790f7b2770f2 100644
--- a/browser/components/extensions/test/browser/browser.toml
+++ b/browser/components/extensions/test/browser/browser.toml
@@ -46,8 +46,8 @@ support-files = [
   "empty.xpi",
   "../../../../../toolkit/components/extensions/test/mochitest/head_webrequest.js",
   "../../../../../toolkit/components/extensions/test/mochitest/redirection.sjs",
-  "../../../../../toolkit/components/reader/test/readerModeNonArticle.html",
-  "../../../../../toolkit/components/reader/test/readerModeArticle.html",
+  "../../../../../toolkit/components/reader/tests/browser/readerModeNonArticle.html",
+  "../../../../../toolkit/components/reader/tests/browser/readerModeArticle.html",
 ]
 skip-if = ["os == 'linux' && os_version == '18.04' && asan"] # Bug 1721945 - Software WebRender
 
diff --git a/browser/components/storybook/.storybook/main.js b/browser/components/storybook/.storybook/main.js
index f658204a6545..29085cd8e688 100644
--- a/browser/components/storybook/.storybook/main.js
+++ b/browser/components/storybook/.storybook/main.js
@@ -19,6 +19,8 @@ module.exports = {
     `${projectRoot}/toolkit/content/widgets/**/*.stories.@(js|jsx|mjs|ts|tsx|md)`,
     // about:logins components stories
     `${projectRoot}/browser/components/aboutlogins/content/components/**/*.stories.mjs`,
+    // Reader View components stories
+    `${projectRoot}/toolkit/components/reader/**/*.stories.mjs`,
     // Everything else
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx|md)",
     // Design system files
diff --git a/devtools/client/webconsole/test/browser/_jsterm.toml b/devtools/client/webconsole/test/browser/_jsterm.toml
index c9be46216a3d..fd23edd9c6f4 100644
--- a/devtools/client/webconsole/test/browser/_jsterm.toml
+++ b/devtools/client/webconsole/test/browser/_jsterm.toml
@@ -28,7 +28,7 @@ support-files = [
   "!/devtools/client/framework/browser-toolbox/test/helpers-browser-toolbox.js",
   "!/devtools/client/shared/test/telemetry-test-helpers.js",
   "!/devtools/client/shared/test/highlighter-test-actor.js",
-   "../../../../../toolkit/components/reader/test/readerModeArticle.html",
+   "../../../../../toolkit/components/reader/tests/browser/readerModeArticle.html",
 ]
 
 ["browser_jsterm_add_edited_input_to_history.js"]
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_editor_reverse_search_keyboard_navigation.js b/devtools/client/webconsole/test/browser/browser_jsterm_editor_reverse_search_keyboard_navigation.js
index 2a88433a86ff..bbdc251107df 100644
--- a/devtools/client/webconsole/test/browser/browser_jsterm_editor_reverse_search_keyboard_navigation.js
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_editor_reverse_search_keyboard_navigation.js
@@ -6,7 +6,7 @@
 // Ensure keyboard navigation works in editor mode and does
 // not trigger reader mode (See 1682340).
 
-const TEST_URI = `http://example.com/browser/toolkit/components/reader/test/readerModeArticle.html`;
+const TEST_URI = `http://example.com/browser/toolkit/components/reader/tests/browser/readerModeArticle.html`;
 const isMacOS = AppConstants.platform === "macosx";
 
 add_task(async function () {
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index dcc146508706..019ccc92f5f8 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -3569,7 +3569,19 @@ pref("reader.line_height", 4);
 pref("reader.color_scheme", "auto");
 
 // Color scheme values available in reader mode UI.
-pref("reader.color_scheme.values", "[\"light\",\"dark\",\"sepia\",\"auto\"]");
+pref("reader.color_scheme.values", "[\"auto\",\"light\",\"dark\",\"sepia\",\"contrast\",\"gray\"]");
+
+// Determines if updated color theme menu is enabled in reader mode.
+pref("reader.colors_menu.enabled", false);
+
+// The custom color scheme options in reader colors menu.
+pref("reader.custom_colors.foreground", "");
+pref("reader.custom_colors.background", "");
+
+pref("reader.custom_colors.unvisited-links", "");
+pref("reader.custom_colors.visited-links", "");
+
+pref("reader.custom_colors.selection-highlight", "");
 
 // The font type in reader (sans-serif, serif)
 pref("reader.font_type", "sans-serif");
diff --git a/testing/runtimes/manifest-runtimes-unix.json b/testing/runtimes/manifest-runtimes-unix.json
index 17062f8bf260..5493c36cf8fc 100644
--- a/testing/runtimes/manifest-runtimes-unix.json
+++ b/testing/runtimes/manifest-runtimes-unix.json
@@ -271,7 +271,7 @@
     "toolkit/components/pictureinpicture/tests/browser.ini": 85.82,
     "toolkit/components/places/tests/browser/browser.ini": 30.19,
     "toolkit/components/printing/tests/browser.ini": 7.15,
-    "toolkit/components/reader/test/browser.ini": 17.92,
+    "toolkit/components/reader/tests/browser/browser.ini": 17.92,
     "toolkit/components/remotebrowserutils/tests/browser/browser.ini": 33.48,
     "toolkit/components/remotepagemanager/tests/browser/browser.ini": 6.94,
     "toolkit/components/satchel/test/browser/browser.ini": 6.09,
diff --git a/testing/runtimes/manifest-runtimes-windows.json b/testing/runtimes/manifest-runtimes-windows.json
index 1ca1198e4ee8..48aef9cfc872 100644
--- a/testing/runtimes/manifest-runtimes-windows.json
+++ b/testing/runtimes/manifest-runtimes-windows.json
@@ -271,7 +271,7 @@
     "toolkit/components/pictureinpicture/tests/browser.ini": 51.8,
     "toolkit/components/places/tests/browser/browser.ini": 25.44,
     "toolkit/components/printing/tests/browser.ini": 4.86,
-    "toolkit/components/reader/test/browser.ini": 11.29,
+    "toolkit/components/reader/tests/browser/browser.ini": 11.29,
     "toolkit/components/remotebrowserutils/tests/browser/browser.ini": 16.4,
     "toolkit/components/remotepagemanager/tests/browser/browser.ini": 2.77,
     "toolkit/components/satchel/test/browser/browser.ini": 3.38,
diff --git a/toolkit/components/narrate/NarrateControls.sys.mjs b/toolkit/components/narrate/NarrateControls.sys.mjs
index ed2f8ff1242f..19551fa59faf 100644
--- a/toolkit/components/narrate/NarrateControls.sys.mjs
+++ b/toolkit/components/narrate/NarrateControls.sys.mjs
@@ -38,7 +38,7 @@ export function NarrateControls(win, languagePromise) {
   toggleButton.dataset.telemetryId = "reader-listen";
   let tip = win.document.createElement("span");
   let shortcutNarrateKey = gStrings.GetStringFromName("narrate-key-shortcut");
-  let labelText = gStrings.formatStringFromName("listen-label", [
+  let labelText = gStrings.formatStringFromName("read-aloud-label", [
     shortcutNarrateKey,
   ]);
   tip.textContent = labelText;
@@ -65,10 +65,6 @@ export function NarrateControls(win, languagePromise) {
   narrateVoices.className = "narrate-row narrate-voices";
   dropdownList.appendChild(narrateVoices);
 
-  let dropdownArrow = win.document.createElement("div");
-  dropdownArrow.className = "dropdown-arrow";
-  dropdownList.appendChild(dropdownArrow);
-
   let narrateSkipPrevious = win.document.createElement("button");
   narrateSkipPrevious.className = "narrate-skip-previous";
   narrateSkipPrevious.disabled = true;
diff --git a/toolkit/components/reader/AboutReader.sys.mjs b/toolkit/components/reader/AboutReader.sys.mjs
index be367ae6f29b..75776b619f26 100644
--- a/toolkit/components/reader/AboutReader.sys.mjs
+++ b/toolkit/components/reader/AboutReader.sys.mjs
@@ -8,6 +8,7 @@ import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
 
 const lazy = {};
 let gScrollPositions = new Map();
+let lastSelectedTheme = "auto";
 
 ChromeUtils.defineESModuleGetters(lazy, {
   AsyncPrefs: "resource://gre/modules/AsyncPrefs.sys.mjs",
@@ -26,10 +27,31 @@ ChromeUtils.defineLazyGetter(
 );
 
 const COLORSCHEME_L10N_IDS = {
-  light: "about-reader-color-scheme-light",
-  dark: "about-reader-color-scheme-dark",
-  sepia: "about-reader-color-scheme-sepia",
-  auto: "about-reader-color-scheme-auto",
+  auto: "about-reader-color-theme-auto",
+  light: "about-reader-color-theme-light",
+  dark: "about-reader-color-theme-dark",
+  sepia: "about-reader-color-theme-sepia",
+  contrast: "about-reader-color-theme-contrast",
+  gray: "about-reader-color-theme-gray",
+  custom: "about-reader-color-theme-custom",
+};
+
+const CUSTOM_THEME_COLOR_INPUTS = [
+  "foreground",
+  "background",
+  "unvisited-links",
+  "visited-links",
+  "selection-highlight",
+];
+
+const COLORS_MENU_TABS = ["fxtheme", "customtheme"];
+
+const DEFAULT_COLORS = {
+  background: "#FFFFFF",
+  foreground: "#14151A",
+  "unvisited-links": "#0060DF",
+  "visited-links": "#321C64",
+  "selection-highlight": "#FFFFCC",
 };
 
 Services.telemetry.setEventRecordingEnabled("readermode", true);
@@ -147,9 +169,27 @@ export var AboutReader = function (
   // we're ready for any external setup, send a signal for that.
   this._actor.sendAsyncMessage("Reader:OnSetup");
 
-  let colorSchemeValues = JSON.parse(
+  // set up segmented tab controls for colors menu.
+  this._setupColorsTabs(
+    COLORS_MENU_TABS,
+    this._handleColorsTabClick.bind(this)
+  );
+
+  // fetch color scheme values from prefs.
+  let colorsMenuColorSchemeValues = JSON.parse(
     Services.prefs.getCharPref("reader.color_scheme.values")
   );
+  // remove contrast and gray options from regular menu.
+  let colorSchemeValues = [...colorsMenuColorSchemeValues];
+  colorSchemeValues.splice(colorSchemeValues.length - 2, 2);
+
+  let colorsMenuColorSchemeOptions = colorsMenuColorSchemeValues.map(value => ({
+    l10nId: COLORSCHEME_L10N_IDS[value],
+    groupName: "color-scheme",
+    value,
+    itemClass: value + "-button",
+  }));
+
   let colorSchemeOptions = colorSchemeValues.map(value => ({
     l10nId: COLORSCHEME_L10N_IDS[value],
     groupName: "color-scheme",
@@ -158,12 +198,33 @@ export var AboutReader = function (
   }));
   let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
 
-  this._setupSegmentedButton(
-    "color-scheme-buttons",
-    colorSchemeOptions,
-    colorScheme,
-    this._setColorSchemePref.bind(this)
-  );
+  if (Services.prefs.getBoolPref("reader.colors_menu.enabled", false)) {
+    doc.getElementById("regular-color-scheme").hidden = true;
+    doc.getElementById("custom-colors-color-scheme").hidden = false;
+    this._setupSegmentedButton(
+      "colors-menu-color-scheme-buttons",
+      colorsMenuColorSchemeOptions,
+      colorScheme,
+      this._setColorSchemePref.bind(this)
+    );
+    this._setupCustomColors(
+      CUSTOM_THEME_COLOR_INPUTS,
+      "custom-colors-selection",
+      "about-reader-custom-colors"
+    );
+    this._setupButton(
+      "custom-colors-reset-button",
+      this._resetCustomColors.bind(this)
+    );
+  } else {
+    this._setupSegmentedButton(
+      "color-scheme-buttons",
+      colorSchemeOptions,
+      colorScheme,
+      this._setColorSchemePref.bind(this)
+    );
+  }
+
   this._setColorSchemePref(colorScheme);
 
   let fontTypeOptions = [
@@ -738,19 +799,43 @@ AboutReader.prototype = {
       this._colorScheme = "hcm";
     }
 
+    if (this._colorScheme == "custom") {
+      const colorInputs = this._doc.querySelectorAll("color-input");
+      colorInputs.forEach(input => {
+        // Set document body styles to pref values.
+        let property = input.getAttribute("prop-name");
+        let pref = `reader.custom_colors.${property}`;
+        let customColor = Services.prefs.getStringPref(pref, "");
+        // If customColor is truthy, set the value from pref.
+        if (customColor) {
+          let cssProp = `--custom-theme-${property}`;
+          this._doc.body.style.setProperty(cssProp, customColor);
+        }
+      });
+    }
+
     bodyClasses.add(this._colorScheme);
   },
 
-  // Pref values include "dark", "light", "sepia", and "auto"
-  _setColorSchemePref(colorSchemePref) {
+  // Pref values include "auto", "dark", "light", "sepia",
+  // "gray", "contrast", and "custom"
+  _setColorSchemePref(colorSchemePref, fromInputEvent = false) {
+    // The input event for the last selected segmented button is fired
+    // upon loading a reader article in the same session. To prevent it
+    // from overwriting custom colors, we return false.
+    if (this._colorScheme == "custom" && fromInputEvent) {
+      lastSelectedTheme = colorSchemePref;
+      return false;
+    }
     this._setColorScheme(colorSchemePref);
 
     lazy.AsyncPrefs.set("reader.color_scheme", colorSchemePref);
+    return true;
   },
 
   _setFontType(newFontType) {
     if (this._fontType === newFontType) {
-      return;
+      return false;
     }
 
     let bodyClasses = this._doc.body.classList;
@@ -763,6 +848,8 @@ AboutReader.prototype = {
     bodyClasses.add(this._fontType);
 
     lazy.AsyncPrefs.set("reader.font_type", this._fontType);
+
+    return true;
   },
 
   async _loadArticle(docContentType = "document") {
@@ -1094,14 +1181,17 @@ AboutReader.prototype = {
             label.removeAttribute("checked");
           }
 
-          aEvent.target.nextElementSibling.setAttribute("checked", "true");
-          callback(option.value);
+          let setOption = callback(option.value, true);
+          if (setOption) {
+            aEvent.target.setAttribute("checked", "true");
+            aEvent.target.nextElementSibling.setAttribute("checked", "true");
+          }
         },
         true
       );
 
       if (option.value === initialValue) {
-        radioButton.checked = true;
+        radioButton.setAttribute("checked", "true");
         item.setAttribute("checked", "true");
       }
     }
@@ -1124,6 +1214,121 @@ AboutReader.prototype = {
     );
   },
 
+  _handleColorsTabClick(option) {
+    let doc = this._doc;
+    if (option == "customtheme") {
+      this._setColorSchemePref("custom");
+      lazy.AsyncPrefs.set("reader.color_scheme", "custom");
+
+      // Store the last selected preset theme button.
+      const colorSchemePresets = doc.querySelector(
+        ".colors-menu-color-scheme-buttons"
+      );
+      const labels = colorSchemePresets.querySelectorAll("label");
+      labels.forEach(label => {
+        if (label.hasAttribute("checked")) {
+          lastSelectedTheme = label.className.split("-")[0];
+        }
+      });
+    }
+    if (option == "fxtheme") {
+      this._setColorSchemePref(lastSelectedTheme);
+      lazy.AsyncPrefs.set("reader.color_scheme", lastSelectedTheme);
+      // set the last selected button to checked.
+      const colorSchemePresets = doc.querySelector(
+        ".colors-menu-color-scheme-buttons"
+      );
+      const labels = colorSchemePresets.querySelectorAll("label");
+      labels.forEach(label => {
+        if (label.className == `${lastSelectedTheme}-button`) {
+          label.setAttribute("checked", "true");
+          label.previousElementSibling.setAttribute("checked", "true");
+        }
+      });
+    }
+  },
+
+  _setupColorsTabs(options, callback) {
+    let doc = this._doc;
+    let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
+    for (let option of options) {
+      let tabButton = doc.getElementById(`tabs-deck-button-${option}`);
+      // Open custom theme tab if color scheme is set to custom.
+      if (option == "customtheme" && colorScheme == "custom") {
+        tabButton.click();
+      }
+      tabButton.addEventListener(
+        "click",
+        function (aEvent) {
+          if (!aEvent.isTrusted) {
+            return;
+          }
+
+          callback(option);
+        },
+        true
+      );
+    }
+  },
+
+  _setupColorInput(prop) {
+    let doc = this._doc;
+    let input = doc.createElement("color-input");
+    input.setAttribute("prop-name", prop);
+    let labelL10nId = `about-reader-custom-colors-${prop}`;
+    input.setAttribute("data-l10n-id", labelL10nId);
+
+    let pref = `reader.custom_colors.${prop}`;
+    let customColor = Services.prefs.getStringPref(pref, "");
+    // Set the swatch color from prefs if one has been set.
+    if (customColor) {
+      input.setAttribute("color", customColor);
+    } else {
+      let defaultColor = DEFAULT_COLORS[prop];
+      input.setAttribute("color", defaultColor);
+    }
+
+    // Attach event listener to update the pref and page colors on input.
+    input.addEventListener("color-picked", e => {
+      const cssPropToUpdate = `--custom-theme-${prop}`;
+      this._doc.body.style.setProperty(cssPropToUpdate, e.detail);
+
+      const prefToUpdate = `reader.custom_colors.${prop}`;
+      lazy.AsyncPrefs.set(prefToUpdate, e.detail);
+    });
+
+    return input;
+  },
+
+  _setupCustomColors(options, id) {
+    let doc = this._doc;
+    const list = doc.getElementsByClassName(id)[0];
+
+    for (let option of options) {
+      let listItem = doc.createElement("li");
+      let colorInput = this._setupColorInput(option);
+      listItem.appendChild(colorInput);
+      list.appendChild(listItem);
+    }
+  },
+
+  _resetCustomColors() {
+    // Need to reset prefs, page colors, and color inputs.
+    const colorInputs = this._doc.querySelectorAll("color-input");
+    colorInputs.forEach(input => {
+      let property = input.getAttribute("prop-name");
+      let pref = `reader.custom_colors.${property}`;
+      lazy.AsyncPrefs.set(pref, "");
+
+      // Set css props to empty strings so they use fallback value.
+      let cssProp = `--custom-theme-${property}`;
+      this._doc.body.style.setProperty(cssProp, "");
+
+      let defaultColor = DEFAULT_COLORS[property];
+      input.setAttribute("color", defaultColor);
+    });
+  },
+
   _toggleDropdownClicked(event) {
     let dropdown = event.target.closest(".dropdown");
 
diff --git a/toolkit/components/reader/color-input.css b/toolkit/components/reader/color-input.css
new file mode 100644
index 000000000000..93e269dd1692
--- /dev/null
+++ b/toolkit/components/reader/color-input.css
@@ -0,0 +1,47 @@
+/* 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/. */
+
+.color-input-container {
+  display: flex;
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--space-small);
+  min-height: 46px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0 var(--space-small);
+  border-radius: var(--border-radius-small);
+}
+
+.color-input-container:hover {
+  background-color: var(--toolbar-button-background-hover);
+}
+
+#color-swatch:focus-visible {
+  outline: none;
+}
+
+.color-input-container:focus-within {
+  outline: 2px solid var(--primary-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.icon-container {
+  display: flex;
+  margin-inline: auto var(--space-xsmall);
+}
+
+#color-swatch {
+  appearance: none;
+  width: 34px;
+  height: 34px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+#color-swatch::-moz-color-swatch {
+  border-radius: var(--border-radius-circle);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
diff --git a/toolkit/components/reader/color-input.mjs b/toolkit/components/reader/color-input.mjs
new file mode 100644
index 000000000000..1c460dac3e8d
--- /dev/null
+++ b/toolkit/components/reader/color-input.mjs
@@ -0,0 +1,69 @@
+/* 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/. */
+
+import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+/**
+ * @tagname color-input
+ * @property {string} color - The initial color value as a hex code.
+ * @property {string} propName - The property that the color input sets.
+ * @property {string} l10nId - l10nId for label text.
+ */
+export default class ColorInput extends MozLitElement {
+  static properties = {
+    color: { type: String },
+    propName: { type: String, attribute: "prop-name" },
+    l10nId: { type: String, attribute: "data-l10n-id" },
+  };
+
+  static queries = {
+    inputEl: "#color-swatch",
+  };
+
+  handleColorInput(event) {
+    this.color = event.target.value;
+    this.dispatchEvent(
+      new CustomEvent("color-picked", {
+        detail: this.color,
+      })
+    );
+  }
+
+  /* Function to launch color picker when the user clicks anywhere in the container. */
+  handleClick(event) {
+    // If the user directly clicks the color swatch, no need to propagate click.
+    if (event.target.matches("input")) {
+      return;
+    }
+    this.inputEl.click();
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/content/reader/color-input.css"
+      />
+      <div class="color-input-container" @click="${this.handleClick}">
+        <input
+          type="color"
+          name="${this.propName}"
+          .value="${this.color}"
+          id="color-swatch"
+          @input="${this.handleColorInput}"
+        />
+        <label for="color-swatch" data-l10n-id=${this.l10nId}></label>
+        <div class="icon-container">
+          <img
+            class="icon"
+            role="presentation"
+            src="chrome://global/skin/icons/edit-outline.svg"
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("color-input", ColorInput);
diff --git a/toolkit/components/reader/color-input.stories.mjs b/toolkit/components/reader/color-input.stories.mjs
new file mode 100644
index 000000000000..cec85a8d989f
--- /dev/null
+++ b/toolkit/components/reader/color-input.stories.mjs
@@ -0,0 +1,32 @@
+/* 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/. */
+
+import { html } from "../../content/widgets/vendor/lit.all.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "chrome://global/content/reader/color-input.mjs";
+
+export default {
+  title: "Domain-specific UI Widgets/Reader View/Color Input",
+  component: "color-input",
+  argTypes: {},
+  parameters: {
+    status: "stable",
+    fluent: `moz-color-input-label = Background`,
+  },
+};
+
+const Template = ({ color, propName, labelL10nId }) => html`
+  <color-input
+    color=${color}
+    data-l10n-id=${labelL10nId}
+    prop-name=${propName}
+  ></color-input>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  propName: "background",
+  color: "#7293C9",
+  labelL10nId: "moz-color-input-label",
+};
diff --git a/toolkit/components/reader/content/aboutReader.html b/toolkit/components/reader/content/aboutReader.html
index db93e9f80b40..d1c9164d4233 100644
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -12,6 +12,10 @@
     />
     <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
     <meta name="viewport" content="width=device-width; user-scalable=0" />
+    <link
+      rel="stylesheet"
+      href="chrome://global/skin/design-system/tokens-brand.css"
+    />
     <link
       rel="stylesheet"
       href="chrome://global/skin/aboutReader.css"
@@ -19,6 +23,14 @@
     />
     <link rel="localization" href="toolkit/about/aboutReader.ftl" />
     <link rel="localization" href="toolkit/branding/brandings.ftl" />
+    <script
+      type="module"
+      src="chrome://global/content/reader/color-input.mjs"
+    ></script>
+    <script
+      type="module"
+      src="chrome://global/content/elements/named-deck.js"
+    ></script>
   </head>
 
   <body>
@@ -53,7 +65,6 @@
               </button>
             </li>
             <li class="dropdown-popup">
-              <div class="dropdown-arrow"></div>
               <div class="font-type-buttons radiorow"></div>
               <div class="font-size-buttons buttonrow">
                 <button
@@ -88,7 +99,63 @@
                   data-l10n-id="about-reader-toolbar-lineheightplus"
                 ></button>
               </div>
-              <div class="color-scheme-buttons radiorow"></div>
+              <div
+                class="color-scheme-buttons radiorow"
+                id="regular-color-scheme"
+                hidden="false"
+              ></div>
+            </li>
+          </ul>
+          <ul
+            class="dropdown colors-dropdown"
+            id="custom-colors-color-scheme"
+            hidden="true"
+          >
+            <li>
+              <button
+                class="dropdown-toggle toolbar-button colors-button"
+                aria-labelledby="toolbar-color-controls"
+                data-telemetry-id="reader-color-controls"
+              >
+                <span
+                  class="hover-label"
+                  id="toolbar-color-controls"
+                  data-l10n-id="about-reader-toolbar-color-controls"
+                ></span>
+              </button>
+            </li>
+            <li class="dropdown-popup" id="color-controls">
+              <h2
+                data-l10n-id="about-reader-colors-menu-header"
+                id="about-reader-colors-menu-header"
+              ></h2>
+              <button-group aria-labelledby="about-reader-colors-menu-header">
+                <button
+                  is="named-deck-button"
+                  deck="tabs-deck"
+                  name="fxtheme"
+                  data-l10n-id="about-reader-fxtheme-tab"
+                ></button>
+                <button
+                  is="named-deck-button"
+                  deck="tabs-deck"
+                  name="customtheme"
+                  data-l10n-id="about-reader-customtheme-tab"
+                ></button>
+              </button-group>
+              <named-deck id="tabs-deck" is-tabbed>
+                <div
+                  name="fxtheme"
+                  class="colors-menu-color-scheme-buttons radiorow"
+                ></div>
+                <div name="customtheme">
+                  <ul class="custom-colors-selection"></ul>
+                  <button
+                    class="custom-colors-reset-button"
+                    data-l10n-id="about-reader-custom-colors-reset-button"
+                  ></button>
+                </div>
+              </named-deck>
             </li>
           </ul>
         </div>
diff --git a/toolkit/components/reader/jar.mn b/toolkit/components/reader/jar.mn
index 4b72136192cf..587dd45cf8d3 100644
--- a/toolkit/components/reader/jar.mn
+++ b/toolkit/components/reader/jar.mn
@@ -4,3 +4,5 @@
 
 toolkit.jar:
   content/global/reader/aboutReader.html             (content/aboutReader.html)
+  content/global/reader/color-input.css              (color-input.css)
+  content/global/reader/color-input.mjs              (color-input.mjs)
diff --git a/toolkit/components/reader/moz.build b/toolkit/components/reader/moz.build
index e57a0fe705c9..dba7a5a2efa8 100644
--- a/toolkit/components/reader/moz.build
+++ b/toolkit/components/reader/moz.build
@@ -22,7 +22,9 @@ EXTRA_JS_MODULES.reader = [
     "ReaderWorker.sys.mjs",
 ]
 
-BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
+BROWSER_CHROME_MANIFESTS += ["tests/browser/browser.toml"]
+
+MOCHITEST_CHROME_MANIFESTS += ["tests/chrome/chrome.toml"]
 
 with Files("**"):
     BUG_COMPONENT = ("Toolkit", "Reader Mode")
diff --git a/toolkit/components/reader/test/browser.toml b/toolkit/components/reader/tests/browser/browser.toml
similarity index 100%
rename from toolkit/components/reader/test/browser.toml
rename to toolkit/components/reader/tests/browser/browser.toml
diff --git a/toolkit/components/reader/test/browser_bug1124271_readerModePinnedTab.js b/toolkit/components/reader/tests/browser/browser_bug1124271_readerModePinnedTab.js
similarity index 100%
rename from toolkit/components/reader/test/browser_bug1124271_readerModePinnedTab.js
rename to toolkit/components/reader/tests/browser/browser_bug1124271_readerModePinnedTab.js
diff --git a/toolkit/components/reader/test/browser_bug1453818_samesite_cookie.js b/toolkit/components/reader/tests/browser/browser_bug1453818_samesite_cookie.js
similarity index 100%
rename from toolkit/components/reader/test/browser_bug1453818_samesite_cookie.js
rename to toolkit/components/reader/tests/browser/browser_bug1453818_samesite_cookie.js
diff --git a/toolkit/components/reader/test/browser_bug1780350_readerModeSaveScroll.js b/toolkit/components/reader/tests/browser/browser_bug1780350_readerModeSaveScroll.js
similarity index 100%
rename from toolkit/components/reader/test/browser_bug1780350_readerModeSaveScroll.js
rename to toolkit/components/reader/tests/browser/browser_bug1780350_readerModeSaveScroll.js
diff --git a/toolkit/components/reader/test/browser_drag_url_readerMode.js b/toolkit/components/reader/tests/browser/browser_drag_url_readerMode.js
similarity index 100%
rename from toolkit/components/reader/test/browser_drag_url_readerMode.js
rename to toolkit/components/reader/tests/browser/browser_drag_url_readerMode.js
diff --git a/toolkit/components/reader/test/browser_localfile_readerMode.js b/toolkit/components/reader/tests/browser/browser_localfile_readerMode.js
similarity index 100%
rename from toolkit/components/reader/test/browser_localfile_readerMode.js
rename to toolkit/components/reader/tests/browser/browser_localfile_readerMode.js
diff --git a/toolkit/components/reader/test/browser_readerMode.js b/toolkit/components/reader/tests/browser/browser_readerMode.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode.js
rename to toolkit/components/reader/tests/browser/browser_readerMode.js
diff --git a/toolkit/components/reader/test/browser_readerMode_bc_reuse.js b/toolkit/components/reader/tests/browser/browser_readerMode_bc_reuse.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_bc_reuse.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_bc_reuse.js
diff --git a/toolkit/components/reader/test/browser_readerMode_cached.js b/toolkit/components/reader/tests/browser/browser_readerMode_cached.js
similarity index 97%
rename from toolkit/components/reader/test/browser_readerMode_cached.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_cached.js
index 7f36a15dbba4..ca9dd4a4479e 100644
--- a/toolkit/components/reader/test/browser_readerMode_cached.js
+++ b/toolkit/components/reader/tests/browser/browser_readerMode_cached.js
@@ -7,7 +7,7 @@
 // contained within it, so if the article gets reloaded instead of using
 // the cached version, it would have a different value in it.
 const URL =
-  "http://mochi.test:8888/browser/toolkit/components/reader/test/readerModeRandom.sjs";
+  "http://mochi.test:8888/browser/toolkit/components/reader/tests/browser/readerModeRandom.sjs";
 
 add_task(async function () {
   let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, URL);
diff --git a/toolkit/components/reader/test/browser_readerMode_colorSchemePref.js b/toolkit/components/reader/tests/browser/browser_readerMode_colorSchemePref.js
similarity index 54%
rename from toolkit/components/reader/test/browser_readerMode_colorSchemePref.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_colorSchemePref.js
index 0bee6eaf051a..73d3f160b8f0 100644
--- a/toolkit/components/reader/test/browser_readerMode_colorSchemePref.js
+++ b/toolkit/components/reader/tests/browser/browser_readerMode_colorSchemePref.js
@@ -65,3 +65,57 @@ add_task(async function () {
   await testColorScheme(0, "sepia");
   await testColorScheme(1, "sepia");
 });
+
+async function testCustomColors(aPref, color) {
+  // Set the theme selection to custom.
+  Services.prefs.setBoolPref("reader.colors_menu.enabled", true);
+  Services.prefs.setCharPref("reader.color_scheme", "custom");
+
+  // Set the custom pref to the color value.
+  Services.prefs.setCharPref(`reader.custom_colors.${aPref}`, color);
+
+  // Open a browser tab, enter reader mode, and test if the page colors
+  // reflect the pref selection.
+  await BrowserTestUtils.withNewTab(
+    TEST_PATH + "readerModeArticle.html",
+    async function (browser) {
+      let pageShownPromise = BrowserTestUtils.waitForContentEvent(
+        browser,
+        "AboutReaderContentReady"
+      );
+
+      let readerButton = document.getElementById("reader-mode-button");
+      readerButton.click();
+      await pageShownPromise;
+
+      let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
+      Assert.equal(colorScheme, "custom");
+      let prefValue = Services.prefs.getStringPref(
+        `reader.custom_colors.${aPref}`
+      );
+      let cssProp = `--custom-theme-${aPref}`;
+
+      await SpecialPowers.spawn(
+        browser,
+        [prefValue, cssProp],
+        (customColor, prop) => {
+          let style = content.window.getComputedStyle(content.document.body);
+          let actualColor = style.getPropertyValue(prop);
+          Assert.equal(customColor, actualColor);
+        }
+      );
+    }
+  );
+}
+
+/**
+ * Test that the custom color scheme selection updates the document colors correctly.
+ */
+add_task(async function () {
+  await testCustomColors("foreground", "#ffffff");
+  await testCustomColors("background", "#000000");
+  await testCustomColors("unvisited-links", "#ffffff");
+  await testCustomColors("visited-links", "#ffffff");
+  await testCustomColors("visited-links", "#ffffff");
+  await testCustomColors("selection-highlight", "#ffffff");
+});
diff --git a/toolkit/components/reader/test/browser_readerMode_hidden_nodes.js b/toolkit/components/reader/tests/browser/browser_readerMode_hidden_nodes.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_hidden_nodes.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_hidden_nodes.js
diff --git a/toolkit/components/reader/test/browser_readerMode_menu.js b/toolkit/components/reader/tests/browser/browser_readerMode_menu.js
similarity index 60%
rename from toolkit/components/reader/test/browser_readerMode_menu.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_menu.js
index 304fefa5d0a6..2c08faf4f9d2 100644
--- a/toolkit/components/reader/test/browser_readerMode_menu.js
+++ b/toolkit/components/reader/tests/browser/browser_readerMode_menu.js
@@ -41,28 +41,34 @@ add_task(async function () {
           dispatchMouseEvent(win, target, "click");
         }
 
+        async function testOpenCloseDropdown(target) {
+          let button = doc.querySelector(`.${target}-button`);
+
+          let dropdown = doc.querySelector(`.${target}-dropdown`);
+          ok(!dropdown.classList.contains("open"), "dropdown is closed");
+
+          simulateClick(button);
+          ok(dropdown.classList.contains("open"), "dropdown is open");
+
+          // simulate clicking on the article title to close the dropdown
+          let title = doc.querySelector(".reader-title");
+          simulateClick(title);
+          ok(!dropdown.classList.contains("open"), "dropdown is closed");
+
+          // reopen the dropdown
+          simulateClick(button);
+          ok(dropdown.classList.contains("open"), "dropdown is open");
+
+          // now click on the button again to close it
+          simulateClick(button);
+          ok(!dropdown.classList.contains("open"), "dropdown is closed");
+        }
+
         let doc = content.document;
         let win = content.window;
-        let styleButton = doc.querySelector(".style-button");
 
-        let styleDropdown = doc.querySelector(".style-dropdown");
-        ok(!styleDropdown.classList.contains("open"), "dropdown is closed");
-
-        simulateClick(styleButton);
-        ok(styleDropdown.classList.contains("open"), "dropdown is open");
-
-        // simulate clicking on the article title to close the dropdown
-        let title = doc.querySelector("h1");
-        simulateClick(title);
-        ok(!styleDropdown.classList.contains("open"), "dropdown is closed");
-
-        // reopen the dropdown
-        simulateClick(styleButton);
-        ok(styleDropdown.classList.contains("open"), "dropdown is open");
-
-        // now click on the button again to close it
-        simulateClick(styleButton);
-        ok(!styleDropdown.classList.contains("open"), "dropdown is closed");
+        testOpenCloseDropdown("style");
+        testOpenCloseDropdown("colors");
       });
     }
   );
diff --git a/toolkit/components/reader/test/browser_readerMode_pocket.js b/toolkit/components/reader/tests/browser/browser_readerMode_pocket.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_pocket.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_pocket.js
diff --git a/toolkit/components/reader/test/browser_readerMode_readingTime.js b/toolkit/components/reader/tests/browser/browser_readerMode_readingTime.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_readingTime.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_readingTime.js
diff --git a/toolkit/components/reader/test/browser_readerMode_refresh.js b/toolkit/components/reader/tests/browser/browser_readerMode_refresh.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_refresh.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_refresh.js
diff --git a/toolkit/components/reader/test/browser_readerMode_remoteType.js b/toolkit/components/reader/tests/browser/browser_readerMode_remoteType.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_remoteType.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_remoteType.js
diff --git a/toolkit/components/reader/test/browser_readerMode_samesite_cookie_redirect.js b/toolkit/components/reader/tests/browser/browser_readerMode_samesite_cookie_redirect.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_samesite_cookie_redirect.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_samesite_cookie_redirect.js
diff --git a/toolkit/components/reader/test/browser_readerMode_with_anchor.js b/toolkit/components/reader/tests/browser/browser_readerMode_with_anchor.js
similarity index 100%
rename from toolkit/components/reader/test/browser_readerMode_with_anchor.js
rename to toolkit/components/reader/tests/browser/browser_readerMode_with_anchor.js
diff --git a/toolkit/components/reader/test/getCookies.sjs b/toolkit/components/reader/tests/browser/getCookies.sjs
similarity index 100%
rename from toolkit/components/reader/test/getCookies.sjs
rename to toolkit/components/reader/tests/browser/getCookies.sjs
diff --git a/toolkit/components/reader/test/head.js b/toolkit/components/reader/tests/browser/head.js
similarity index 100%
rename from toolkit/components/reader/test/head.js
rename to toolkit/components/reader/tests/browser/head.js
diff --git a/toolkit/components/reader/test/linkToGetCookies.html b/toolkit/components/reader/tests/browser/linkToGetCookies.html
similarity index 92%
rename from toolkit/components/reader/test/linkToGetCookies.html
rename to toolkit/components/reader/tests/browser/linkToGetCookies.html
index 341046a21d63..a05d32af4e9d 100644
--- a/toolkit/components/reader/test/linkToGetCookies.html
+++ b/toolkit/components/reader/tests/browser/linkToGetCookies.html
@@ -7,7 +7,7 @@
         <article>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
 
-            <p><a href="http://example.com/browser/toolkit/components/reader/test/getCookies.sjs" id="link">Cross-origin link to getCookies.html</a></p>
+            <p><a href="http://example.com/browser/toolkit/components/reader/tests/browser/getCookies.sjs" id="link">Cross-origin link to getCookies.html</a></p>
         </article>
     </body>
 </html>
diff --git a/toolkit/components/reader/test/readerModeArticle.html b/toolkit/components/reader/tests/browser/readerModeArticle.html
similarity index 100%
rename from toolkit/components/reader/test/readerModeArticle.html
rename to toolkit/components/reader/tests/browser/readerModeArticle.html
diff --git a/toolkit/components/reader/test/readerModeArticleContainsLink.html b/toolkit/components/reader/tests/browser/readerModeArticleContainsLink.html
similarity index 98%
rename from toolkit/components/reader/test/readerModeArticleContainsLink.html
rename to toolkit/components/reader/tests/browser/readerModeArticleContainsLink.html
index 871349adcdcb..be2d7d646965 100644
--- a/toolkit/components/reader/test/readerModeArticleContainsLink.html
+++ b/toolkit/components/reader/tests/browser/readerModeArticleContainsLink.html
@@ -12,7 +12,7 @@
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
 <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
 <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
-<p><a href="http://example.com/browser/toolkit/components/reader/test/readerModeArticle.html" id="link">Link to another page.</a></p>
+<p><a href="http://example.com/browser/toolkit/components/reader/tests/browser/readerModeArticle.html" id="link">Link to another page.</a></p>
 <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
 <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
 </div>
diff --git a/toolkit/components/reader/test/readerModeArticleHiddenNodes.html b/toolkit/components/reader/tests/browser/readerModeArticleHiddenNodes.html
similarity index 100%
rename from toolkit/components/reader/test/readerModeArticleHiddenNodes.html
rename to toolkit/components/reader/tests/browser/readerModeArticleHiddenNodes.html
diff --git a/toolkit/components/reader/test/readerModeArticleMedium.html b/toolkit/components/reader/tests/browser/readerModeArticleMedium.html
similarity index 100%
rename from toolkit/components/reader/test/readerModeArticleMedium.html
rename to toolkit/components/reader/tests/browser/readerModeArticleMedium.html
diff --git a/toolkit/components/reader/test/readerModeArticleShort.html b/toolkit/components/reader/tests/browser/readerModeArticleShort.html
similarity index 100%
rename from toolkit/components/reader/test/readerModeArticleShort.html
rename to toolkit/components/reader/tests/browser/readerModeArticleShort.html
diff --git a/toolkit/components/reader/test/readerModeArticleTextPlain.txt b/toolkit/components/reader/tests/browser/readerModeArticleTextPlain.txt
similarity index 100%
rename from toolkit/components/reader/test/readerModeArticleTextPlain.txt
rename to toolkit/components/reader/tests/browser/readerModeArticleTextPlain.txt
diff --git a/toolkit/components/reader/test/readerModeNonArticle.html b/toolkit/components/reader/tests/browser/readerModeNonArticle.html
similarity index 100%
rename from toolkit/components/reader/test/readerModeNonArticle.html
rename to toolkit/components/reader/tests/browser/readerModeNonArticle.html
diff --git a/toolkit/components/reader/test/readerModeRandom.sjs b/toolkit/components/reader/tests/browser/readerModeRandom.sjs
similarity index 100%
rename from toolkit/components/reader/test/readerModeRandom.sjs
rename to toolkit/components/reader/tests/browser/readerModeRandom.sjs
diff --git a/toolkit/components/reader/test/setSameSiteCookie.html b/toolkit/components/reader/tests/browser/setSameSiteCookie.html
similarity index 100%
rename from toolkit/components/reader/test/setSameSiteCookie.html
rename to toolkit/components/reader/tests/browser/setSameSiteCookie.html
diff --git a/toolkit/components/reader/test/setSameSiteCookie.html^headers^ b/toolkit/components/reader/tests/browser/setSameSiteCookie.html^headers^
similarity index 100%
rename from toolkit/components/reader/test/setSameSiteCookie.html^headers^
rename to toolkit/components/reader/tests/browser/setSameSiteCookie.html^headers^
diff --git a/toolkit/components/reader/tests/chrome/chrome.toml b/toolkit/components/reader/tests/chrome/chrome.toml
new file mode 100644
index 000000000000..e416c4918198
--- /dev/null
+++ b/toolkit/components/reader/tests/chrome/chrome.toml
@@ -0,0 +1,3 @@
+[DEFAULT]
+
+["test_color_input.html"]
diff --git a/toolkit/components/reader/tests/chrome/test_color_input.html b/toolkit/components/reader/tests/chrome/test_color_input.html
new file mode 100644
index 000000000000..4cd8cde77b9a
--- /dev/null
+++ b/toolkit/components/reader/tests/chrome/test_color_input.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ColorInput Tests</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <script type="module" src="chrome://global/content/reader/color-input.mjs"></script>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: block">
+  <color-input color="#ffffff" prop-name="test-prop" data-l10n-id="color-input-test-label"></color-input>
+</div>
+<pre id="test">
+  <script class="testbody" type="application/javascript">
+    add_task(async function testColorInput() {
+      const colorInput = document.querySelector("color-input");
+      ok(colorInput, "color input element is rendered");
+
+      let input = colorInput.shadowRoot.querySelector("input");
+      is(input.value, "#ffffff", "color input has the correct initial value");
+    });
+    add_task(async function testColorInputEvents() {
+      const colorInput = document.querySelector("color-input");
+      let input = colorInput.shadowRoot.querySelector("input");
+
+      const pickedColor = new Promise((resolve) => {
+      colorInput.addEventListener("color-picked", (event) => resolve(event.detail), { once: true });
+      });
+      input.value = "#0000ff";
+      input.dispatchEvent(new Event("input"));
+      let color = await pickedColor;
+      is(color, "#0000ff", "color-picked event dispatches on input");
+    });
+  </script>
+</pre>
+</body>
+</html>
diff --git a/toolkit/locales/en-US/chrome/global/narrate.properties b/toolkit/locales/en-US/chrome/global/narrate.properties
index c622049a8118..3df4f5515b60 100644
--- a/toolkit/locales/en-US/chrome/global/narrate.properties
+++ b/toolkit/locales/en-US/chrome/global/narrate.properties
@@ -6,7 +6,7 @@
 # instead of having to read it themselves." This is the name
 # of the feature and it is the label for the popup button.
 # %S is the keyboard shortcut for the listen command
-listen-label = Listen (%S)
+read-aloud-label = Read aloud (%S)
 # %S is the keyboard shortcut for the skip back command
 previous-label = Back (%S)
 # %S is the keyboard shortcut for the start command
diff --git a/toolkit/locales/en-US/toolkit/about/aboutReader.ftl b/toolkit/locales/en-US/toolkit/about/aboutReader.ftl
index 8444f09288f6..8e0297573c8b 100644
--- a/toolkit/locales/en-US/toolkit/about/aboutReader.ftl
+++ b/toolkit/locales/en-US/toolkit/about/aboutReader.ftl
@@ -5,14 +5,20 @@
 about-reader-loading = Loading…
 about-reader-load-error = Failed to load article from page
 
-about-reader-color-scheme-light = Light
-    .title = Color Scheme Light
-about-reader-color-scheme-dark = Dark
-    .title = Color Scheme Dark
-about-reader-color-scheme-sepia = Sepia
-    .title = Color Scheme Sepia
-about-reader-color-scheme-auto = Auto
-    .title = Color Scheme Auto
+about-reader-color-theme-light = Light
+    .title = Color Theme Light
+about-reader-color-theme-dark = Dark
+    .title = Color Theme Dark
+about-reader-color-theme-sepia = Sepia
+    .title = Color Theme Sepia
+about-reader-color-theme-auto = Auto
+    .title = Color Theme Auto
+about-reader-color-theme-gray = Gray
+    .title = Color Theme Gray
+about-reader-color-theme-contrast = Contrast
+    .title = Color Theme Contrast
+about-reader-color-theme-custom = Custom colors
+    .title = Color Theme Custom
 
 # An estimate for how long it takes to read an article,
 # expressed as a range covering both slow and fast readers.
@@ -49,4 +55,31 @@ about-reader-font-type-sans-serif = Sans-serif
 
 about-reader-toolbar-close = Close Reader View
 about-reader-toolbar-type-controls = Type controls
+about-reader-toolbar-color-controls = Colors
 about-reader-toolbar-savetopocket = Save To { -pocket-brand-name }
+
+## Reader View colors menu
+
+about-reader-colors-menu-header = Theme
+
+about-reader-fxtheme-tab = Default
+about-reader-customtheme-tab = Custom
+
+## These are used as labels for the custom theme color pickers.
+## The .title element is used to make the editing functionality
+## clear and give context for screen reader users.
+
+about-reader-custom-colors-foreground = Text
+    .title = Edit color
+about-reader-custom-colors-background = Background
+    .title = Edit color
+
+about-reader-custom-colors-unvisited-links = Unvisited links
+    .title = Edit color
+about-reader-custom-colors-visited-links = Visited links
+    .title = Edit color
+
+about-reader-custom-colors-selection-highlight = Highlighter for read aloud
+    .title = Edit color
+
+about-reader-custom-colors-reset-button = Reset defaults
diff --git a/toolkit/modules/AsyncPrefs.sys.mjs b/toolkit/modules/AsyncPrefs.sys.mjs
index 61075cc419be..07f08c119e32 100644
--- a/toolkit/modules/AsyncPrefs.sys.mjs
+++ b/toolkit/modules/AsyncPrefs.sys.mjs
@@ -31,6 +31,11 @@ const kAllowedPrefs = new Set([
   "reader.color_scheme",
   "reader.content_width",
   "reader.line_height",
+  "reader.custom_colors.foreground",
+  "reader.custom_colors.background",
+  "reader.custom_colors.unvisited-links",
+  "reader.custom_colors.visited-links",
+  "reader.custom_colors.selection-highlight",
 
   "security.tls.version.enable-deprecated",
   "security.xfocsp.errorReporting.automatic",
diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css
index 6e4206e2939f..764dd397027c 100644
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -39,7 +39,6 @@ body {
   --tooltip-border: transparent;
   --popup-background: #fff;
   --popup-border: rgba(0, 0, 0, 0.12);
-  --opaque-popup-border: rgb(224, 224, 224);
   --popup-line: var(--grey-30);
   --popup-shadow: rgba(49, 49, 49, 0.3);
   --popup-button-background: rgba(207, 207, 216, 0.33);
@@ -47,9 +46,8 @@ body {
   --popup-button-background-hover: var(--toolbar-button-background-hover);
   --popup-button-foreground-hover: var(--main-foreground);
   --popup-button-background-active: var(--toolbar-button-background-active);
-  --popup-button-border: var(--popup-border);
+  --popup-button-border: rgba(0, 0, 0, 0.2);
   --selected-background: rgba(0, 97, 224, 0.3);
-  --selected-border: var(--primary-color);
   --outline-focus-color: var(--primary-color);
   --font-value-background: rgb(240, 240, 244);
   --font-value-border: var(--grey-30);
@@ -61,6 +59,11 @@ body {
   --link-selected-background: var(--selected-background);
   --link-selected-foreground: #333;
   --visited-link-foreground: #b5007f;
+  --custom-theme-background: var(--color-white);
+  --custom-theme-foreground: #14151A;
+  --custom-theme-unvisited-links: var(--color-blue-50);
+  --custom-theme-visited-links: #321C64;
+  --custom-theme-selection-highlight: #FFFFCC;
   /* light colours */
 }
 
@@ -72,26 +75,62 @@ body.sepia {
   --icon-disabled-fill: rgba(91, 70, 54, 0.4);
 }
 
+body.gray {
+  --main-background: var(--grey-30);
+  --main-foreground: var(--light-theme-foreground);
+  --toolbar-border: var(--main-foreground);
+  --icon-fill: var(--main-foreground);
+}
+
+body.dark,
+body.contrast {
+  --toolbar-box-shadow: black;
+  --toolbar-button-background-hover: rgb(82, 82, 94);
+  --toolbar-button-background-active: rgb(91, 91, 102);
+  --popup-background: rgb(66, 65, 77);
+  --popup-button-border: rgba(255, 255, 255, 0.12);
+  --popup-line: rgba(249, 249, 250, 0.1);
+  --popup-button-background: rgb(43, 42, 51);
+  --font-value-background: rgba(249, 249, 250, 0.15);
+  --font-value-border: #656468;
+  --icon-disabled-fill: rgba(251, 251, 254, 0.4);
+  --link-selected-foreground: #fff;
+  --visited-link-foreground: #e675fd;
+  --selected-background: rgba(0, 221, 255, 0.3);
+  /* dark colours */
+
+  .moz-reader-block-img {
+    filter: brightness(0.8) contrast(1.2);
+  }
+}
+
 body.dark {
   --main-background: var(--dark-theme-background);
   --main-foreground: var(--dark-theme-foreground);
   --primary-color: rgb(0, 221, 255);
   --toolbar-border: rgba(249, 249, 250, 0.2);
-  --toolbar-box-shadow: black;
-  --toolbar-button-background-hover: rgb(82, 82, 94);
-  --toolbar-button-background-active: rgb(91, 91, 102);
-  --popup-background: rgb(66, 65, 77);
-  --opaque-popup-border: #434146;
-  --popup-line: rgba(249, 249, 250, 0.1);
-  --popup-button-background: rgb(43, 42, 51);
-  --selected-background: rgba(0, 221, 255, 0.3);
-  --font-value-background: rgba(249, 249, 250, 0.15);
-  --font-value-border: #656468;
   --icon-fill: rgb(251, 251, 254);
-  --icon-disabled-fill: rgba(251, 251, 254, 0.4);
-  --link-selected-foreground: #fff;
-  --visited-link-foreground: #e675fd;
-  /* dark colours */
+}
+
+body.contrast {
+  --main-background: #000000;
+  --main-foreground: #fff;
+  --primary-color: #D6B4FD;
+  --toolbar-border: #FFEE32;
+  --icon-fill: #FFEE32;
+}
+
+body.custom {
+  --main-background: var(--custom-theme-background);
+  --main-foreground: var(--custom-theme-foreground);
+  --link-foreground: var(--custom-theme-unvisited-links);
+  --visited-link-foreground: var(--custom-theme-visited-links);
+  --popup-button-foreground: var(--light-theme-foreground);
+  --popup-button-foreground-hover: var(--light-theme-foreground);
+  --tooltip-foreground: var(--light-theme-foreground);
+  --toolbar-border: var(--main-foreground);
+  --icon-fill: var(--main-foreground);
+  --icon-disabled-fill: rgba(91, 91, 102, 0.4);
 }
 
 body.hcm {
@@ -116,7 +155,6 @@ body.hcm {
   --tooltip-border: CanvasText;
   --popup-background: Canvas;
   --popup-border: CanvasText;
-  --opaque-popup-border: CanvasText;
   --popup-line: CanvasText;
   --popup-button-background: ButtonFace;
   --popup-button-foreground: ButtonText;
@@ -138,6 +176,11 @@ body.hcm {
   --visited-link-foreground: VisitedText;
 }
 
+body.hcm .colors-dropdown {
+  /* Hide entire colors menu when HCM is on. */
+  display: none;
+}
+
 body {
   margin: 0;
   padding: var(--body-padding);
@@ -182,33 +225,31 @@ blockquote {
   border-inline-start: 2px solid var(--main-foreground) !important;
 }
 
-.light-button,
-.auto-button {
-  color: var(--light-theme-foreground);
-  background-color: var(--light-theme-background);
-}
-
-@media (prefers-color-scheme: dark) {
+.color-scheme-buttons {
+  .light-button,
   .auto-button {
+    color: var(--light-theme-foreground);
+    background-color: var(--light-theme-background);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .auto-button {
+      color: var(--dark-theme-foreground);
+      background-color: var(--dark-theme-background);
+    }
+  }
+
+  .dark-button {
     color: var(--dark-theme-foreground);
     background-color: var(--dark-theme-background);
   }
 
-  .moz-reader-block-img {
-    filter: brightness(0.8) contrast(1.2);
+  .sepia-button {
+    color: #5b4636;
+    background-color: #f4ecd8;
   }
 }
 
-.dark-button {
-  color: var(--dark-theme-foreground);
-  background-color: var(--dark-theme-background);
-}
-
-.sepia-button {
-  color: #5b4636;
-  background-color: #f4ecd8;
-}
-
 /* Loading/error message */
 
 .reader-message {
@@ -311,7 +352,7 @@ blockquote {
    */
   margin-inline-start: max(calc(50% - 17px - var(--inline-padding)), calc(100% - 96px - 34px - 2 * var(--inline-padding)));
 
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
   list-style: none;
   user-select: none;
 
@@ -452,42 +493,28 @@ button:disabled {
 .dropdown .dropdown-popup {
   text-align: start;
   position: absolute;
-  inset-inline-start: 40px;
+  inset-inline-start: 32px;
   z-index: 1000;
   background-color: var(--popup-background);
   visibility: hidden;
   border-radius: 4px;
   border: 1px solid var(--popup-border);
   box-shadow: 0 0 10px 0 var(--popup-shadow);
-  top: 0;
+  top: var(--space-xsmall);
+}
+
+.dropdown-popup h2 {
+  font-size: var(--font-size-root);
+  font-weight: var(--font-weight-bold);
+  color: var(--popup-button-foreground);
+  margin-block: var(--space-large);
+  margin-inline: var(--space-large) 0;
 }
 
 .open > .dropdown-popup {
   visibility: visible;
 }
 
-.dropdown-arrow {
-  position: absolute;
-  height: 24px;
-  width: 16px;
-  inset-inline-start: -16px;
-  background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
-  display: block;
-  -moz-context-properties: fill, stroke;
-  fill: var(--popup-background);
-  stroke: var(--opaque-popup-border);
-  pointer-events: none;
-}
-
-.dropdown-arrow:dir(rtl) {
-  transform: scaleX(-1);
-}
-
-/* Align the style dropdown arrow (narrate does its own) */
-.style-dropdown .dropdown-arrow {
-  top: 7px;
-}
-
 /* Font style popup */
 
 .radio-button {
@@ -513,13 +540,14 @@ button:disabled {
   box-sizing: border-box;
   width: 36px;
   height: 20px;
-  line-height: 20px;
+  line-height: 18px;
   display: flex;
   justify-content: center;
   align-content: center;
   margin: auto;
   border-radius: 10px;
   border: 1px solid var(--font-value-border);
+  color: var(--popup-button-foreground);
   background-color: var(--font-value-background);
 }
 
@@ -547,16 +575,11 @@ button:disabled {
   outline-offset: -2px;
 }
 
-.radiorow:not(:last-child),
-.buttonrow:not(:last-child) {
+.style-dropdown .radiorow:not(:last-child),
+.style-dropdown .buttonrow:not(:last-child) {
   border-bottom: 1px solid var(--popup-line);
 }
 
-body.hcm .buttonrow.line-height-buttons {
-  /* On HCM the .color-scheme-buttons row is hidden, so remove the border from the row above it */
-  border-bottom: none;
-}
-
 .radiorow > label {
   position: relative;
   box-sizing: border-box;
@@ -565,27 +588,16 @@ body.hcm .buttonrow.line-height-buttons {
 }
 
 .radiorow > label[checked] {
-  border-color: var(--selected-border);
+  border: 2px solid var(--link-selected-foreground);
 }
 
-/* For the hover style, we draw a line under the item by means of a
- * pseudo-element. Because these items are variable height, and
- * because their contents are variable height, position it absolutely,
- * and give it a width of 100% (the content width) + 4px for the 2 * 2px
- * border width.
- */
-.radiorow > input[type=radio]:focus-visible + label::after,
-.radiorow > label:hover::after {
-  content: "";
-  display: block;
-  border-bottom: 2px solid var(--selected-border);
-  border-radius: 4px;
-  width: calc(100% + 4px);
-  position: absolute;
-  /* to skip the 2 * 2px border + 2px spacing. */
-  bottom: -6px;
-  /* Match the start of the 2px border of the element: */
-  inset-inline-start: -2px;
+.radiorow > label:hover {
+  background-color: var(--toolbar-button-background-hover);
+}
+
+.radiorow > input[type=radio]:focus-visible + label {
+  outline: 2px solid var(--primary-color);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .font-type-buttons > label {
@@ -608,6 +620,16 @@ body.hcm .buttonrow.line-height-buttons {
   padding-top: 2px;
 }
 
+.font-type-buttons {
+  > label:first-of-type {
+    margin-inline-start: var(--space-large);
+  }
+
+  > label:last-of-type {
+    margin-inline-end: var(--space-large);
+  }
+}
+
 .font-type-buttons > label[checked] {
   background-color: var(--selected-background);
 }
@@ -642,6 +664,7 @@ body.hcm .color-scheme-buttons {
   justify-content: center;
   /* We want 10px between items, but there's no margin collapsing in flexbox. */
   margin: 10px 5px;
+  border-color: var(--popup-border);
 }
 
 .color-scheme-buttons > input:first-child + label {
@@ -652,6 +675,108 @@ body.hcm .color-scheme-buttons {
   margin-inline-end: 10px;
 }
 
+/* Separate colors menu popup */
+
+#color-controls {
+  padding-block-end: var(--space-large);
+  width: 400px;
+}
+
+button-group {
+  display: flex;
+  font-size: var(--font-size-small);
+}
+
+button[is="named-deck-button"] {
+  background: none;
+  color: var(--popup-button-foreground);
+  border: 1px var(--popup-button-border);
+  border-style: solid none;
+  padding: var(--space-small);
+  flex-basis: 50%;
+
+  &[selected] {
+    color: var(--primary-color);
+    border-top: 2px solid var(--primary-color);
+  }
+}
+
+.custom-colors-selection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-small);
+  padding: var(--space-large);
+  list-style-type: none;
+  font-size: var(--font-size-root);
+  color: var(--popup-button-foreground);
+}
+
+.colors-menu-color-scheme-buttons {
+  flex-wrap: wrap;
+  margin-block-start: var(--space-small);
+}
+
+.colors-menu-color-scheme-buttons > label {
+  height: 48px;
+  width: calc(50% - 21px);
+  font-size: var(--font-size-root);
+  color: var(--popup-button-foreground);
+  border: 1px solid var(--popup-button-border);
+  border-radius: var(--border-radius-small);
+  /* Center content vertically and justify left horizontally */
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  margin: var(--space-xsmall);
+}
+
+.colors-menu-color-scheme-buttons > label:before {
+  content: "";
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--border-radius-circle);
+  outline: 1px solid var(--popup-button-border);
+  margin: 0 10px 0 12px;
+}
+
+.colors-menu-color-scheme-buttons {
+  .auto-button:before {
+    background: linear-gradient(to right, var(--light-theme-background) 50%, var(--dark-theme-background) 50%);;
+  }
+
+  .light-button:before {
+    background-color: var(--light-theme-background);
+  }
+
+  .dark-button:before {
+    background-color: var(--dark-theme-background);
+  }
+
+  .sepia-button:before {
+    background-color: #f4ecd8;
+  }
+
+  .contrast-button:before {
+    background-color: #000000;
+  }
+
+  .gray-button:before {
+    background-color: var(--grey-30);
+  }
+}
+
+.custom-colors-reset-button {
+  display: block;
+  background: none;
+  border: none;
+  padding: 0 var(--space-large);
+  color: var(--primary-color);
+  text-decoration: underline;
+  font-size: var(--font-size-root);
+  cursor: pointer;
+}
+
 /* Toolbar icons */
 
 .close-button {
@@ -662,6 +787,10 @@ body.hcm .color-scheme-buttons {
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 }
 
+.colors-button {
+  background-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
+}
+
 .minus-button {
   background-size: 18px 18px;
   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
index 7ab925a7ae2d..8a11a7625005 100644
--- a/toolkit/themes/shared/desktop-jar.inc.mn
+++ b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -147,7 +147,6 @@
   skin/classic/global/reader/RM-Minus-24x24.svg            (../../shared/reader/RM-Minus-24x24.svg)
   skin/classic/global/reader/RM-Plus-24x24.svg             (../../shared/reader/RM-Plus-24x24.svg)
   skin/classic/global/reader/RM-Type-Controls-24x24.svg    (../../shared/reader/RM-Type-Controls-24x24.svg)
-  skin/classic/global/reader/RM-Type-Controls-Arrow.svg    (../../shared/reader/RM-Type-Controls-Arrow.svg)
   skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg          (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
   skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg           (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
   skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg            (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css
index fbda43841e36..9ba7015215ed 100644
--- a/toolkit/themes/shared/narrate.css
+++ b/toolkit/themes/shared/narrate.css
@@ -16,12 +16,17 @@ body.sepia {
   --narrating-paragraph-background-color: #e0d7c5;
 }
 
-body.dark {
+body.dark,
+body.contrast {
   --current-voice: #a09eac;
   --narrate-word-highlight-color: #6f6f6f;
   --narrating-paragraph-background-color: #242424;
 }
 
+body.custom {
+  --narrating-paragraph-background-color: var(--custom-theme-selection-highlight);
+}
+
 body.hcm {
   --current-voice: inherit;
   --narrate-word-highlight-color: SelectedItem;
@@ -100,14 +105,6 @@ body.hcm .speaking:not(.open) .narrate-toggle:hover {
   outline-offset: -2px;
 }
 
-.narrate-dropdown > .dropdown-popup {
-  top: -34px;
-}
-
-.narrate-dropdown .dropdown-arrow {
-  top: 40px;
-}
-
 .narrate-row {
   display: flex;
   align-items: center;
@@ -168,7 +165,7 @@ body.hcm .speaking:not(.open) .narrate-toggle:hover {
   background-repeat: no-repeat;
   background-size: 24px auto;
   -moz-context-properties: fill;
-  fill: var(--icon-fill);
+  fill: var(--popup-button-foreground);
 }
 
 .narrate-rate::before {
@@ -193,7 +190,7 @@ body.hcm .speaking:not(.open) .narrate-toggle:hover {
 }
 
 .narrate-rate-input::-moz-range-track {
-  background-color: var(--icon-fill);
+  background-color: var(--popup-button-foreground);
   height: 2px;
 }
 
@@ -203,7 +200,7 @@ body.hcm .speaking:not(.open) .narrate-toggle:hover {
 }
 
 .narrate-rate-input::-moz-range-thumb {
-  background-color: var(--icon-fill);
+  background-color: var(--popup-button-foreground);
   height: 16px;
   width: 16px;
   border-radius: 8px;
@@ -244,6 +241,10 @@ body.hcm .speaking:not(.open) .narrate-toggle:hover {
   color: var(--current-voice);
 }
 
+.voiceselect .label {
+  color: var(--popup-button-foreground);
+}
+
 .voiceselect > .options {
   display: none;
   overflow-y: auto;
@@ -256,6 +257,7 @@ body.hcm .speaking:not(.open) .narrate-toggle:hover {
 
 .voiceselect > .options > button.option {
   box-sizing: border-box;
+  color: var(--popup-button-foreground);
 }
 
 .voiceselect > .options > button.option:not(:first-child) {
diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
deleted file mode 100644
index 235f18637626..000000000000
--- a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 24">
-  <polygon points="16.58 0.01 16.57 0 4.58 12 16.57 24 16.58 23.98" fill="context-fill" stroke="context-stroke"/>
-</svg>