diff --git a/docs/README.md b/docs/README.md index 1e3b2f61..e782a256 100644 --- a/docs/README.md +++ b/docs/README.md @@ -17,3 +17,4 @@ Documentation for specific topics can be found in the following files: - [Analytics](analytics.md) - [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md) - [i18n](i18n.md) + - [Colors and icons](colors-and-icons.md) diff --git a/docs/colors-and-icons.md b/docs/colors-and-icons.md new file mode 100644 index 00000000..4dc9f9e6 --- /dev/null +++ b/docs/colors-and-icons.md @@ -0,0 +1,62 @@ +# 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](../src/marketplace.css) file and change the +color variables: + +```css +--marketplaceColor: #c0392b; +--marketplaceColorLight: #ff4c38; +--marketplaceColorDark: #8c291e; +``` + +# Icons + +The default icons are generated with +[RealFaviconGenerator](https://realfavicongenerator.net/). 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. + +1. Open https://realfavicongenerator.net/ + +1. Upload your original icon image + +1. Configure platform specific icons + + **Note:** Remember to set the "Theme color" in the Android Chrome section + +1. Configure the paths to use `/static/icons/` as the root path of the icons + +1. Generate the icons + +1. Unzip the favicons.zip archive and replace the default icons and + files in [public/static/icons/](../public/static/icons/) with the + new icons + +1. Replace the default HTML snippet in + [public/index.html](../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:** + + ```html + + + + + + + + + + ``` diff --git a/public/index.html b/public/index.html index a3bcc5f5..8dba04aa 100644 --- a/public/index.html +++ b/public/index.html @@ -9,16 +9,17 @@ - - - - - - - - - - + + + + + + + + + + +