From 5d4c1b96a9b110fceef226591326d6aeae8f1b61 Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Fri, 20 Nov 2015 18:53:34 -0800 Subject: [PATCH] feat(dark-mode): Double invert filter for nice dark HTML bodies --- internal_packages/message-list/lib/email-frame.cjsx | 4 +++- internal_packages/ui-dark/package.json | 1 + internal_packages/ui-dark/styles/email-frame.less | 10 ++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 internal_packages/ui-dark/styles/email-frame.less diff --git a/internal_packages/message-list/lib/email-frame.cjsx b/internal_packages/message-list/lib/email-frame.cjsx index 98d8cff9f..3c1ae6f4b 100644 --- a/internal_packages/message-list/lib/email-frame.cjsx +++ b/internal_packages/message-list/lib/email-frame.cjsx @@ -45,7 +45,9 @@ class EmailFrame extends React.Component # `padding`. doc.write("") - EmailFixingStyles = document.querySelector('[source-path*="email-frame.less"]')?.innerText + EmailFixingStyles = "" + for sheet in document.querySelectorAll('[source-path*="email-frame.less"]') + EmailFixingStyles += "\n"+sheet.innerText EmailFixingStyles = EmailFixingStyles.replace(/.ignore-in-parent-frame/g, '') if (EmailFixingStyles) doc.write("") diff --git a/internal_packages/ui-dark/package.json b/internal_packages/ui-dark/package.json index 6cec18065..a24da835b 100644 --- a/internal_packages/ui-dark/package.json +++ b/internal_packages/ui-dark/package.json @@ -7,5 +7,6 @@ "engines": { "nylas": "*" }, + "styleSheets": ["email-frame"], "private": true } diff --git a/internal_packages/ui-dark/styles/email-frame.less b/internal_packages/ui-dark/styles/email-frame.less new file mode 100644 index 000000000..4367a3d4b --- /dev/null +++ b/internal_packages/ui-dark/styles/email-frame.less @@ -0,0 +1,10 @@ + +.ignore-in-parent-frame { + body { + -webkit-filter: invert() hue-rotate(180deg); + color: #111; + } + img { + -webkit-filter: invert() hue-rotate(180deg); + } +}