Back to Plugins
Themeizer

Themeizer

Ecosystem for adding theme support to your designs and code

themenight modethemeizersitedark modeswapdevelopercolorstylescode-generators

Plugin Preview

Themeizer preview

About this plugin

Themeizer is an ecosystem for adding theme support to your designs and code. Use this plugin to change themes in your designs and publish them to the cloud.To change theme in FigmaPreparationCreate folders with colors for all your themes, where folder name is the name of themeUsageSelect an elementChoose another themeExampleCreate color folders with valid themes. For examplelight/primary: #1A237Elight/body: #212121light/antibody: #FAFAFAdark/primary: #C5CAE9dark/body: #FAFAFAdark/antibody: #212121Create a simple frame with light (or dark) colors;Go to the themes tab, select the frame you created, select another theme in the plugin ("themes" tab -> click on needed theme -> click the "select" button).To change colors in your projectAdvanced for developersPreparationSet up themes as described aboveSpecify in the settings the address to the API and the necessary headers. Save the settings.Add and configure needed packages to your project [read more]UsageGo to the publish tab and publish ypur changes.Be happy, new colors in your site.ExampleRegistry in jsonbin.ioCreate a new bin with mock json ({"data": {}})Open plugin settings tabAdd your bin url to the "Save at" option (https://api.jsonbin.io/v3/b/6g4gjd56u, where 6g4gjd56u is your bin id)Add the url of the latest version of your bin as "Read from" option (https://api.jsonbin.io/v3/b/6g4gjd56u/latest)Add the required headers ({"X-Master-Key": "some-private-key", "Content-Type": "application/json", "X-Bin-Meta": "false"}, where X-Master-Key is your private key [https://jsonbin.io/api-keys])Install themeizerConfigure the environment as written in the package description. The url would be equal to the "Save at" option, the headers would be equal.

Plugin Details

Version10
CreatedJanuary 19, 2022
Last UpdatedSeptember 15, 2022
CategorySoftware development
CreatorAlex Savelyev
Stats395 installs, 12 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:{"themes": "./dist/themes.html", "publish": "./dist/publish.html", "settings": "./dist/settings.html"}
  • main:./dist/server/main.js
  • Editor Types:
    figma