UI에 사용된 컬러 팔레트

• styled components의 themeProvider를 사용하여 다크모드/라이트모드를 제공합니다.

• 컬러코드는 HEX Code를 사용하며, src/styles/common/themes.tsx 코드 지정, 해당 props를 src/styles/common/base.tsx에서 변수에 할당하여 사용합니다.

• MUI에 사용되는 테마는 muiTheme.tsx에 지정하여 사용합니다.

• themes.tsx

export const light = {
  mode: "light",
  main: {
    color: "#957DF8",
    dark: "#6744F3",
    light: "#cdc6fb",
  },
  grey: {
    color: "#b5b8cde9",
    dark: "#706c74e7",
    light: "#e0dbe8db",
  },
  green: {
    color: "#54EA75",
    dark: "#19DB3B",
    light: "#8FFF9D",
  },
  red: {
    color: "#E03849",
    dark: "#BF0013",
    light: "#FF8F9A",
  },
  yellow: {
    color: "#FFD324",
    dark: "#FAB22D",
    light: "#FFE47A",
  },
  blue: {
    color: "#176CFF",
    dark: "#1b4cd3",
    light: "#38A2FF",
  },
  doc: {
    text: "#312a3df2",
    textButton: "#f9f6ffee",
    background: "#F4F4FA",
    backgroundModal: "#FFFFFF",
    shadow: "#e4e4eddf",
    shadowDark: "#c4c4e4eb",
  },
};

export const dark = {
  mode: "dark",
  main: {
    color: "#957DF8",
    dark: "#6744F3",
    light: "#cdc6fb",
  },
  grey: {
    color: "#b5b8cde9",
    dark: "#706c74e7",
    light: "#e0dbe8db",
  },
  green: {
    color: "#54EA75",
    dark: "#19DB3B",
    light: "#8FFF9D",
  },
  red: {
    color: "#E03849",
    dark: "#BF0013",
    light: "#FF8F9A",
  },
  yellow: {
    color: "#FFD324",
    dark: "#FAB22D",
    light: "#FFE47A",
  },
  blue: {
    color: "#328bff",
    dark: "#255fff",
    light: "#76e6ff",
  },
  doc: {
    text: "#f9f6ffee",
    textButton: "#f9f6ffee",
    background: "#312d40",
    backgroundModal: "#3c334fef",
    shadow: "#282838df",
    shadowDark: "#1a1a24df",
  },
};

• base.tsx

:root {
      ${(props) =>
        `--main: ${props.theme.main.color};
        --main-light: ${props.theme.main.light};
        --main-dark: ${props.theme.main.dark};
        --grey: ${props.theme.grey.color};
        --grey-light: ${props.theme.grey.light};
        --grey-dark: ${props.theme.grey.dark};
        --green: ${props.theme.green.color};
        --green-light: ${props.theme.green.light};
        --green-dark: ${props.theme.green.dark};
        --red: ${props.theme.red.color};
        --red-light: ${props.theme.red.light};
        --red-dark: ${props.theme.red.dark};
        --yellow: ${props.theme.yellow.color};
        --yellow-light: ${props.theme.yellow.light};
        --yellow-dark: ${props.theme.yellow.dark};
        --blue: ${props.theme.blue.color};
        --blue-light: ${props.theme.blue.light};
        --blue-dark: ${props.theme.blue.dark};
        --text: ${props.theme.doc.text};
        --text-button: ${props.theme.doc.textButton};
        --bg: ${props.theme.doc.background};
        --bg-modal: ${props.theme.doc.backgroundModal};
        --shadow: ${props.theme.doc.shadow};
        --shadow-dark :${props.theme.doc.shadowDark};
        `}
       };

• 사용 시 컬러 코드를 직접 입력하는 것이 아닌 변수 사용할 것

    body, html, div, span, button, form {
      box-sizing: border-box;
      **color: var(--text);**
    }

• muiTheme

import { createTheme } from "@mui/material";
import { light, dark } from "./themes";
import { ThemeOptions, Theme } from "@mui/material";

// Mui 커스텀 테마

declare module "@mui/material" {
  interface ButtonPropsColorOverrides {
    purple: true;
  }
  interface TextFieldPropsColorOverrides {
    purple: true;
  }
  interface FormControlPropsColorOverrides {
    purple: true;
  }
  interface SwitchPropsColorOverrides {
    purple: true;
  }
  interface CircularProgressPropsColorOverrides {
    purple: true;
  }
  interface TabsPropsIndicatorColorOverrides {
    purple: true;
  }
  interface ToggleButtonGroupPropsColorOverrides {
    purple: true;
  }
  interface ButtonGroupPropsColorOverrides {
    purple: true;
  }
}

declare module "@mui/material/styles" {
  interface Palette {
    purple: Palette["primary"];
  }
  interface PaletteOptions {
    purple: PaletteOptions["primary"];
  }
  export function createTheme(options: ThemeOptions): Theme;
}

// 라이트모드
export const muiTheme = createTheme({
  typography: {
    fontFamily: ["ScoreDream", "Mplus"].join(","),
  },
  components: {
    MuiSwitch: {
      styleOverrides: {
        colorPrimary: {
          "&.Mui-checked": {
            color: light.main.dark,
          },
        },
        thumb: {
          backgroundColor: light.main.dark,
        },
        track: {
          backgroundColor: "#312a3d",
          ".Mui-checked.Mui-checked + &": {
            opacity: 0.7,
            backgroundColor: light.main.color,
          },
        },
      },
    },
  },
  palette: {
    purple: {
      main: light.main.dark,
      contrastText: "#fff",
      dark: "#5027f1",
    },
    divider: light.doc.shadowDark,
  },
});

// 다크모드
export const muiDarkTheme = createTheme({
  typography: {
    fontFamily: ["ScoreDream", "Mplus"].join(","),
  },
  components: {
    MuiSwitch: {
      styleOverrides: {
        colorPrimary: {
          "&.Mui-checked": {
            color: dark.main.color,
          },
        },
        thumb: {
          backgroundColor: dark.main.color,
        },
        track: {
          backgroundColor: dark.doc.textButton,
          ".Mui-checked.Mui-checked + &": {
            opacity: 0.7,
            backgroundColor: dark.main.color,
          },
        },
      },
    },
  },
  palette: {
    mode: "dark",
    purple: {
      main: dark.main.color,
      contrastText: "#fff",
      dark: dark.main.dark,
    },
    divider: dark.doc.shadowDark,
  },
});