> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/layout/system/dark-theme.md).

# Dark Theme

{% tabs %}
{% tab title="👥 相關" %}

* Layout ⟩ [Box](/web/css/layout/system/box.md)
  {% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

{% hint style="info" %}
In a **greyscale** design, it is possible to switch between "**dark/light**" theme with "**filter**" and CSS function **invert**():

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

{% endhint %}

{% hint style="info" %}
**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**.

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

{% endhint %}

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