snapshot
Blog
  • Welcome to Snapshot docs
  • User guides
    • Spaces
      • What is a space?
      • Create a space
        • Register an ENS domain
        • Alternative way to create a space
      • Settings
      • Sub-spaces
      • Space verification
      • Space hibernation
      • Add a custom domain
      • Add a skin
      • Space roles
      • Space badges
      • Snapshot Pro
      • Space handbook
        • Most common
        • Voting threshold
        • Anti-whale
        • Sybil resistance, scam & spam prevention
        • Liquidity / staking pool
        • Delegation
        • NFT voting
          • Most common: ERC-721
          • Multi-token: ERC-1155
          • POAP - Proof of Attendance
        • Custom calculations
    • Create a proposal
    • Voting
      • Vote on a proposal
      • Delegate your voting power
    • Voting strategies
    • Validation strategies
    • Using Safe multi-sig
    • Delegation
  • Developer Guides
    • Create a voting strategy
    • Create a validation strategy
    • Identify integrator activity
    • Add a network
  • Tools
    • Tools overview
    • Snapshot.js
    • API
      • API Keys
    • Webhooks
    • Subgraphs
    • Mobile notifications
    • Bots
  • Snapshot X
    • Overview
    • User guides
      • Create a space
      • Proposals
      • Voting
      • Safe execution setup
    • Protocol
      • Overview
      • Space actions
      • Space controller actions
      • Authenticators
      • Proposal validations
      • Voting strategies
      • Starknet specifics
      • Execution strategies
      • Audits
    • Services
      • Architecture
      • API
      • SX.js
      • UI
      • Mana
  • V1 interface
    • Email notifications
    • Plugins
      • What is a plugin?
      • Create a plugin
      • oSnap
      • SafeSnap
      • POAP
      • Quorum
      • Domino notifications
      • Galxe
    • Boost
  • Community
    • Help center
    • Discord
    • X (Twitter)
    • GitHub
Powered by GitBook
On this page
  • What is a skin?
  • Add a skin to your space
  • Create a custom skin
  • 1. Fork the snapshot-spaces repository
  • 2. Add the styling for your space
  • 3. Import the scss file
  • 4. Create a pull request
  • 5. Update your space settings

Was this helpful?

Edit on GitHub
Export as PDF
  1. User guides
  2. Spaces

Add a skin

Learn what a custom skin is and how to use one for your space with a custom domain.

PreviousAdd a custom domainNextSpace roles

Last updated 1 year ago

Was this helpful?

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!

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:

└── skins
    └── my-space.scss

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).

.my-space {
  --primary-color: #384aff;
  --bg-color: white;
  --text-color: #586069;
  --link-color: #111111;
  --heading-color: #111111;
  --border-color: #d1d5da;
  --header-bg: white;
  --block-bg: transparent;
}

Don't forget to change the file name my-space.scss and css selector .my-space to your space name.

3. Import the scss file

import my-space from "./my-space.scss";

4. Create a pull request

5. Update your space settings

Follow the steps from Add a skin to your space to use your own custom skin.

That's it! You should be able to see the custom color scheme for your space on its custom domain

You can have a look at a custom skin example by following .

Add the import of your newly created scss file to the file in the following format:

Create a Pull Request with the above changes on the original 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 which can take a couple of days. Once it's deployed you can move on to the next step.

🎉
🙏
this link
skins/index.js
snapshot-spaces
Snapshot
Snapshot skin selector.
https://github.com/snapshot-labs/snapshot-spaces