Colors and icons

One of the first customisations is to change the marketplace colors and icons.

Colors

To change the marketplace colors, open the src/marketplace.css file and change the color variables:

--marketplaceColor: #c0392b;
--marketplaceColorLight: #ff4c38;
--marketplaceColorDark: #8c291e;

Icons

The default icons are generated with RealFaviconGenerator. You can upload your original icon to the tool, customise the colors and themes, and download a generated set if icons and an HTML snippet to point to those images.

Open https://realfavicongenerator.net/
Upload your original icon image
Configure platform specific icons

Note: Remember to set the "Theme color" in the Android Chrome section
Configure the paths to use /static/icons/ as the root path of the icons
Generate the icons
Unzip the favicons.zip archive and replace the default icons and files in public/static/icons/ with the new icons

Replace the default HTML snippet in public/index.html with the snippet from the generator.

Note: Remove the manifest link from the snippet as we have a default manifest with extra data compared to the generated one. You can edit the default file as you wish.

Example HTML snippet:

 <!-- Start Favicons from https://realfavicongenerator.net/ -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
 <link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#c0392b">
 <link rel="shortcut icon" href="/static/icons/favicon.ico">
 <meta name="msapplication-config" content="/static/icons/browserconfig.xml">
 <meta name="theme-color" content="#c0392b">
 <!-- End Favicons -->

2 KiB Raw Blame History

Colors and icons

Colors

Icons

2 KiB

Raw Blame History