This will create a copy of this premade template under your GitHub account where you can modify and play with it (and where you will submit changes for the theme you will customize).

2. Customizing parameters and preparing a configuration file

The next step is to start customizing parameters for our theme. There are 3 files that are of interest:

package.json (has all of the necessary information that is needed in order for it to be published on NPM and become discoverable in the Plugin Manager).

(has all of the necessary information that is needed in order for it to be published on NPM and become discoverable in the Plugin Manager). src/index.js (plugin index file where we define some of the plugin parameters, in our case, we’ll only change the theme name).

(plugin index file where we define some of the plugin parameters, in our case, we’ll only change the theme name). src/styles/light.css (where all of the color parameters are defined, which are used throughout the wallet).

So let us start with the package.json file, we’ll be editing this file directly on GitHub (for convenience), you can edit this locally (copy/paste) in an editor of choice and paste it back after you are done in the GitHub editor, or use one of the other methods if you are already well versed with using Git (push, pull, ..).

Package.json

Click on package.json inside the repository (on your GitHub account):

Next click on the edit button on the right:

After this, we are going to go into edit mode where we can modify the ‘package.json’ file directly on GitHub, and after we are done we will commit the changes (save changes). What you will need to update are the following parameters. There is no need to update any other values than those which are marked below (you can leave the others as default).

“name”: “@arkecosystem/desktop-wallet-theme-template”, — name of the package on NPM here we need to replace @arkecosystem with your NPM username (what you chose when registering on NPM) followed by the package name (eg. pink-wallet-template) so in our case, this would become:

“name”: “@boldninja/pink-wallet-template”,

“description”: “Desktop Wallet Theme Template”, — a short description of the plugin, in our case this can be just something generic like what color tone you are using eg. “description”: “Pinkish ARK Desktop Wallet theme”,

“author”: “Author Name”, — name of the author of the plugin, this will be displayed inside the wallet as the publisher, so it can be your name, your nickname, username, … eg. “author”: “Boldninja”,

If other people are working on a plugin then you can add them under “contributors”, as well as write your name there as well.

“title”: “Theme Template”, — name of the plugin that will be displayed inside the Plugin Manager. Since we are doing a pink theme we’ll just name it Pinky Theme eg. “title”: “Pinky Theme”

“logo”: “https://raw.githubusercontent.com/ark-ecosystem-desktop-plugins/theme-template/master/logo.png", — is the thumbnail that will appear inside Plugin Manager for your theme. If you are going to be doing a custom logo, it should link directly to your custom image where it needs to be named logo.png and be 140x140px in size. If you are not going to be designing your own logo for your plugin then you can delete this logo line (or leave it unchanged, but we recommend deleting it so you can see how it looks without in the file below).

“images”: [ “https://imagelink.com/1.jpg", “https://imagelink.com/2.jpg" ], — you can include previews of the plugin inside the images block. Images need to be in .jpg or .png format, for optimal visual presentation sized at 640x550px. Up to 5 images will be included in the preview. This is an optional feature and if you don’t wish to include a preview just delete the images block.

“bugs”: { “url”: “https://github.com/ark-ecosystem-desktop-plugins/theme template/issues" }, —this is a link where people can report issues with your plugin. This can be just linked to your GitHub repository of theme, eg. in our case “bugs”: { “url”: “https://github.com/boldninja/theme-template/issues" },

“homepage”: “https://github.com/ark-ecosystem-desktop-plugins/theme-template#readme", — the website for your plugin. We are just going to link it to our GitHub repository “homepage”: “https://github.com/boldninja/theme-template",

“url”: “git+https://github.com/ark-ecosystem-desktop-plugins/theme-template.git" — under repository, we have a direct Git link to your plugin (in our case GitHub) so we replace it the same way as the previous option with our homepage by appending .git at the end “url”: “git+https://github.com/boldninja/theme-template.git"

These are the changes we need to do to the package.json file. This is how our file looks after the changes we made (changed parts marked, you can also click on the “Preview changes” tab to see what you changed and if you missed something):