44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
---
|
|
title: theme
|
|
---
|
|
|
|
[](/plugins)
|
|
|
|
[](https://www.npmjs.com/package/@freesewing/plugin-theme)
|
|
|
|
[](https://deepscan.io/dashboard#view=project&tid=2114&pid=2993&bid=23256)
|
|
|
|
[](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
|
|
|
|
Like all [build-time plugins](/guides/plugins/#build-time-plugins), you load them
|
|
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);
|
|
```
|
|
|