Update Material UI code export feature

Ivanmatthew commented 9 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the problem

Currently, the code export for Material UI doesn't work, and will give typing errors, neither the V5, as well as adaptV4Theme works to convert the code export to a readable format by Material UI.

Solution

An updated code export, or an option to pick between Material UI versions

Alternatives

Remaking the theme myself in another open source project dedicated to making a Material UI theme editor, however accents don't seem to be properly conveyed.

Additional context

No response

juxtopposed commented 8 months ago

What format exactly are you looking for? Can you link me to an example?

Ivanmatthew commented 7 months ago

What format exactly are you looking for? Can you link me to an example?

First of all, sorry didn't get the notification.

The current MUI preset code export doesn't work, as it will error when directly entering in your MUI project.

The current generated code will error (see image)

It has no accent key in the palette, neither does it have a main key for both text and background.

I tried to use the 'adaptV4Theme', but to no avail. It lead me to believe the custom code generator for mui was made in V3, but I can not find any trace of it. I did find an up-to-date code of generating a V5 MUI theme: https://github.com/Zenoo/mui-theme-creator/blob/master/src/state/editor/reducers.ts

I'd rather expect a working format like so:

import { ThemeOptions } from '@mui/material/styles';

export const themeOptions: ThemeOptions = {
  palette: {
    mode: 'dark',
    primary: {
      main: '#4caf50',
      contrastText: 'rgba(255,255,255,0.87)',
    },
    secondary: {
      main: '#af4cac',
      contrastText: '#ffffff',
    },
    divider: '#bdbdbd',
    text: {
      primary: '#edfff1',
      secondary: '#f9f9f9',
      disabled: '#757575',
      hint: '#22194d',
    },
    background: {
      default: '#cacceb',
      paper: '#4f4caf',
    },
  },
};

An example of this can be found at https://zenoo.github.io/mui-theme-creator/

juxtopposed commented 5 months ago

Thank you for the explanation. This has been updated. Let me know if it works.

Ivanmatthew commented 5 months ago

Thank you for the explanation. This has been updated. Let me know if it works.

Hey, thank you for this. I checked it out quickly and realized the pallete.text.hint key does not exist (anymore) and was never put to use in any MUI components. See https://mui.com/material-ui/migration/v5-style-changes/#restore-theme-palette-text-hint-key-if-needed Other than that, it seems to be working correctly.

juxtopposed / realtimecolors