Customize your Polyring embed

## Preface

This topic is very niche, but some of you fellow [Polyring](https://polyring.ch) members might wonder how to customize your embed (the one featured on every website of Polyring).


## Custom customizer

Julian from [xyquadrat.ch](https://xyquadrat.ch) (creator of Polyring) already has a [tutorial on how to customize your embed](https://xyquadrat.ch/blog/polyring-widget-theming/); however, to make all our lives easier, I whipped up a little interactive tool (vibe coded, of course) that changes the color and layout of the embed in real time.

[akuta.xyz/polyring](https://akuta.xyz/polyring)


As you can see in the screenshot, you're able to change the Banner Background, the Outer/Inner Border Color, Text Color, and (Active) Link Color.

You have the option to reset the theme to its light or dark version (standard is dark) based on the [dark.json](https://xyquadrat.ch/polyring/assets/themes/dark.json) and [default.json](https://xyquadrat.ch/polyring/assets/themes/default.json) files.

You can then press the button "Export Theme JSON," which will give you a similarly formatted file as the JSONs above, which you can then just use in your \`theme\` attribute in your webring HTML block:

```html
<webring-banner theme="/path/to/your/custom-theme.json">
<p>Member of the <a href="https://polyring.ch">Polyring</a> webring</p>
</webring-banner><script async src="https://polyring.ch/embed.js" charset="utf-8"></script>
```

## Afterword

Since this is my first blog, it's not very long or descriptive. Feel free to leave a comment or changes on the [GitHub repo for the website](https://github.com/Akutasan/polyring-embed-customizer). <i class="ph ph-sparkle"></i>