Customize Theme

AI Customization

Customize your app's look via the Workspace by clicking 'Edit design system'.

Upload a template or Figma mockup, and the AI will adjust all CSS variables across your app to match your picture.

Manual Edit

The look and feel of your app can be changed from a single-file: /apps/web/src/designSystem/theme/theme.tsx

You can find all the editable variables here.

import { theme } from 'antd'
import { Inter } from 'next/font/google'

const interFont = Inter({
  subsets: ['latin'],
})

export const Theme = {
  algorithm: theme.darkAlgorithm,
  token: {
    // Colors
    colorPrimary: '#00a1ec',
    colorPrimaryBg: 'black',
    colorError: '#ff4d4f',
    colorInfo: '#1677ff',
    colorSuccess: '#52c41a',
    colorWarning: '#faad14',
    colorTextBase: 'white',
    colorLink: '#00a1ec',
    colorBgBase: 'black',
    colorBgContainer: 'black',

    // Typography
    fontFamily: `${interFont.style.fontFamily}, -apple-system,`

    //...
}