How to add custom colors to palette in Typescript?

[Bersaelor]

Hey there, our designs use 3 different background colors, and I'm trying to add the new color to the Palette.

So I tried:

declare module '@suid/material/styles' {
  interface Palette {
    background: {
      default: string;
      paper: string;
      light: string;
    };
  }

  interface PaletteOptions {
    background: {
      default: string;
      paper: string;
      light: string;
    };
  }
}

const theme = createTheme({
  palette: {
    // ...
    background: {
      default: '#28373C',
      paper: '#3F565E',
      light: '#4e6b76',
    },

The MUI documentation does this and it seems to work, how can we make it work in Suid? Has anyone managed this before?

[Bersaelor]

I also tried

declare module '@suid/material/styles' {
  interface Palette {
    lightBackground: string
  }

  interface PaletteOptions {
    lightBackground: string
  }
}

const theme = createTheme({
  palette: {
    // ...
    lightBackground: '#4e6b76',

but Typescript also doesn't accept that.

[juanrgm]

I will publish the fix this week.

[juanrgm]

Closed via https://github.com/swordev/suid/commit/323b25065a2fd290a1fe331857cef6aef285d990.