March 14, 2019

Tutorial: How to Implement Custom Themes in Yoroi

Yoroi now allows users to save their own custom CSS configurations to a persistent local storage space. In other words, this will enable you to create custom themes for your Yoroi wallet and allow you to save them. Furthermore, your style changes are stored locally in such a way that they will not break future updates to Yoroi.

Of course, if, in the future, developers add a new stylistic element to the wallet then you will likely have to edit the CSS for that element to match your custom theme. This quick tutorial will walk you through the simplicity of creating your own theme for Yoroi.

Tutorial: How to Implement Custom Themes in Yoroi

Setting your theme
The first step is to simply open the More tools->Developer tools menu in Chrome (Alternatively, press F12)

Then click the Elements header. Look at the Styles sub-menu and scroll down to the elements inherited from html.

Let’s say you want to change the background color of the standard buttons. You would change the following line:

— theme-button-primary-background-color: #daa49a;

After you are satisfied with your changes navigate to the settings icon on the Yoroi wallet. Then click the Themes menu item. Then click the Export Theme button.

This saves your CSS changes to Chrome’s local storage. The next time you load Yoroi you will see the changes that you made and you can enjoy your own custom theme from that point on by default.

Sharing your theme
If you want to share your theme with others you can open the Developer tools window and select the Application header. Then go to the Local Storage drop down menu. Select the chrome-extension. You should see a CUSTOM-THEME key with the associated CSS values.

You can simply copy this and share it with others. Others can insert your theme into their Local Storage to import your theme and it will take effect after they refresh their page.

Removing your theme
There are three ways to remove your custom theme:
1. Press the button overlaid on top of your current selected theme

2. Select a different theme (if one is available)
3. Remove the key from Local Storage and refresh the page

Need even more customization?
Yoroi is an open source program by EMURGO. We welcome contributions by the community, please go to our project on Github and talk to us about your idea. We would love to hear it.

About EMURGO
EMURGO drives the adoption of Cardano and adds value to ADA holders by building, investing in, and advising projects or organizations that adopt Cardano’s decentralized blockchain ecosystem. EMURGO leverages its expertise in blockchain R&D as well as its global network of related blockchain and industry partners to support ventures globally.

EMURGO is the official commercial and venture arm of the Cardano project, registered in Tokyo, Japan since June 2017 and in Singapore since May 2018. EMURGO is uniquely affiliated and works closely with IOHK to grow Cardano’s ecosystem globally and promote the adoption of the Cardano blockchain. To learn more about the project, visit the EMURGO website.

|| Click here to subscribe to the EMURGO Newsletter ||

About EMURGO
・Official Homepage: dev.indonesia.emurgo.io
・Twitter (English): @emurgo_io
・Twitter (Japanese): @Emurgo_Japan
・Youtube: EMURGO channel
・Telegram: EMURGO Announcements
・Facebook: @dev.indonesia.emurgo.io
・Instagram: @emurgo_io
・Medium: EMURGO Announcement
・LinkedIn: @emurgo_io