Theming support for the Polyring widget
24. April 2021 • 2 min readHonestly that’s not a fully satisfactory solution; it’d be better to have a single parametrized widget that one could easily adapt to any design with a few simple arguments.
That’s what I wrote in my post a few days back about building Polyring in regards to the widget members of the webring can embed in their page. I also mentioned that Luca (gewlar) was working on improving the situation. Only a day later, he already sent a pull request which did exactly that.
The clever solution allows you to pass a theme
parameter to the webcomponent. You can either use one of the “official” themes by passing theme="default"
or theme="dark"
to the widget, or mix it up with your own style by passing a link to a .json file: theme="<link-to-json>"
.
There are six variables for members to modify:
--background-color
--outer-border-color
--inner-border-color
--href-color
--href-color-active
--text-color
These should be rather self-explanatory; you can look up the default theme JSON to see the simple structure your file should have. A neat feature Luca also implemented is that the logo will adjust its color accordingly.
Member of the Polyring webring
…but try not to make the banner too ugly. I can’t stop you from doing it, though.
Big thanks to Luca for getting this done so quickly; if you’re a Polyring member, then go and use it! (And if you aren’t a member yet but want to become one, check out the instructions for doing so.)