Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

close #186 (Automatic) dark mode #201

Merged
merged 9 commits into from
Jun 5, 2019
Merged

close #186 (Automatic) dark mode #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7157190
Add automatic dark theme to CSS
davidfloyd91 Jun 3, 2019
028b807
Add to CONTRIBUTORS.md
davidfloyd91 Jun 3, 2019
1fa9de5
Change dark mode .qrcode background
davidfloyd91 Jun 3, 2019
3e2c790
Add comment to CSS: prefers-color-scheme reads from OS
davidfloyd91 Jun 3, 2019
e19a003
Alphabetize contributors
davidfloyd91 Jun 3, 2019
6b63a5f
Specify function for qrBackgroundColor in defaultSettings
davidfloyd91 Jun 4, 2019
889fa74
Change dark mode default qr code background color
davidfloyd91 Jun 5, 2019
d69f14c
Remove dangling else in applyingQrColor
davidfloyd91 Jun 5, 2019
618e549
Add @cornu-ammonis to contributors
rugk Jun 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CONTRIBUTORS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# Contributors

- Alexander Knipping ([@obitech](https://github.com/obitech))
- Andrew Jones ([@cornu-ammonis](https://github.com/cornu-ammonis))
- Amauri Bizerra ([@AmauriAires](https://github.com/AmauriAires))
- [@anirudh-modi](https://github.com/anirudh-modi)
- David Floyd [@davidfloyd91](https://github.com/davidfloyd91)
- [@ENT8R](https://github.com/ENT8R)
- Flo Becker ([@beckerei](https://github.com/beckerei))
- Josh Cooper ([@JoshCooperr](https://github.com/JoshCooperr))
Expand Down
12 changes: 11 additions & 1 deletion src/common/modules/data/DefaultSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,22 @@
* @const
* @type {Object}
*/

// checks for OS dark theme and returns the appropriate background color
const setQrBackgroundColor = () => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per our guide:

Avoid anonymous functions, which have no name (i.e. not really assigned) unless they do really do simple things.

(I've edited the md file now to clarify that a little…)

Generally, don't use arrow functions here. Either inline it into the actual object (I would choose so) or make it a real "usual" function and JSDOC-document it.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually in this case you may even be able to simplify that whole thing to one line: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, read that in the guide but forgot. Setting to ternary (but pulling window.matchMedia('(prefers-color-scheme: dark)').matches out into a const so the line doesn't go on forever)

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return "#d7d7db"; // Photon Grey 30
} else {
return "ffffff";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you actually test it(?), because…

Suggested change
return "ffffff";
return "#ffffff";

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Embarrassing. Looks like tests worked because white is the default, I tried it in a ternary with null and the result was the same. Fixing for readability

}
};

const defaultSettings = Object.freeze({
debugMode: false,
popupIconColored: false,
qrCodeType: "svg",
qrColor: "#0c0c0d",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also generally, I guess you could maybe also adjust the QR code color in case of "dark mode", so that it matches to the background color? Or is this really not needed? (did you check the contrast/tested with QR code scanners etc.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried out different combinations, always testing for contrast and QR scannability (if that's a word?). This combination seemed to reduce the white glare, stay in line with Photon and stay scannable better than others. But there might be a better solution

qrBackgroundColor: "#ffffff",
qrBackgroundColor: setQrBackgroundColor(),
qrErrorCorrection: "Q",
autoGetSelectedText: false,
monospaceFont: false,
Expand Down
1 change: 1 addition & 0 deletions src/common/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
--grey-20: #ededf0;
--grey-30: #d7d7db;
--grey-50: #737373;
--grey-60: #4a4a4f;
--grey-90: #0c0c0d;
--grey-90-a10: rgba(12, 12, 13, 0.1);
--grey-90-a20: rgba(12, 12, 13, 0.2);
Expand Down
6 changes: 6 additions & 0 deletions src/popup/modules/UserInterface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,12 @@ 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
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you move that from CSS to JS now?
IMHO a combination would be just fine…

Everything which you can define statically, put into CSS. (as it was before)
And everything which needs JS-handling, use JS…

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving back to CSS

qrCodeText.style.color = "#ffffff";
}
}
});

Expand Down