Define global variables in **_variables.scss**

```sass
:root {
  @media (prefers-color-scheme: dark) {
    --color-text: #ffffff;
  }

  @media (prefers-color-scheme: light) {
    --color-text: #000000;
  }
}
```

Import the file in **_app.js** - **_app.tsx** if you are using Typescript -

```javascript
import "public/static/styles/_variables.scss";
```

The use it in any componenet

```javascript
import React from "react";
import styled from "styled-components";

export default class Title extends React.Component {
  render() {
    return <Header>Some text</Header>;
  }
}

const Header = styled.h1`
  color: var(--color-text);
`;
```

Define and use global Sass variables in styled-components

Global Sass variables in styled-components

Sass