GlobalStyle

Purpose

A component that, when rendered, applies style defaults wherever it is defined: the normalize, the fixed 16px root, the page ground and primary ink from the surface ladder (surface.canvas / ink.primary), the root of the ground channel, and the color-scheme rules the mode engine switches on — html[data-apollion-mode="dark"] { color-scheme: dark } plus a prefers-color-scheme fallback while the preference is system. Render it inside the ApollionProvider so it can read the attribute name and the preference. See Dark Mode Engine.

Example

In the following example, css made it possible to apply a given style to the html and body elements.

import { css } from 'styled-components';
import { ApollionProvider, GlobalStyle } from '@apollion-dsi/core/themes';
 
<GlobalStyle
  extend={css`
    html,
    body {
      background-color: ${({ theme }) => theme.foundation.bg.surface};
      font-family: ${({ theme }) => theme.font.fontFamily.code};
    }
  `}
/>;

GlobalStyle API