Dark Theme

👥 相關

• Layout ⟩ Box

Second Tab

In a greyscale design, it is possible to switch between "dark/light" theme with "filter" and CSS function invert():

box.invert { filter: invert(100%); }

High contrast themes tend to eliminate backgrounds. By employing a transparent outline the box shape can be restored. When a high contrast theme is not running, the outline is invisible.

outline: 0.125rem solid transparent;     
outline-offset: -0.125rem;

outline: 0.125rem solid transparent;     
outline-offset: -0.125rem;