import { Meta } from '@storybook/addon-docs';

<Meta title="Overview/Theming" />

# Theming

Use CSS Variables to customize the look and feel of your application.

1. Write own Theme and Styles for components
2. Using Radix Themes

## 1. Write own Theme and Styles for components

// TODO

## 2. Using Radix Themes

Install [Radix Themes](https://www.radix-ui.com/themes/docs/overview/getting-started) and start building in minutes.

### Install Radix Themes

```bash
npm install @radix-ui/themes
```

### Import the CSS file

Import the global CSS file at the root of your application.

Example for `global.css`

```bash
@import '@radix-ui/themes/styles.css';
@import '@angular/cdk/overlay-prebuilt.css';
```

For NX added to `build.options`

```JSON
"styles": [
    "@radix-ui/themes/styles.css",
     // For styling overlay, `cdk-overlay-dark-backdrop`
    "@angular/cdk/overlay-prebuilt.css"
],
"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/"
    ]
}
```

### Setup CSS selectors

Add selectors to **body** `radix-themes light light-theme`

```html
<body class="radix-themes light light-theme">
  ...
</body>
```
