# Dark Theme

{% tabs %}
{% tab title="👥 相關" %}
* Layout ⟩ [Box](box)
{% 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;
```
