feat: change color name to pseudolab colors

Author: ed-kyu

frontend/src/components/common/Header.tsx

@@ -35,7 +35,7 @@ const Header: React.FC<HeaderProps> = ({ logoSrc }) => {
             onClick={toggleColorMode}
             sx={{
               transition: 'all 0.1s ease',
-              color: theme.palette.mode === 'dark' ? theme.palette.custom.primary : '#333',
+              color: theme.palette.mode === 'dark' ? theme.palette.custom.pseudolabOrange : '#333',
             }}
           >
             {theme.palette.mode === 'dark' ? (

frontend/src/modules/Home/components/Hero.tsx

@@ -7,7 +7,7 @@ const Hero: React.FC = () => {
     <Box
       component="section"
       sx={{
-        backgroundColor: colors.primary,
+        backgroundColor: colors.pseudolabOrange,
         color: '#fff',
         py: 6,
         mb: 6,

frontend/src/modules/Home/components/Services.tsx

@@ -55,7 +55,7 @@ const Services: React.FC<ServicesProps> = ({
               variant="contained"
               fullWidth
               sx={{
-                backgroundColor: colors.primary,
+                backgroundColor: colors.pseudolabOrange,
                 borderRadius: colors.borderRadius,
                 textTransform: 'none',
                 '&:hover': { opacity: 0.9, transform: 'translateY(-2px)' },
@@ -109,7 +109,7 @@ const Services: React.FC<ServicesProps> = ({
               variant="contained"
               fullWidth
               sx={{
-                backgroundColor: colors.secondary,
+                backgroundColor: colors.pseudolabBlue,
                 borderRadius: colors.borderRadius,
                 textTransform: 'none',
                 '&:hover': { opacity: 0.9, transform: 'translateY(-2px)' },

frontend/src/styles/ThemeContext.tsx

@@ -7,7 +7,7 @@ interface ThemeContextProps {
 }
 
 // ex) import { useTheme } from '@mui/material/styles';
-// ex) const theme = useTheme(); + theme.palette.custom.primary
+// ex) const theme = useTheme(); + theme.palette.custom.pseudolabOrange
 const ColorModeContext = createContext<ThemeContextProps | undefined>(undefined);
 
 export const useColorMode = () => {
@@ -39,8 +39,8 @@ export const ColorModeProvider = ({ children }: { children: ReactNode }) => {
                 primary: '#000',
               },
               custom: {
-                primary: colors.primary,
-                secondary: colors.secondary,
+                pseudolabOrange: colors.pseudolabOrange,
+                pseudolabBlue: colors.pseudolabBlue,
                 success: colors.success,
               },
             }
@@ -53,8 +53,8 @@ export const ColorModeProvider = ({ children }: { children: ReactNode }) => {
                 primary: '#fff',
               },
               custom: {
-                primary: colors.primary,
-                secondary: colors.secondary,
+                pseudolabOrange: colors.pseudolabOrange,
+                pseudolabBlue: colors.pseudolabBlue,
                 success: colors.success,
               },
             }),

frontend/src/styles/theme.ts

@@ -1,8 +1,8 @@
 import { createTheme } from '@mui/material/styles';
 
 export const colors = {
-  primary: '#F2913B',
-  secondary: '#21709A',
+  pseudolabOrange: '#F2913B',
+  pseudolabBlue: '#21709A',
   success: '#10b981',
   dark: '#1f2937',
   light: '#f3f4f6',
@@ -15,16 +15,16 @@ export const colors = {
 declare module '@mui/material/styles' {
   interface Palette {
     custom: {
-      primary: string;
-      secondary: string;
+      pseudolabOrange: string;
+      pseudolabBlue: string;
       success: string;
     };
   }
 
   interface PaletteOptions {
     custom?: {
-      primary?: string;
-      secondary?: string;
+      pseudolabOrange?: string;
+      pseudolabBlue?: string;
       success?: string;
     };
   }
@@ -35,8 +35,8 @@ const theme = createTheme({
   palette: {
     mode: 'light',
     custom: {
-      primary: colors.primary,
-      secondary: colors.secondary,
+      pseudolabOrange: colors.pseudolabOrange,
+      pseudolabBlue: colors.pseudolabBlue,
       success: colors.success,
     },
   },