New Features in WoltLab Suite 6.0: Dark Theme

Colors play a major role in the design of one’s own page, these should either express something specific or contribute to the theme of the page; typical examples are team colors or the color scheme of the associated company or product. A style with predominantly very bright colors can look very good, but in situations with dimmed lighting, for example during the evening hours, it can create an unpleasantly strong color contrast.

For these situations, a dark theme is usually used, the purpose of which is to preserve the key colors, but still rely primarily on dark shades. Dark shades of gray and blue for the background are a popular choice, providing both a good contrast and a slight color accent to soften the design.

Dark Theme as an Alternative

The default style is augmented in WoltLab Suite 6.0 with a dark color scheme that relies on dark background colors with light fonts. This covers all components within the software including but not limited to color values of warning messages or labels.

Accessible Color Selection

During implementation, we put a lot of emphasis on the fact that all texts have a contrast of at least 4.5:1 to ensure optimal readability and thus meets the criteria of WCAG 2.0 Level AA. This represents an important building block in accessibility and is also considered to be a positive signal for search engines such as Google

Manual Selection of the Color Scheme

The dark color scheme is individually and optionally configurable for each style, therefore it is still possible to maintain only one variant of a style. A dark theme can be added to existing styles and is not limited to new styles only.

The dark theme is an optional feature of styles and can be set per style. By default, the color scheme is selected implicitly based on the preferences of the browser and operating system, provided that the currently selected style supports it. Users also have the option to explicitly force the use of the light or dark theme, thus setting a separate preference individually per device used.

Revision of the Layout of the Administration Interface

In the administration control panel, the dark theme is also available, allowing for consistent adherence to the user’s preferences. The dark theme of the control panel is available at all times and does not depend on any installed style.

The layout of the menus as well as the header has been modernized, in particular, more space is now made available for the content area and the menu can display more menu items within the same vertical height.