Add a skin
Learn what a custom skin is and how to use one for your space with a custom domain.
What is a skin?
A skin is a custom color scheme which you can use for your space if it has a custom domain set up. The customization will be visible only on the custom domain and will not affect the color scheme of your space on https://snapshot.org.
If you haven't setup a custom domain yet, head to Add a custom domain to learn how you can do it.
Add a skin to your space
Head to your space settings on Snapshot and find the Custom domain
section.
Select a skin by scrolling through the list of available choices or by typing the name you are looking for. If none of them work for you, you can create a custom skin following the section below: Create a custom skin
Don't forget that the skin will only be applied to the custom domain URL!
That's it! You should be able to see the custom color scheme for your space on its custom domain 🎉
Create a custom skin
1. Fork the snapshot-spaces repository
Create a fork of the snapshot-spaces repository:
2. Add the styling for your space
Create a new file in the skins
directory following the my-space.scss
naming convention:
Add your custom scss
to the newly created file. The class name .my-space
should match the filename you created. Make sure that you edit only the values (i.e. #384aff
on the right-hand side and do not change the properties (i.e. --primary-color)
.
Don't forget to change the file name my-space.scss and css selector .my-space to your space name.
You can have a look at a custom skin example by following this link.
3. Import the scss file
Add the import of your newly created scss
file to the skins/index.js file in the following format:
4. Create a pull request
Create a Pull Request with the above changes on the original snapshot-spaces repo.
The review can take the team up to 72 hours, so please be patient 🙏
After the PR has been merged, you will need to wait for the release of a new version of Snapshot which can take a couple of days. Once it's deployed you can move on to the next step.
5. Update your space settings
Follow the steps from Add a skin to your space to use your own custom skin.
Last updated