Customising appearance (themes)

Fundset is using shadcn/ui for the UI. Every shadcn tailwind V4 compatible theme will work in Fundset. Check out the shadcn docs to see how to create a new theme.

Extending the theme in runtime

Fundset base Payload CMS plugin is setting up a Theme global config with theme field. You can store any CSS theme code there, which will then be injected to your website.

Check out tweak.cn to create a theme that suits your needs and then copy the CSS code and paste it into the theme field in the Theme global config.

You can edit this during runtime, either by editing the global config in the Payload dashboard or by using the payload API:

import payloadConfig from '@/payload.config';
import { getPayload } from 'payload';

const payload = await getPayload({
  config: payloadConfig,
});

await payload.updateGlobal({
  slug: 'theme',
  data: {
    theme: '...', // <--- your theme code here
  },
}),