Synology Photos

We have completely revamped the product design since its release 3 years ago. The first change involved changing the tab navigation at the top of the website into a sidebar. By saving upper space, we were able to keep the search bar at the top of the page in order to make searching more intuitive.

Since many users had requested a dark mode, on the 1.6.0 release, we added dark mode support for Synology Photos. Users can now switch between themes manually or automatically based on their system preferences.

The main challenge was to refactor the React components and style system to support different themes. Since dark mode isn't just about changing color, we had to make sure the dark mode looked natural. Therefore, we collaborated closely with the UI designers to review all our current color variables and styles, like shadows, gradients, and opacity. We additionally reviewed all the layouts and font styles to improve accessibility.

There were many issues to solve when rewiring all the interfaces. For example, since we use tooltips to indicate information for each icon in the navigation bar, we modularized our components and refactored class components into function components. Using the benefits of refactoring, I also built a new feature to bring up the context menu on a right click. Context menus can save users time by offering access without toolbars. Users can select the items and manage them with a simple right click.

We created a new style system that allows us to define color variables for each theme and use them to style our components. We further created a new component library for sharing different projects. In this feature, I surveyed several methods to reach our goal and prototyped several designs.