[FEATURE] Customisable Profile Themes

Description

In light of the changes made in #513, I think it would be really great if this gradient config is an “optional” enhancement that people could use in their profiles. An option in the data config files for a hex code or a “trigger” string, which defines the background for the page would be really great. Maybe we can call it “theme”

/public/data/<file>.json

{
  "name": "J. Doe",
  "bio": "Lorem Ipsum",
  "avatar": "https://github.com/<name>.png",
  "theme": "gradient", // or "0xffff00" or "0xfc0bb8" or "default"
  "links": [
    {
      "name": "Follow me on GitHub",
      "url": "https://github.com/<name>",
      "icon": "github"
    },
    {
      "name": "Follow me on Twitter",
      "url": "https://twitter.com/<name>",
      "icon": "twitter"
    }
  ]
}

Screenshots

No response

Additional information

Stems from #513 and this is a feature that linktree and other projects also include.

[Tejas-Teju]

I am following below to customize the background, please let me know the right method:

1. In public/data/<file>.json file I am assuming there is a key called “theme” where the users will add background-color Note: At present there is no key called “theme” in the JSON files, but in case if it is present then add the customized theme else add default value i.e. White.
2. Background should remain White in the Home.js page but when the user navigates to their respective ProfilePage.js then the background theme should apply

I tried 2 methods:

1. Apply the background to the body using document object but the issue is it applies to the Home page as well

ProfilePage.js

1. Create a div tag and add background to it but it doesn’t cover the whole body. This just wraps Profile and Link components but I am not sure how to apply this theme to the body for individual users I need help on this.

ProfilePage.js

[Vyvy-vi]

looks cool, a gradient could be a linear-gradient property… opening support for custom hex codes as well

That can be neat! There’s so much room to customise in here, once an MVP version of this is created.