Themes

Supplied Themes

The supplied themes in the src/themes folder follow Spotify's branding guidelines and are suitable for all uses.

Please note that the example themes in the src/themes/examples folder are for EXAMPLE ONLY. The example themes demonstrate Syncify's capabilities and are intended for:

• Learning purposes
• Private/personal use
• Reference for creating your own themes

If you plan to distribute or use these themes publicly, ensure they comply with Spotify's Design & Branding Guidelines.

Creating Custom Themes

Syncify uses the React framework so you can customize it to look & behave exactly how you want!

To create your own theme, create a .jsx file in src/themes. You can look at the existing themes there and in the examples folder for examples to help build your own theme file.

All themes must have a Theme const which should return the structure of the theme. It should be exported with export default Theme at the end of the file. See the example themes for more information.

Minified example from Default.jsx:

const Theme = () => {
  // ... All song handling code

  return (
    <WidgetContainer>
      <SpotifyLogo
        src={
          `http://localhost:${window.location.port}/SpotifyWhite.svg`
        }
        alt="Spotify"
        style={{
          opacity: 1,
          width: "50px",
          height: "50px",
          alignSelf: "center"
        }}
      />
      <CoverArt
        src={
          songData?.coverArtUrl ||
          `http://localhost:${window.location.port}/nothingplaying.png`
        }
        alt="Album Cover"
        style={{
          opacity: isChanging ? 0 : 1,
        }}
      />
      <SongInfo>
        <ScrollingTitle
          text={songData?.song || "Nothing playing!"}
          isSong={true}
          isChanging={isChanging}
          songData={songData}
        />
        <ScrollingTitle
          text={allArtists || ""}
          isChanging={isChanging}
          songData={songData}
        />
      </SongInfo>
    </WidgetContainer>
  );
};

export default Theme;

Contributing Public Themes

If you wish to contribute a public theme to be included with Syncify, your theme must be appropriate and comply with Spotify's Design & Branding Guidelines.

Create an issue with an attached .JSX file to submit themes.