Themeizer

<p>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.</p><h2>To change theme in Figma</h2><p><strong>Preparation</strong></p><ol><li>Create folders with colors for all your themes, where folder name is the name of theme</li></ol><p><strong>Usage</strong></p><ol><li>Select an element</li><li>Choose another theme</li></ol><p><strong>Example</strong></p><ul><li>Create color folders with valid themes. For example</li></ul><pre class="ql-syntax" spellcheck="false">light/primary: #1A237E light/body: #212121 light/antibody: #FAFAFA dark/primary: #C5CAE9 dark/body: #FAFAFA dark/antibody: #212121 </pre><ul><li>Create a simple frame with light (<em>or dark</em>) colors;</li><li>Go to the themes tab, select the frame you created, select another theme in the plugin ("themes" tab -&gt; click on needed theme -&gt; click the "select" button).</li></ul><p><br></p><h2>To change colors in your project</h2><p><em>Advanced for developers</em></p><p><strong>Preparation</strong></p><ol><li>Set up themes as described above</li><li>Specify in the settings the address to the API and the necessary headers. Save the settings.</li><li>Add and configure needed packages to your project [<a href="https://www.npmjs.com/package/themeizer" rel="noreferrer noopener nofollow ugc" target="_blank"><em>read more</em></a>]</li></ol><p><strong>Usage</strong></p><ol><li>Go to the publish tab and publish ypur changes.</li><li>Be happy, new colors in your site.</li></ol><p><strong>Example</strong></p><ul><li>Registry in <a href="https://jsonbin.io/" rel="noreferrer noopener nofollow ugc" target="_blank">jsonbin.io</a></li><li>Create a new bin with mock json ({"data": {}})</li><li>Open plugin settings tab</li><li>Add your bin url to the "Save at" option (<code>https://api.jsonbin.io/v3/b/6g4gjd56u</code>, where <code>6g4gjd56u</code> is your bin id)</li><li>Add the url of the latest version of your bin as "Read from" option (<code>https://api.jsonbin.io/v3/b/6g4gjd56u/latest</code>)</li><li>Add the required headers (<code>{"X-Master-Key": "some-private-key", "Content-Type": "application/json", "X-Bin-Meta": "false"}</code>, where <code>X-Master-Key</code> is your private key [<em>https://jsonbin.io/api-keys</em>])</li><li>Install <a href="https://www.npmjs.com/package/themeizer" rel="noreferrer noopener nofollow ugc" target="_blank">themeizer</a></li><li>Configure the environment as written in the package description. The url would be equal to the "Save at" option, the headers would be equal.</li></ul>