Change qrBackgroundColor to ternary, move dark theme changes back to CSS

davidfloyd91 · Jun 5, 2019 · 1639cef · 1639cef
1 parent d69f14c
commit 1639cef
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/src/common/modules/data/DefaultSettings.js b/src/common/modules/data/DefaultSettings.js
@@ -4,29 +4,22 @@
  * @module data/DefaultSettings
  */
 
+// checks for OS dark theme
+const darkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
 /**
  * An object of all default settings.
  *
  * @private
  * @const
  * @type {Object}
  */
-
-// checks for OS dark theme and returns the appropriate background color
- const setQrBackgroundColor = () => {
- if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
- return "#d7d7db"; // Photon Grey 30
- } else {
- return "ffffff";
- }
- };
-
 const defaultSettings = Object.freeze({
  debugMode: false,
  popupIconColored: false,
  qrCodeType: "svg",
  qrColor: "#0c0c0d",
- qrBackgroundColor: setQrBackgroundColor(),
+ qrBackgroundColor: (darkTheme ? "#d7d7db" : "#ffffff"),
  qrErrorCorrection: "Q",
  autoGetSelectedText: false,
  monospaceFont: false,

diff --git a/src/popup/modules/UserInterface.js b/src/popup/modules/UserInterface.js
@@ -532,12 +532,6 @@ export function init() {
  const applyingQrColor = AddonSettings.get("qrBackgroundColor").then((qrBackgroundColor) => {
  if (qrBackgroundColor) {
  document.body.style.backgroundColor = qrBackgroundColor;
-
- // checks for OS dark theme and sets sets colors in text field
- if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
- qrCodeText.style.backgroundColor = "#4a4a4f"; // Photon Grey 60 -- FF dark theme popup color
- qrCodeText.style.color = "#ffffff";
- }
  }
  });
 

diff --git a/src/popup/qrcode.css b/src/popup/qrcode.css
@@ -117,3 +117,11 @@ html, body {
  /* override inerhited from browser-style */
  margin: 0px;
 }
+
+/* shift popup colors if user has specified dark mode */
+@media (prefers-color-scheme: dark) {
+ #qrcodetext {
+ background-color: var(--grey-60);
+ color: var(--white-100);
+ }
+}