2021-10-17 18:26:00 +02:00
---
title: theme
---
2021-08-25 16:09:31 +02:00
[](/plugins)
2021-10-17 18:26:00 +02:00
2021-08-25 16:09:31 +02:00
[](https://www.npmjs.com/package/@freesewing/plugin -theme)
2021-10-17 18:26:00 +02:00
[](https://deepscan.io/dashboard#view =project& tid=2114& pid=2993& bid=23256)
2021-08-25 16:09:31 +02:00
[](https://github.com/freesewing/freesewing/issues?q=is%3Aissue+is%3Aopen+label%3Apkg%3Aplugin-theme)
The **theme** plugin provides CSS styling for SVG output:
< Example pattern = "rendertest" part = "test" caption = "An example of the styles provided by this plugin" design = {false} / >
It uses the [`preRender` ](/plugins#prerender ) hook to do so.
< Note >
This plugin only applies to rendered SVG output. If you use our React component to display
patterns, you should style our component or use our [css-theme ](/reference/packages/css-theme ) package.
< / Note >
## Installation
```bash
npm install @freesewing/plugin -theme
```
## Usage
2021-10-17 18:26:00 +02:00
Like all [build-time plugins ](/guides/plugins/#build-time-plugins ), you load them
2021-08-25 16:09:31 +02:00
by passing them to the [`freesewing.Design` ](/reference/api#design ) constructor:
```js
import Aaron from "@freesewing/aaron ";
import theme from "@freesewing/plugin -theme";
const myAaron = new Aaron()
.use(theme);
```
2021-10-17 18:26:00 +02:00