How I Recorded an App in Light and Dark Modes for Seamless Video Playback?

A while ago, I did one project with my close friend for a client. It was a low-budget project for a small business that wanted to provide some copywriting and marketing services for its clients.

I just remembered that I did one part of that project, which I found very interesting and tempting to achieve. There was a section (maybe still is) on the home page showcasing their dashboard and all pages within it. As the web application supports both light and dark modes, it would be a good idea to record the pages in both themes so that the video presentation can seamlessly progress.

If the user was on one of the modes while watching this autoplay inlined video, switching it should not reset the video progress, and it should not glitch/jump. Instead, it should seamlessly progress in both modes.

Little did I know that it would be a challenging task to achieve. I had to do the following for this video:

• Make it short
• Show all pages
• Click and scroll through pages

Sounds simple, but recording it in light mode, making all these points, then switching to dark mode, and doing it again, was impossible.

Prerequisite

The most important part that made this possible was my 34″ LG UltraWide Curved monitor, which has a resolution of 3440×1440.

Another piece of this puzzle was BrowserSync, a tool you can use to sync your browser across multiple devices. So whatever you did in one browser automatically gets reflected in other sessions.

Finally, an application to record the screen. I went with ScreenFlow at a time, but any other screen recording application would be sufficient.

The Recording Process

So with all that information and tools, I was ready to start. First, I opened one session in light mode on Chrome, and this session was the controlling one. Then, I opened another session in Chrome's incognito, and this session was in dark mode, behaving as a presentation.

I did a simple horizontal half-by-half split for each browser and was ready to record. After successful recording, I had to do some post-processing to make it two videos, one for light mode and one for dark mode, and as you may have guessed, I did this in ScreenFlow too.

The Assembling Process

As I built this project with Nuxt on the front end, I will explain what and how I did it with Vue. It's pretty straightforward, and you can do it with any other framework or even vanilla JavaScript. I rewrote it using Composition API instead of the Options API that I used back then, so it's easier to understand and adopt the logic for other frameworks.

Here's a modified preview to allow transition between the modes while keeping the video progress intact. The version I originally built for this project was slightly different, but the idea is the same. You can also view the code and tweak it for your needs. The demo uses setInterval() to simulate the theme change, but you would not use this in production.

The most important parts to note here are the following:

• keep track of the current theme/mode
• keep track of progress on currently playing video
• handle pause and play events for both videos (to save bandwidth and bills)
• handle current-time of currently playing video

The original version that I wrote uses a single <video /> element, but as you can probably guess, you can't add a transition to a component that changes source, that is why I have used a bit different approach for this preview and explanatory.

You may find this brilliant or not, but I hope it helps you someday. I will surely use this approach for all clients and projects whenever there's a chance for some video recording preview.