Dark mode

If dark mode is enabled the user may select one of three themes from their profile menu, System (default), Light, Dark. If dark mode is not enabled the users will always use the Light theme. System will use the theme of the browser.

Setup

From Theme > Color themes > Set default themes a dark theme may be made available to end users. When there is a dark mode the default setting for users is "System".

Logotypes

New dark mode logotypes should be uploaded, unless the current logos also looks good in dark mode.

HTML editors

All HTML editors have been converted to support dark mode, however if any HTML editors should not support dark mode it should be disabled for that specific field info.

Guidelines:

• HTML editors used to style text that is displayed inside Softadmin® should support dark mode.
• HTML editors used for text displayed on external web sites should not support dark mode, unless the external site also supports dark mode.
• HTML editors used to display text that is sent as e-mail should generally not support dark mode, unless the Css column is used with a CSS that supports dark mode.

HTML View

HTML Views using the menu item setting CSS with a value of Softadmin® default CSS or Empty will support dark mode out of the box.

Softadmin® legacy CSS should be replaced by a new CSS to support dark mode.

Any custom CSS should be modified to support dark mode See guidelines.

Custom colors

All menu items using custom colors, for example Calendar, Planner and more, should be reviewed to ensure compatibility with both themes. These components require you to pick a color that works in both light and dark mode.

Nodegraph, Link list and Radio cards sets the tones of colors automatically and should not require any changes. Future releases may better support this without action for other components.

Custom style

All menu items using custom style set by _style columns should be reviewed to ensure compatibility with both themes. It is likely this does not work out of the box. See guidelines

CSS guidelines

To ensure compatibility with dark and light mode while also supporting browsers older than 2024 using the CSS feature light-dark together with a fallback is recommended.

Example

Example how to make background-color use "white" in light theme and "black" in dark theme.

Old:

background-color: white;

New:

background-color: white;
background-color: light-dark(white, black);

Remarks

The developer may not use a theme with a light background as the dark theme, since some color choices assumes a dark background for contrast. This is not enforced, but will produce a horrible design.