Sizzy 0.20 🎉

Sizzy 0.20 is here! 🎉🎉🎉 Let's dig in 😍

🌓️ Simulate Light/Dark mode

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system to use a light or a dark color theme. With Sizzy, now it is possible to simulate the prefers-color-scheme property.

This feature affects the content inside of the devices. If the website you're working on has support for prefers-color-scheme it should switch to the chosen color scheme, accordingly.

You can switch between three color schemes:

  • Light color scheme
  • Dark color scheme
  • System's color scheme (whatever you have chosen in your OS settings)

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/co.gif

You can also simulate the color scheme per device, by going through the device menu → choose a color scheme. In this case, only the chosen device will override the color scheme. This way you can work on the light and dark mode of your app at the same time 😍

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/onee.gif

In order to reset the color scheme of all the devices, you just need to click on the "Reset Color Scheme" button in the left sidebar. Then the devices that have manually been set to a certain color scheme, will reset to the default color scheme mode, set from the left sidebar.

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/res.gif


🔎 Zoom page in Full Mode & Reference Browser

We made zooming in and out possible in Sizzy's Full Mode and in the Reference Browser. By pressing on the Cmd or Ctrl in combination with + or - you can control the zoom level.

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/zoooom.gif

You always reset your zoom back to the default one, by pressing on the Cmd or Ctrl + 0.

Please note that this zoom is different than the zoom in the Default mode. In Default mode, the zoom increases and decreases the size of the devices. While the fullscreen zoom makes the content inside the Full mode and Reference Browser tabs look bigger or smaller.


⚡️ DevTools extensions on Windows

DevTools extensions are finally enabled on Windows! You can go to Settings -> Dev Tools and enable the extensions for React, Vue, Angular, or whatever else you need 🎉 🥳

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/ext.png


🐞 Additional Fixes

  • Fix navigation crash on some websites
  • Fix "Screenshot of all devices" button that used to freeze the app
  • Bug fix for screenshots getting stuck on specific websites after a refresh

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible. If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌