b34a2ee2ed
This is a flat (without history) import of (some of) the content from our markdown module. We've imported this without history because the repo contains our blog posts and showcases posts content prior to porting them to strapi. Since this contains many images, it would balloon the size of this repo to import the full history. Instead, please refer to the history of the (archived) markdown repo at: https://github.com/freesewing/markdown
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);
|
|
```
|
|
|