What is dark mode
Dark mode (also known as dark Mode) is not a new concept in HMI. Once upon a time, the pattern of green characters on a pitch-black screen was all we had. Today’s screens are getting more colorful, but dark modes still exist. Why?
In terms of usage, dark mode is different from night mode;
The dark mode is a scenario-based supplement to the light theme, which can meet users’ needs during the day, make users more focused on their operational tasks, and bring visual immersion. Therefore, the expression of information content in dark mode will pay more attention to the visual;
At the same time, setting the dark mode will reduce the brightness of the device screen. Currently, most of the high-end mobile phones use OLED screens, which can independently control whether a single pixel emits light due to the self-luminous property of the material. The dark theme will reduce the brightness of the device screen, while still meeting the minimum color contrast.
The traditional night mode focuses more on the experience in low-light Settings. From the user’s health point of view, when the user is comfortably lying in bed, or turn off the lights to play with the phone, by reducing the brightness and contrast of the screen, not too dazzling, to achieve the effect of helping protect the eyes. The night mode probably does not guarantee that all information is readable when used in a bright light environment.
Advantages of dark mode
** Advantage 1: Enhanced visual immersion; ** Makes users more focused on their own operations and interface content.
** Advantage two: reduce the brightness of the screen; ** Narrow the gap between the screen display content and the ambient light intensity, reducing the burden on the eyes.
** Advantage three: reduce power consumption; ** According to Google, phones with OLED screens use significantly less power when in “dark mode.”
** Advantage four: create high-end sense; * Dark patterns offer advanced, mysterious semantic symbolism and hold more possibilities than light patterns.
Dark pattern industry design code
Material Design dark mode
(I) Application principles:
1. Gray instead of black
Use dark gray instead of black to indicate height and space in an environment with a wider range of depths. (Explanation: Since it is impossible to use shadows in a dark theme as in a conventional MD design, use different shades of gray to represent the z-axis spatial relationship. Not using pure black as a broad base color provides a wider gamut to reflect the Z-axis depth relationship.)
Briefly describe the z-axis concept:
In general, if we want to show the sense of dimension and depth in a flat interface, we will use object shadows or perspective relationships to show it. In Material Design, the introduction of the z-axis concept can easily solve this problem. In the figure below, components are at different heights on the Z-axis, which indirectly affects the performance of the shadows.
So is the z-axis introduced just to draw a shadow? Of course not! More importantly, it is used to show the order and importance of UI components. In the picture below, the Card View is below the App bar on the z-axis, because normally the Card View is hidden under the App bar when scrolling up and down; FAB is at the top (8DP) because it has the highest level of importance and is higher than actions on the App bar.
2. Color and emphasis
Use only a limited number of colors for emphasis in a dark theme so that most areas are dark.
3. Save energy
In products that require efficiency (such as devices with OLED screens), battery life can be extended by reducing the number of light pixels used.
4. Enhance accessibility
Meet the needs of regular dark mode users (such as amblyopia users) by meeting accessibility color contrast standards.
(ii) Characteristics & Characteristics:
- ** Contrast: ** Dark surfaces and 100% white text must have a contrast ratio of at least 15.8:1
- ** Depth: ** At higher altitudes, the component expresses depth by displaying a lighter surface color
- ** Desaturation: ** Primary colors are desaturated so that they pass at least 4.5:1 at all height levels
- ** Limited colors: ** Large surfaces use dark surface colors with limited color emphasis (light, unsaturated and bright, saturated colors)
Contrast can be checked by world Wide Web W3C color contrast, also can be calculated contrast;
www.w3.org/TR/UNDERSTA…
(3) Hierarchy analysis:
It may seem a bit confusing, but the above levels follow MD’s Z-axis theory, differing in depth while keeping the content high contrast. To sum up, it inherits the Z-axis principle of MD in the conventional scene (the depth is reflected by shadow and color under the white background) while transforming into the dark mode, and also ensures the efficiency of information acquisition.
(4) Attributes:
** Explanation: ** The black theme uses dark gray instead of black as the main surface color of the component. Dark grey surfaces can show a wider range of colours, heights and depths because it is easier to see shadows on grey than on black.
Dark grey surfaces can also reduce eye strain because light text on dark grey surfaces has lower contrast than light text on black surfaces. The official recommended surface color for a dark theme is #121212.
1. Altitude
In dark themes, components should retain the same default height levels and shadows as those in brighter themes, with the difference in depth height reflected by the different brightness of the surface.
** The higher the altitude, the lighter the surface: ** The higher the surface height (the closer to the hidden light source), the lighter the surface. This lightness is expressed by applying a translucent white overlay that becomes lighter as the surface gets taller. The dark theme surface is constructed by placing a translucent cover layer on the component surface, the surface is made brighter by applying a translucent white cover layer, and height is expressed by adjusting the surface color.
The default theme uses shadows to express height, while dark themes also use surface color shades to express height.
These surface cover values are designed to maximize readability while ensuring that different height levels are distinguishable from each other. High overlay transparency ranges from 0% for the lowest level to 16% for the highest. The stack layer illustrates the height difference between components.
Accessibility and contrast
The dark mode surface must be dark enough to display white text. ** There should be at least a 15.8:1 contrast level between text and background. ** This ensures that when applied to surfaces of the highest (and lightest) height, the body text reaches at least 4.5:1 through WCAG’s AA standard. If the background color is not deep enough to achieve a contrast ratio of at least 15.8:1 between the white text and the surface, the text on the highest (and lightest) height surface will not pass the 4.5:1 standard.
What if you want to use a darker color with the brand color?
To create a dark background with the brand, overlay the brand color transparency over the recommended dark theme background color (# 121212). In the example below, color # 1F1B24 is the result of combining the dark mode background color # 121212 with the 8% primary color.
(5)Use in UI applications
1. Theme colors
All dark theme colors should show elements with sufficient contrast, and the AA standard for WCAG is at least 4.5:1 when applied to all height hierarchical surfaces. Use low-saturation colors to improve accessibility.
A dark subject should be avoided using oversaturated colors, which can also cause optical vibrations against a dark background, which can cause eye strain.
In contrast, unsaturated colors can be used as a clearer substitute. Avoid oversaturated colors like the one shown below, which can cause visual shock against a dark background.
2. Main color selection
The primary color is the color most commonly displayed on the application screen and component. For specifications based on Material Design’s dark theme, use 200 tones of primary color;
** Special cases: ** Components with a shallow surface can display variations of the main color of a dark theme. In the image below, the text chain button on the white floating layer uses 700 dark colors.
Material. IO/design/colo…
3. Selection of auxiliary colors
Auxiliary colors can be used to highlight important parts of the UI. In dark mode, the auxiliary colors should be desaturated to meet a contrast level of 4.5:1. As shown below, purple is the dominant color and green is the auxiliary color.
4. Emphasize color
In a dark theme, the gray interface takes up most of the UI. Accent colors are usually light (unsaturated pastels) or bright (saturated, bright colors) to help emphasize the element and make it stand out. They should be used carefully to emphasize key elements, such as text or buttons.
To provide more flexibility and usability in a dark theme, it is recommended to use lighter tones (200-50) in a dark theme rather than the default color theme (900-500 saturated tone range).
5. Brand color
In order to maintain the brand identity, the brand color can be used in a dark theme with full saturation, but the application should be limited to one or two brand elements, such as a logo or brand button. Keep elements prominent in the hierarchy by careful use of brand colors.
The unsaturated colors should still be used in the rest of the dark theme UI, as shown below:
6. Wrong color
The error color is used to indicate the error status. For the Google specification, the dark mode error color is # CF6679. This dark theme color was created by taking a light theme error color (# B00020) and lighting it with a 40% white overlay, which passed the AA contrast standard.
7. Text color
Text Color on a Dark background: When light text appears on a dark background (black here), the following opacity level should be used:
- High strength text has an opacity of 87%;
- Opacity of medium key text and prompt text is 60%.
- Disable text opacity to 38%;
Dark mode for iOS
(1) iOS color
IOS uses 6 different gray levels. In the dark mode, pure black is used as the background and different degrees of gray are used to carry the page content.
(2) Levels
In iOS, hierarchies are expressed through backgrounds and projections. The list content is above a solid black background, indicating that the higher the level of content, the brighter the background color;
Dark mode design suggestions
1. Don’t simply turn white to black or arbitrarily reduce the brightness
Through the background color, card color, text color to establish information hierarchy, so that the content is better presented.
2. Do not use plain black background and plain white text
Do not use plain black (#000000) and plain white (¥FFFFFF) as text colors at the same time. High intensity contrast can cause visual fatigue for users.
3. Pay attention to the color adaptation of UGC products
In the wechat official account can be seen, part of the white mode is very beautiful typesetting, but in the dark mode, the content can not be seen, in the design to give users a better choice, try to avoid the use of transparent pictures.
How to design dark pattern
1. Establish a color code
Create a color specification and add 20% of the brand color to the pure black (#000000) or (#121212) background, and then adjust the HSB B value to get an ordered series of background colors.
2. Standard writing
In light mode, most of us use a fairly standard set of text colors: (H0 S0 B20), (H0 S0 B40), (H0 S0 B60), (H0 S0 B80), (H0 S0 B60), (H0 S0 B80) In dark mode, we can do the same.
