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.

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

feat: load space's custom colors #1090

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

Conversation

wa0x6e
Copy link
Contributor

@wa0x6e wa0x6e commented Jan 10, 2025

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
Comment on lines +11 to +14
function toggleSkin(skin?: Skin) {
store.value =
skin ||
([DEFAULT_SKIN, 'none'].includes(store.value) ? 'dark' : DEFAULT_SKIN);
Copy link
Member

Choose a reason for hiding this comment

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

I think I'd separate it as if we pass specific skin to set it's not really toggle anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants