Vibe-code дизайн light theme

src/classes/building/BuildingAddon.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import {useTheme} from "@mui/material/styles";
 import {
     AccordionDetails,
     AccordionSummary,
@@ -29,6 +30,9 @@ interface IBuildingAddonProps {
 }
 
 function BuildingAddon(props: IBuildingAddonProps){
+    const theme = useTheme();
+    const isDark = theme.palette.mode === 'dark';
+    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const addon = props.addon
     const building = props.building
@@ -37,16 +41,16 @@ function BuildingAddon(props: IBuildingAddonProps){
 
     return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
         <AccordionSummary
-            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
-            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
+            sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: textColor}}/>}
             aria-controls="panel1-content"
         >
-            <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
+            <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                 <img className="sergeantIcon" src={getIcon(addon.icon)}/>
                     &nbsp; {addon.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails sx={{color: '#dee2e6'}}>
+        <AccordionDetails sx={{color: textColor}}>
             <Grid2 container spacing={2}>
                 <Grid2 size={{xs: 12, md: 4}}>
                     <TableContainer component={StyledPaper} elevation={0}>