feat: add color schema detection

closes #101
microlinkhq · Nov 11, 2019 · ca55c0d · ca55c0d
1 parent 26744cd
commit ca55c0d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/screenshot/src/index.js b/packages/screenshot/src/index.js
@@ -33,8 +33,11 @@ const createSvgBackground = css => svgGradient(css, { width: '1388px', height: '
 
 module.exports = gotoOpts => {
   const preparePage = createPreparePage(gotoOpts)
-  return page => async (url, { type = 'png', direction = 'vertical', overlay, ...opts } = {}) => {
-    await preparePage(page, url, opts)
+  return page => async (
+    url,
+    { overlay = {}, type = 'png', direction = 'vertical', ...opts } = {}
+  ) => {
+    await preparePage(page, url, { overlay, ...opts })
     const screenshot = await page.screenshot({ ...opts, type })
 
     if (!overlay) return screenshot

diff --git a/packages/screenshot/src/prepare.js b/packages/screenshot/src/prepare.js
@@ -99,20 +99,25 @@ module.exports = ({ goto, ...gotoOpts } = {}) => {
 
   return async (page, url, opts = {}) => {
     const {
-      fullPage,
       device = 'macbook pro 13',
       disableAnimations = true,
-      hide,
+      overlay,
       click,
+      element,
+      fullPage,
+      hide,
       modules,
       scripts,
-      styles,
-      element,
       scrollTo,
-      overlay,
+      styles,
       ...args
     } = opts
 
+    if (overlay.browser) {
+      const value = overlay.browser.includes('dark') ? 'dark' : 'light'
+      await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value }])
+    }
+
     page.on('dialog', async dialog => {
       await dialog.dismiss()
     })