Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: load space's custom colors #1090

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat: load space's custom colors #1090

wants to merge 7 commits into from

Conversation

wa0x6e
Copy link
Contributor

@wa0x6e wa0x6e commented Jan 10, 2025 •
edited
Loading

Summary

Toward https://github.com/snapshot-labs/workflow/issues/238

This PR will load an apply the new custom colors defined in the space's settings

Context

Instead of referencing a pre-defined skin, each space now have a new section in their settings, named skinsColors, which hold an object of variables, e.g.:

"space": {
  "id": "balancer.eth",
  "skinSettings": {
    "bg_color": "#ffffff",
    "text_color": "#000000",
    "content_color": "#efefef"
  }
}

The skin property is not used anymore, and the variables above will be transformed into CSS variables, then injected in the <head>.

This allow each space to customize their colors directly from their space settings. For now, colors are coming from the skin they're using, and imported from v1 using snapshot-labs/snapshot-sequencer#490

Only whitelabel spaces will have access to custom colors, which will also overwrite and disable the dark/light theme toggler

How to test

Depend on snapshot-labs/snapshot-hub#971

  1. Load a whitelabel space (see command below)
  2. It should have custom colors

Here's a list of colors from the most used skins:

Skin name Command
uniswap VITE_WHITE_LABEL_MAPPING='127.0.0.1;mod.eth' yarn dev
synthetix VITE_WHITE_LABEL_MAPPING='127.0.0.1;astronos.eth' yarn dev
fries VITE_WHITE_LABEL_MAPPING='127.0.0.1;friesdao.eth' yarn dev
balancer VITE_WHITE_LABEL_MAPPING='127.0.0.1;balancer.eth' yarn dev
light VITE_WHITE_LABEL_MAPPING='127.0.0.1;gmdao.eth' yarn dev

Uniswap

Screenshot 2025-01-11 at 02 09 45

Astronos

Screenshot 2025-01-11 at 02 11 40

Fries

Screenshot 2025-01-11 at 02 10 25

Balancer

Screenshot 2025-01-11 at 02 12 23

Light

Screenshot 2025-01-11 at 02 12 56

Notes

Not all themes are working 100%, this will be fixed on another PR, as this PR is focused on laoding the custom colors, and not refactoring the styles/classname

@wa0x6e wa0x6e force-pushed the feat-add-skin-support branch from 1e0d6bd to f56edab Compare January 10, 2025 22:00
@wa0x6e wa0x6e marked this pull request as ready for review January 10, 2025 22:07
@bonustrack bonustrack requested review from Sekhmet, ChaituVR and bonustrack and removed request for Sekhmet and bonustrack January 13, 2025 11:38
@wa0x6e wa0x6e force-pushed the feat-add-skin-support branch from b1df423 to c361c43 Compare January 13, 2025 14:51
ChaituVR
ChaituVR reviewed Jan 27, 2025
View reviewed changes
Copy link
Member

@ChaituVR ChaituVR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need a way to test skins without need of DB, It will be easy for space admins to test without need of custom domain/wait for us to update DB

@wa0x6e
Copy link
Contributor Author

wa0x6e commented Jan 27, 2025

We may need a way to test skins without need of DB, It will be easy for space admins to test without need of custom domain/wait for us to update DB

See Phase 2 from https://github.com/snapshot-labs/workflow/issues/238#issuecomment-2575387325

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ChaituVR ChaituVR ChaituVR requested changes

@Sekhmet Sekhmet Sekhmet left review comments

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@wa0x6e @Sekhmet @ChaituVR