How we created interface themes for ONLYOFFICE Docs
Earlier, we published a series of articles about the creation of ONLYOFFICE Docs interface, telling you a story behind the UI that millions on the web consider our suite’s most prominent advantage.
Design is a dynamic process, and so is the evolution of our interfaces. One of the recent tweaks we introduced are the color themes, a feature definitely worth its own story.
Read further to discover color themes in ONLYOFFICE Docs and understand why and how each of them came to be.
Why we need light and dark themes
Interface color themes are necessary for comfortable work of users, each suited to light conditions they prefer or have to work in.
Whether it’s generally well-lit room or a sunny day at the workplace, lighter interfaces help see the working space clearly and without irritating contrasts. Similarly, in the dimmed environments, darker interfaces featuring shades of gray, black, and other colors help save the eyes and comfort the person in front of the screen.
There are also fans of the Dark theme who generally prefer using it in all apps and websites, for the sake of trend or personal preference. Dark modes are featured in most of the modern interfaces, and have long become a standard.
Here, we get another reason to introduce color themes — to go in line with most operating systems and allow users to have a visually harmonious environment throughout their desktop.
To answer multiple user requests and make our software more comfortable to use and compatible with various working environments, we introduced a total of four themes in ONLYOFFICE to this day:
- Classic Light
- Light
- Dark
- Dark Contrast
There’s also a Dark document mode in ONLYOFFICE Docs that is an additional option when using one of the dark themes.
Why colors matter
Everything affects the way you perceive the interface — colors of the background, buttons, and texts, sizes and shapes of the elements, and spacing between them.
Combinations between colors and between shapes also matter, as they critically affect the overall visual experience. One minor design flaw can make a product inaccessible to entire groups of users.
For example, different color combinations affect contrast, which should be accurately balanced to keep the elements visible and distinct, and at the same time minimize the irritation.
Common mistakes in combining the colors include:
- Weak contrast between the elements and the background. This is critical for people with vision disabilities and issues.
- Overly distinctive contrast. It irritates the vision and is likely to be disturbing and distracting for the user, especially over the long working session.
How the work began
When we started working on the themes, the CSS files contained excessive amount of colors, and even experienced developers couldn’t understand which color was needed and where. These extra colors needed to be sorted and revised.
“I analyzed all the existing interface elements and redrew them in Figma, trying to balance the colors and minimize the number of similar colors in the palette. As a result, I obtained a semantic library of colors, the names of which reflected their purposes. Based on this library, we created the color tokens to be stored in the separate file in the repo” — Kirill, Senior UX Designer at ONLYOFFICE, describes the process.
Besides the color library, we reproduced the Light theme of the interface where we fixed all the existing issues in colors. After successful replacement of the old styles with the new ones associated with the corresponding color tokens, we started working on the Dark theme.
Creating the new colorways
After revising the color libraries, the design team could independently change the variables in code and immediately see the result in the actual interfaces. While creating the Dark theme, we added a few more colors and adjusted the transparency parameters in some tokens.
Classic light (historically our default interface theme) was the basis for creating all other color themes.
When beginning to build the new colorways, first, we selected background colors (toolbar, windows), to define the brightness of the whole interface and give it comfortable look. After that, we worked on the colors for controls, where the main challenge was to tune the contrast in a way that it is enough but not excessive.
Generally, we tried to stick to the following principle: for creating the light theme we picked colors as much brighter as darker we picked the colors for the dark theme. However, we couldn’t fully follow this principle because the document color remained white. This was the prerequisite for introducing the dark document mode discussed later in the article.
Additionally, we created the classic Light theme which was as close to the old interface as possible, to ensure that the users comfortably adapt to the new Light theme. After that, we created the Dark contrast theme.
All themes were tested according to the internationally accepted Web Content Accessibility Guidelines (WCAG), to make the interface accessible for people with vision impairments.
Interesting fact: We faced an unexpected problem with white fonts in the Dark Theme that looked more bold on the dark background. As a solution, we decided to increase the kerning (gaps between letters) in the interface texts to add some necessary air.
Dark vs Dark Contrast: what’s the difference
We tried to make the Dark theme neutral and comfortable for use in the dark environments, running multiple internal usability tests. Later, we received several arguments from the end users saying that it is too “neutral” and asking to make it more contrasting.
We created the more radical Dark Contrast theme that features darker shades of grey, sometimes almost black backgrounds. In this way, the light-shade texts begun standing out even more, bringing the desired contrast.
When working on the new interface variation and picking the colors, we still adhered to the WCAG requirements to keep it fully accessible even with apparent differences in essential colors.
Dark document mode
Dark document mode is useful for working in complete darkness. When the interface is light, the white document canvas looks comfortable in the surrounding environments. However, with a dark interface the contrast becomes more distinct and irritates the eyes. So, like some other office apps before, we created the Dark document mode.
There’s one dilemma we faced while making the decision, as it is not merely a design move, but also strategically significant change. ONLYOFFICE document editor is created to be a fully WYSIWYG application, while the present Dark document mode contradicts this principle.
We see the altered colors in the document while editing, but in fact the whole document will look different after printing it on paper. However, the documents are more and more rarely printed, and making online work more comfortable becomes a priority to us as well.
In the dark document mode, the colors are not simply inverted, but follow specific rules:
- We rarely see pure colors in real life, and the dark grey color of canvas is more comfortable to the eye. Hence, we decided to pick it instead of the direct black.
- Color elements are changed according to a specific algorithm. Darker shades become lighter. But the algorithm we created is not mature yet, and we are working on all the issues to improve it with time.
- At the same time, the black text is simply inverted to white, which doesn’t negatively affect the experience.
What is planned ahead
We can perfect the existing themes indefinitely. Over the course of work, a lot of things change or get obsolete and old.
We plan to introduce new themes, as well as create tools for theme customization so that our distributors and clients are able to adjust the colors how they prefer.
This new feature places a brand new challenge before us: a change in one color makes it necessary to change the colorway of the whole interface, so the mechanics must be backed by extensive research.
Read what interface themes are available in ONLYOFFICE Docs and how to change them in our blog.
