Styles

Colors

Palette

The MUI color palette has been extended to support Material Design 3 colors

interface PaletteColor {
  light: string;
  main: string;
  dark: string;
  contrastText: string;

  // 👇 New
  container: string;
  containerContrastText: string;
}

interface TypeBackground {
  default: string;
  paper: string;

  // 👇 New
  container: {
    lowest: string;
    low: string;
    main: string;
    high: string;
    highest: string;
  };
}

interface Palette {
  primary: PaletteColor;
  secondary: PaletteColor;
  error: PaletteColor;
  warning: PaletteColor;
  info: PaletteColor;
  success: PaletteColor;

  divider: string;
  background: TypeBackground;

  // 👇 New
  dividerSecondary: string;
  inverse: {
    background: string;
    contrastText: string;
  };
}

Add the following import for TypeScript support

import type {} from "adaptive-material-ui/theme/themeAugmentation";

Theme Builder

The Material Theme Builder can be used to create a theme:

  1. Create a theme using the builder
  2. Export the theme to Material Theme (JSON)
  3. Copy one of the schemes from the exported JSON file and paste it into the converter below. It should be in the form
{
  "primary": "#4C662B",
  "surfaceTint": "#4C662B",
  ...
}
  1. Copy the converted palette and paste it into your theme either in the palette or a colorSchemes palette

Converter

AdaptiveThemeProviderMin

To reduce the bundle size AdaptiveThemeProviderMin can be used which doesn't include color setting logic, so all new colors must be specified in the theme. Use the following generator to add the same colors AdaptiveThemeProvider uses to your palette.

Generator

Enter your theme palette or {} to use the default colors. Include mode: "dark" for a dark palette. If using both light & dark, update both palettes separately under colorSchemes in your theme.

Component Styles

Component styles can be customized using the standard Material UI methods but targeting the Adaptive components.

Single Component

The following is a example of styling a single AdaptiveSwitch component, there are similar examples in the MUI documentation for many components, like Switch Customization.

import { styled } from "@mui/material/styles";
import {
  AdaptiveSwitch,
  adaptiveSwitchClasses,
} from "adaptive-material-ui/components/switch";

const AdaptiveSwitchStyled = styled(AdaptiveSwitch)({
  [`& .${adaptiveSwitchClasses.switchBase}.${adaptiveSwitchClasses.checked} .${adaptiveSwitchClasses.thumb}`]:
    {
      backgroundColor: "purple",
    },
});

export default function () {
  return <AdaptiveSwitchStyled defaultChecked />;
}

Theme

The following is a example of styling all AdaptiveSwitch components using a theme, see Themed Components for more info.

import { createTheme } from "@mui/material/styles";
import {
  AdaptiveSwitch,
  adaptiveSwitchClasses,
} from "adaptive-material-ui/components/switch";
import { AdaptiveThemeProvider } from "adaptive-material-ui/theme/adaptiveThemeProvider";
// 👇 Note the type import required for TypeScript
import type {} from "adaptive-material-ui/theme/themeAugmentation";

const theme = createTheme({
  colorSchemes: { dark: true },
  components: {
    AdaptiveSwitch: {
      styleOverrides: {
        root: {
          [`& .${adaptiveSwitchClasses.switchBase}.${adaptiveSwitchClasses.checked} .${adaptiveSwitchClasses.thumb}`]:
            {
              backgroundColor: "red",
            },
        },
      },
      defaultProps: {
        defaultChecked: true,
      },
    },
  },
});

export default function () {
  return (
    <AdaptiveThemeProvider theme={theme}>
      <AdaptiveSwitch />
    </AdaptiveThemeProvider>
  );
}

Device Specific Styles

Components with device specific styles can be customized using the related classes prop, the class name, or a theme style override as shown below.

Classes Prop

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { styled } from "@mui/material/styles";
import {
  AdaptiveSwitch,
  adaptiveSwitchClasses,
} from "adaptive-material-ui/components/switch";

const iosClassName = "ios_class";

const AdaptiveSwitchStyled = styled(AdaptiveSwitch)({
  [`&.${iosClassName}`]: {
    [`& .${adaptiveSwitchClasses.track}`]: {
      backgroundColor: "rebeccapurple",
    },

    [`& .${adaptiveSwitchClasses.switchBase}.${adaptiveSwitchClasses.checked}`]:
      {
        color: "purple",

        [`& + .${adaptiveSwitchClasses.track}`]: {
          backgroundColor: "purple",
        },
      },
  },
});

export default function () {
  return (
    <AdaptiveModeDemo adaptiveMode="ios">
      <AdaptiveSwitchStyled classes={{ ios: iosClassName }} defaultChecked />
    </AdaptiveModeDemo>
  );
}

Class Name

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { styled } from "@mui/material/styles";
import {
  AdaptiveSwitch,
  adaptiveSwitchClasses,
} from "adaptive-material-ui/components/switch";

const AdaptiveSwitchStyled = styled(AdaptiveSwitch)({
  [`&.${adaptiveSwitchClasses.ios}`]: {
    [`& .${adaptiveSwitchClasses.track}`]: {
      backgroundColor: "yellow",
    },

    [`& .${adaptiveSwitchClasses.switchBase}.${adaptiveSwitchClasses.checked}`]:
      {
        color: "orange",

        [`& + .${adaptiveSwitchClasses.track}`]: {
          backgroundColor: "orange",
        },
      },
  },
});

export default function () {
  return (
    <AdaptiveModeDemo adaptiveMode="ios">
      <AdaptiveSwitchStyled defaultChecked />
    </AdaptiveModeDemo>
  );
}

Theme

import { createTheme } from "@mui/material/styles";
import {
  AdaptiveSwitch,
  adaptiveSwitchClasses,
} from "adaptive-material-ui/components/switch";
import { AdaptiveThemeProvider } from "adaptive-material-ui/theme/adaptiveThemeProvider";
// 👇 Note the type import required for TypeScript
import type {} from "adaptive-material-ui/theme/themeAugmentation";

const theme = createTheme({
  colorSchemes: { dark: true },
  components: {
    AdaptiveSwitch: {
      styleOverrides: {
        ios: {
          [`& .${adaptiveSwitchClasses.track}`]: {
            backgroundColor: "pink",
          },

          [`& .${adaptiveSwitchClasses.switchBase}.${adaptiveSwitchClasses.checked}`]:
            {
              color: "red",

              [`& + .${adaptiveSwitchClasses.track}`]: {
                backgroundColor: "red",
              },
            },
        },
      },
    },
  },
});

export default function () {
  return (
    <AdaptiveThemeProvider adaptiveModeInfo={{ mode: "ios" }} theme={theme}>
      <AdaptiveSwitch defaultChecked />
    </AdaptiveThemeProvider>
  );
}