Vibe-code дизайн dark theme re-vibecode

src/App.tsx

@@ -4,14 +4,16 @@ import {
     AppBar,
     Box,
     Container,
-    createTheme,
+    IconButton,
-    ThemeProvider,
     Toolbar,
     Typography,
-    useTheme
 } from "@mui/material";
+import { useNavigate, BrowserRouter } from "react-router-dom";
 import { MyRoutes } from "./Routes";
 import { styled } from '@mui/material/styles';
+import { ThemeProvider as CustomThemeProvider, useThemeContext } from './context/ThemeContext';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 
 // Styled components
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
@@ -20,12 +22,20 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
     borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
 }));
 
+const StyledAppBarLight = styled(AppBar)(({ theme }) => ({
+    background: 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%)',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
+    borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+}));
+
 const LogoText = styled(Typography)(({ theme }) => ({
     fontSize: '1.5rem',
     fontWeight: 800,
-    background: 'linear-gradient(135deg, #e94560 0%, #ff6b6b 100%)',
+    background: theme.palette.mode === 'dark'
+        ? 'linear-gradient(135deg, #dee2e6 0%, #cccccc 100%)'
+        : 'linear-gradient(135deg, #1a1a2e 0%, #333333 100%)',
     WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : '#1a1a2e',
     letterSpacing: '-0.5px',
     cursor: 'pointer',
     '&:hover': {
@@ -34,68 +44,78 @@ const LogoText = styled(Typography)(({ theme }) => ({
     },
 }));
 
-function App() {
+const ThemeToggle = styled(IconButton)(({ theme }) => ({
-    const theme = useTheme();
+    color: 'inherit',
+    '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    },
+}));
 
-    const themeConfig = createTheme({
+const ThemeToggleLight = styled(IconButton)(({ theme }) => ({
-        breakpoints: {
+    color: 'inherit',
-            values: {
+    '&:hover': {
-                xs: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                sm: 600,
+    },
-                md: 900,
+}));
-                lg: 1320,
+
-                xl: 1536,
+function AppBarContent() {
-            },
+    const { mode, toggleTheme } = useThemeContext();
-        },
+    const navigate = useNavigate();
-        palette: {
+    const isDark = mode === 'dark';
-            primary: {
+
-                main: "#1a1a2e",
+    const handleLogoClick = () => navigate('/');
-            },
-            background: {
-                default: '#0a0a0a',
-                paper: '#1a1a2e',
-            },
-        },
-        typography: {
-            fontFamily: '"Inter", "Roboto", "Helvetica", sans-serif',
-        },
-        shape: {
-            borderRadius: 12,
-        },
-        components: {
-            MuiTableCell: {
-                styleOverrides: {
-                    root: {
-                        color: 'rgba(255, 255, 255, 0.85)',
-                    },
-                },
-            },
-        },
-    });
 
     return (
-        <Box sx={{ minHeight: '100vh', backgroundColor: '#0a0a0a' }}>
+        <>
-            <ThemeProvider theme={themeConfig}>
+            {isDark ? (
-                <a href="/">
                 <StyledAppBar position="sticky">
                     <Container maxWidth="lg">
                         <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
-                            {/* Left side - Logo */}
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                                <LogoText variant="h6" sx={{ textDecoration: 'none' }}>
+                                <img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} onClick={handleLogoClick}/>
-                                    🎮 Autogenerated wiki
+                                <LogoText variant="h6" sx={{ textDecoration: 'none', cursor: 'pointer' }} onClick={handleLogoClick}>
+                                    Autogenerated wiki
                                 </LogoText>
                             </Box>
+                            <ThemeToggle onClick={toggleTheme} size="large">
+                                <LightModeIcon />
+                            </ThemeToggle>
                         </Toolbar>
                     </Container>
                 </StyledAppBar>
-                </a>
+            ) : (
+                <StyledAppBarLight position="sticky">
+                    <Container maxWidth="lg">
+                        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                                <img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} onClick={handleLogoClick}/>
+                                <LogoText variant="h6" sx={{ textDecoration: 'none', cursor: 'pointer' }} onClick={handleLogoClick}>
+                                    Autogenerated wiki
+                                </LogoText>
+                            </Box>
+                            <ThemeToggleLight onClick={toggleTheme} size="large">
+                                <DarkModeIcon />
+                            </ThemeToggleLight>
+                        </Toolbar>
+                    </Container>
+                </StyledAppBarLight>
+            )}
+        </>
+    );
+}
 
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+function App() {
-                    <MyRoutes />
+    return (
-                </Container>
+        <CustomThemeProvider>
-            </ThemeProvider>
+            <Box sx={{ minHeight: '100vh' }}>
-        </Box>
+                <BrowserRouter>
+                    <AppBarContent />
+                    <Container maxWidth="lg" sx={{ py: 4 }}>
+                        <MyRoutes />
+                    </Container>
+                </BrowserRouter>
+            </Box>
+        </CustomThemeProvider>
     );
 }
 

src/Routes.tsx

@@ -1,4 +1,4 @@
-import {Routes, Route, BrowserRouter} from "react-router-dom";
+import {Routes, Route} from "react-router-dom";
 import ModsPage from "./pages/ModsPage";
 import ModPage from "./pages/ModPage";
 import RacePageFast from "./pages/RacePageFast";
@@ -8,14 +8,12 @@ import BuildingPage from "./pages/BuildingPage";
 export const MyRoutes = () => {
 
     return(
-        <BrowserRouter>
+        <Routes>
-            <Routes>
                 <Route path="/" element={<ModsPage/>}/>
                 <Route path="/mod/:modId" element={<ModPage/>}/>
                 <Route path="/mod/:modId/race/:raceId" element={<RacePageFast/>}/>
                 <Route path="/mod/:modId/race/:raceId/unit/:unitId" element={<UnitPage/>}/>
                 <Route path="/mod/:modId/race/:raceId/building/:buildingId" element={<BuildingPage/>}/>
             </Routes>
-        </BrowserRouter>
     )
 }

src/classes/Ability.tsx

@@ -20,18 +20,18 @@ function Ability(props: IAbilityProps){
 
     return <div className='addon-research-accordion' id={"research-" + ability.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
         <AccordionSummary
-            expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
             aria-controls="panel1-content"
-            sx={{color: '#ffffff'}}
         >
-                <span style={{fontSize: 20, color: '#ffffff'}}>
+                <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
                 {ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.gif"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
                     &nbsp; {ability.name ? ability.name : ability.fileName.charAt(0).toUpperCase() + ability.fileName.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
                     <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}>  ({ability.activationType})</i>
                 </span>
 
         </AccordionSummary>
-        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
+        <AccordionDetails sx={{color: '#dee2e6'}}>
             <AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} />
         </AccordionDetails>
     </StyledAccordion></div>

src/classes/AbilityFull.tsx

@@ -5,7 +5,6 @@ import ArmorTypeNames from "../types/ArmorTypeValues";
 import {
     AccordionDetails,
     Grid2,
-    Paper,
     styled,
     Table,
     TableBody,
@@ -28,6 +27,7 @@ import ability from "./Ability";
 import AbilitySpawnedObject from "./AbilitySpawnedObject";
 import DpsTable from "./DpsTable";
 import {DescriptionBox} from "../commons/DescriptionBox";
+import {StyledPaper} from "../commons/StyledPaper";
 
 interface IAbilityFullState {
     ability?: IAbilityFill;
@@ -42,36 +42,22 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
 
     const StyledTableCell = styled(TableCell)(({theme}) => ({
         [`&.${tableCellClasses.head}`]: {
-            backgroundColor: 'rgba(233, 69, 96, 0.15)',
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
             fontWeight: 700,
             marginRight: 'auto',
             marginLeft: 'auto',
             paddingLeft: 10,
-            borderBottom: '2px solid rgba(233, 69, 96, 0.3)',
+            borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
         },
         [`&.${tableCellClasses.body}`]: {
             fontSize: 12,
             textAlign: 'center',
-            color: 'rgba(255, 255, 255, 0.85)',
+            color: '#dee2e6',
             paddingRight: 18,
             paddingLeft: 10,
         },
     }));
 
-    const StyledPaper = styled(Paper)(({ theme }) => ({
-        background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-        border: '1px solid rgba(255, 255, 255, 0.1)',
-        borderRadius: '12px',
-        overflow: 'hidden',
-        '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-            color: 'rgba(255, 255, 255, 0.9)',
-        },
-        '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-            color: '#e94560',
-            fontWeight: 600,
-        },
-    }));
-
     useEffect(() => {
 
         if(props.abilityFull !== undefined){
@@ -108,11 +94,11 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
         const showTargetTable = !showDpsTable && ability.abilityEnvironment == null && (ability.targetFilter.length > 0 || ability.radius !== 0)
 
         return (
-            <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>
+            <div style={{color: '#dee2e6'}}>
                 <Grid2 container spacing={2}>
                     <Grid2 size={{xs: 12}}>
                         {ability.initialDelayTime !== undefined  && props.isChild === true &&
-                            <b><br/><center style={{color: 'rgba(255,255,255,0.7)'}}>&nbsp;After  {ability.initialDelayTime.toFixed(1)}s&nbsp;
+                            <b><br/><center style={{color: '#dee2e6'}}>&nbsp;After  {ability.initialDelayTime.toFixed(1)}s&nbsp;
                                 <img style={{verticalAlign: "top"}}
                                      src="/images/Time_icon.webp"/></center></b>}
                     </Grid2>
@@ -215,7 +201,7 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
                     </Grid2>
                     {showDpsTable ?
                         <Grid2 size={12}>
-                            {(ability.refreshTime !== undefined && ability.durationTime !== undefined && ability.refreshTime * 2 < ability.durationTime) && <i style={{color: 'rgba(255,255,255,0.7)'}}>Every <b style={{color: '#ffffff'}}>{ability.refreshTime.toFixed(1)}s</b> deal damege:</i>}
+                            {(ability.refreshTime !== undefined && ability.durationTime !== undefined && ability.refreshTime * 2 < ability.durationTime) && <i style={{color: '#dee2e6'}}>Every <b style={{color: '#dee2e6'}}>{ability.refreshTime.toFixed(1)}s</b> deal damege:</i>}
                             <DpsTable mod={props.mod} minDamageValue={ability.minDamageValue} minDamage={ability.minDamage} maxDamage={ability.maxDamage} piercings={ability.piercings} targetFilter={ability.targetFilter} moraleDamage={ability.moraleDamage}
                                       />
                         </Grid2> : showTargetTable ?

src/classes/AbilitySpawnedObject.tsx

@@ -1,7 +1,7 @@
 import {
     Accordion,
     AccordionDetails,
-    AccordionSummary, Grid2, Paper,
+    AccordionSummary, Grid2,
     Table,
     TableBody,
     TableCell, TableContainer,
@@ -24,6 +24,7 @@ import Ability from "./Ability";
 import DeathExplosion from "./DeathExplosion";
 import {styled} from '@mui/material/styles';
 import {DescriptionBox} from "../commons/DescriptionBox";
+import {StyledPaper} from "../commons/StyledPaper";
 
 const SectionTitle = styled(Typography)(({ theme }) => ({
     fontWeight: 700,
@@ -31,20 +32,6 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
     fontSize: '1.25rem',
 }));
 
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.9)',
-    },
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
-        fontWeight: 600,
-    },
-}));
-
 
 interface AbilityEnvironmentProps {
     abilityEnvironment: IAbilityEnvironment,
@@ -56,7 +43,7 @@ function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
 
     const abilityEnvironment = props.abilityEnvironment
 
-    return <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>
+    return <div style={{color: '#dee2e6'}}>
         <SectionTitle>
             {props.abilityEnvironment.name ?? props.abilityEnvironment.filename.charAt(0).toUpperCase() + props.abilityEnvironment.filename.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
             <i style={{fontSize: 11, color: 'rgba(255,255,255,0.5)'}}> (Spawned object)</i>

src/classes/DeathExplosion.tsx

@@ -1,6 +1,6 @@
 import {
     AccordionDetails,
-    AccordionSummary, Grid2, Paper,
+    AccordionSummary, Grid2,
     Table,
     TableBody,
     TableCell, TableContainer, TableHead,
@@ -24,22 +24,9 @@ import Required from "./Required";
 import ArmorTypeNames from "../types/ArmorTypeValues";
 import DpsTable from "./DpsTable";
 import {StyledAccordion} from "../commons/StyledAccordion";
+import {StyledPaper} from "../commons/StyledPaper";
 import {styled} from "@mui/material/styles";
 
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'rgba(255, 255, 255, 0.03)',
-    border: '1px solid rgba(255, 255, 255, 0.05)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.85)',
-    },
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
-        fontWeight: 600,
-    },
-}));
-
 
 interface DeathExpProps {
     deathExplosion: IDeathExplosion,
@@ -54,15 +41,15 @@ function DeathExplosion(props: DeathExpProps) {
     return chanceTotalNotZero ?
             <div className='addon-research-accordion' id='death-explosion'><StyledAccordion>
                 <AccordionSummary
-                    expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+                    sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+                    expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
                     aria-controls="panel1-content"
-                    sx={{color: '#ffffff'}}
                 >
-            <span style={{fontSize: 20, color: '#ffffff'}}>
+            <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
                 Death Explosion
             </span>
                 </AccordionSummary>
-                <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
+                <AccordionDetails sx={{color: '#dee2e6'}}>
                     <Grid2 container spacing={2}>
                         <Grid2 size={{xs: 12, md: 4}}>
                             <TableContainer component={StyledPaper} elevation={0}>

src/classes/DpsTable.tsx

@@ -19,17 +19,17 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
 
     const StyledTableCell = styled(TableCell)(({theme}) => ({
         [`&.${tableCellClasses.head}`]: {
-            backgroundColor: 'rgba(233, 69, 96, 0.15)',
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
             fontWeight: 700,
             marginRight: 'auto',
             marginLeft: 'auto',
             paddingLeft: 10,
-            borderBottom: '2px solid rgba(233, 69, 96, 0.3)',
+            borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
         },
         [`&.${tableCellClasses.body}`]: {
             fontSize: 12,
             textAlign: 'center',
-            color: 'rgba(255, 255, 255, 0.85)',
+            color: '#dee2e6',
             paddingRight: 18,
             paddingLeft: 10,
         },

src/classes/ModifiersProvideTable.tsx

@@ -8,17 +8,7 @@ import {IMod} from "../types/Imod";
 import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
 import {styled} from '@mui/material/styles';
 import {StyledLink} from "../commons/StyledLink";
-
+import {StyledPaper} from "../commons/StyledPaper";
-// Styled components for dark theme
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.85)',
-    },
-}));
 
 
 interface IModifiersProvidesTable {
@@ -162,8 +152,8 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
                     <TableRow
                         sx={{'&:last-child td, &:last-child th': {border: 0}}}
                     >
-                        <TableCell component="th" scope="row" sx={{color: 'rgba(255,255,255,0.85)'}}>{getModName(m.reference)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModName(m.reference)}</TableCell>
-                        <TableCell component="th" scope="row" sx={{color: 'rgba(255,255,255,0.85)'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
                     </TableRow>
                 )}
             </Table>
@@ -247,9 +237,9 @@ export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) {
                     <TableRow
                         sx={{'&:last-child td, &:last-child th': {border: 0}}}
                     >
-                        <TableCell component="th" scope="row" sx={{color: 'rgba(255,255,255,0.85)'}}>{getTarget(m.target)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getTarget(m.target)}</TableCell>
-                        <TableCell component="th" scope="row" sx={{color: 'rgba(255,255,255,0.85)', minWidth: 120}}>{getModName(m.reference)}</TableCell>
+                        <TableCell component="th" scope="row" sx={{color: '#dee2e6', minWidth: 120}}>{getModName(m.reference)}</TableCell>
-                        <TableCell component="th" scope="row" sx={{color: 'rgba(255,255,255,0.85)'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
+                        <TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
                             {m.maxLifeTime !== undefined && m.maxLifeTime > 0 &&
                                 <span><img style={{verticalAlign: "top"}} src='/images/Time_icon.webp'/>{m.maxLifeTime}s
                         </span>}

src/classes/Required.tsx

@@ -115,20 +115,20 @@ function Required (props: IRequiredProps) {
 
 
     return (
-        <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>
+        <div style={{color: '#dee2e6'}}>
-            <h4 style={{color: '#ffffff', fontWeight: 700}}>Required: </h4>
+            <h4 style={{color: '#dee2e6', fontWeight: 700}}>Required: </h4>
             {requirement.requiredTotalPop !== undefined && requirement.requiredTotalPop !== null &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
+                <div style={{color: '#dee2e6'}}>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
                                              src="/images/Resource_orksquadcap.gif"/>&nbsp;
                     {requirement.requiredTotalPop}</div>
             }
             {requirement.mobBonus !== null && requirement.mobBonus !== undefined &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>&nbsp; Mob requirement: <img style={{verticalAlign: "top", height: 25}}
+                <div style={{color: '#dee2e6'}}>&nbsp; Mob requirement: <img style={{verticalAlign: "top", height: 25}}
                                              src="/images/Mob_bonus.gif"/>&nbsp;
                     {requirement.mobBonus.mobvalueRequired} in radius {requirement.mobBonus.proximityRequired}</div>
             }
             {requirement.requireAddon !== null &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
+                <div style={{color: '#dee2e6'}}>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
                                         src={IconUrl + requirement.requireAddon.icon.replaceAll('\\', '/')}/>&nbsp;
                     <StyledLink href={`/mod/${props.modId}/race/${props.raceId}/building/${requirement.requireAddon.buildingId}#addon-${requirement.requireAddon.id}`}>
                         {requirement.requireAddon.name}
@@ -137,26 +137,26 @@ function Required (props: IRequiredProps) {
                 </div>
             }
             {requirement.requirementAddonExclusive != null &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequiremenAddonExclusive(requirement.requirementAddonExclusive,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequiremenAddonExclusive(requirement.requirementAddonExclusive,)}</div>}
             {requirement.requirementBuildings.map(b =>
-                <div key={b.id} style={{color: 'rgba(255, 255, 255, 0.85)'}}>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
+                <div key={b.id} style={{color: '#dee2e6'}}>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
                                            src={IconUrl + b.icon.replaceAll('\\', '/')}/>&nbsp;
                     <StyledLink href= {'/mod/'+ props.modId +'/race/'+ props.raceId +'/building/' + b.id + "/"}>{b.name}</StyledLink></div>)
             }
             {requirement.requirementResearches.length !== 0 &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequirementResearches(requirement.requirementResearches,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequirementResearches(requirement.requirementResearches,)}</div>}
             {requirement.requirementSquads.length !== 0 &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequirementSquads(requirement.requirementSquads,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequirementSquads(requirement.requirementSquads,)}</div>}
             {requirement.requirementResearchesEither.length !== 0 &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequirementResearchesEither(requirement.requirementResearchesEither,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequirementResearchesEither(requirement.requirementResearchesEither,)}</div>}
             {requirement.requirementBuildingsEither.length !== 0 &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequirementBuildingEither(requirement.requirementBuildingsEither,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequirementBuildingEither(requirement.requirementBuildingsEither,)}</div>}
             {requirement.requirementStructureExclusive != null &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequiremenStructureExclusive(requirement.requirementStructureExclusive,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequiremenStructureExclusive(requirement.requirementStructureExclusive,)}</div>}
-            {requirement.limitByBuilding !== undefined && requirement.limitByBuilding !== null && <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderLimitPerBuilding(requirement.limitByBuilding)}</div>}
+            {requirement.limitByBuilding !== undefined && requirement.limitByBuilding !== null && <div style={{color: '#dee2e6'}}>{renderLimitPerBuilding(requirement.limitByBuilding)}</div>}
             {requirement.requirementsGlobalAddons.length !== 0 &&
-                <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequirementGlobalAddons(requirement.requirementsGlobalAddons,)}</div>}
+                <div style={{color: '#dee2e6'}}>{renderRequirementGlobalAddons(requirement.requirementsGlobalAddons,)}</div>}
-            <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>{renderRequirementOwnership(requirement.requiredOwnership)}</div>
+            <div style={{color: '#dee2e6'}}>{renderRequirementOwnership(requirement.requiredOwnership)}</div>
         </div>
     )
 }

src/classes/Sergeant.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {ISergeant, IShortWeapon} from "../types/IUnit";
-import {Grid2, Paper, Table, TableBody, TableCell, TableContainer, TableRow, Tooltip, Typography} from "@mui/material";
+import {Grid2, Table, TableBody, TableCell, TableContainer, TableRow, Tooltip, Typography} from "@mui/material";
 import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
 import ArmorType from "./ArmorType";
 import WeaponSlot from "./WeaponSlot";
@@ -14,20 +14,7 @@ import Ability from "./Ability";
 import DeathExplosion from "./DeathExplosion";
 import {styled} from '@mui/material/styles';
 import {DescriptionBox} from "../commons/DescriptionBox";
-
+import {StyledPaper} from "../commons/StyledPaper";
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.9)',
-    },
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
-        fontWeight: 600,
-    },
-}));
 
 const SectionTitle = styled(Typography)(({ theme }) => ({
     fontWeight: 700,
@@ -60,7 +47,7 @@ const Sergeant = (props: SergeantProps) => {
     })
 
     return (
-        <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>
+        <div style={{color: '#dee2e6'}}>
             <Grid2 container spacing={2}>
                 <Grid2 size= {{xs: 12, md: 4}}>
                     <TableContainer component={StyledPaper} elevation={0}>

src/classes/UnitsTable.tsx

@@ -5,30 +5,22 @@ import {styled} from '@mui/material/styles';
 import {IRaceUnits, IUnitShort} from "../types/IUnitShort";
 import {IBuildingShort, IRaceBuildings} from "../types/IBuildingShort";
 import {StyledLink} from "../commons/StyledLink";
-
+import {StyledPaper} from "../commons/StyledPaper";
-
-// Styled components for dark theme
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-}));
 
 const StyledTable = styled(Table)(({ theme }) => ({
     '& .MuiTableCell-head': {
-        backgroundColor: 'rgba(233, 69, 96, 0.15)',
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
         fontWeight: 700,
         fontSize: '1rem',
-        borderBottom: '2px solid rgba(233, 69, 96, 0.3)',
+        borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
     },
     '& .MuiTableCell-body': {
-        color: 'rgba(255, 255, 255, 0.85)',
+        color: theme.palette.text.primary,
-        borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
+        borderBottom: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'}`,
         fontSize: '0.9rem',
     },
     '& .MuiTableRow-hover:hover': {
-        backgroundColor: 'rgba(233, 69, 96, 0.08)',
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(233, 69, 96, 0.08)',
     },
 }));
 
@@ -36,7 +28,7 @@ const StyledHeaderLink = styled(StyledLink)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '1.1rem',
     '&:hover': {
-        color: '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
     },
 }));
 

src/classes/Weapon.tsx

@@ -37,21 +37,21 @@ class Weapon extends React.Component<IWeaponProps, any> {
         return (
             <div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
                 <AccordionSummary
-                    expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+                    expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
                     aria-controls="panel1-content"
                     id="panel1-header"
-                    sx={{color: '#ffffff'}}
+                    sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
                 >
-                    <span style={{fontSize: 18, color: '#ffffff'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
+                    <span style={{fontSize: 18, color: '#dee2e6', display: 'flex', alignItems: 'center'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
                         <img className="weaponIcon" src={IconUrl + weapon.icon.replaceAll('\\', '/')}/> : (
                             weapon.isMeleeWeapon ?
                                 <img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
                                 <img className="weaponIcon" src="/images/RangedStance_icon_bw.jpg"/>
-                        )} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
+                        )} &nbsp; {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
                         {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
                     </span>
                 </AccordionSummary>
-                <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
+                <AccordionDetails sx={{color: '#dee2e6'}}>
                     <WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
                 </AccordionDetails>
             </StyledAccordion></div>

src/classes/WeaponFull.tsx

@@ -5,7 +5,6 @@ import ArmorTypeNames from "../types/ArmorTypeValues";
 import {
     AccordionDetails,
     Grid2,
-    Paper,
     styled,
     Table,
     TableBody,
@@ -23,6 +22,7 @@ import {IRaceUnits} from "../types/IUnitShort";
 import {IRaceBuildings} from "../types/IBuildingShort";
 import {ModifiersProvidesTable} from "./ModifiersProvideTable";
 import {DescriptionBox} from "../commons/DescriptionBox";
+import {StyledPaper} from "../commons/StyledPaper";
 import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
 
 interface IWeaponFull {
@@ -39,35 +39,21 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
 
     const StyledTableCell = styled(TableCell)(({theme}) => ({
         [`&.${tableCellClasses.head}`]: {
-            backgroundColor: 'rgba(233, 69, 96, 0.15)',
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
             marginRight: 'auto',
             marginLeft: 'auto',
             paddingLeft: 10,
-            borderBottom: '2px solid rgba(233, 69, 96, 0.3)',
+            borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
         },
         [`&.${tableCellClasses.body}`]: {
             fontSize: 12,
             textAlign: 'center',
-            color: 'rgba(255, 255, 255, 0.85)',
+            color: '#dee2e6',
             paddingRight: 18,
             paddingLeft: 10,
         },
     }));
 
-    const StyledPaper = styled(Paper)(({ theme }) => ({
-        background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-        border: '1px solid rgba(255, 255, 255, 0.1)',
-        borderRadius: '12px',
-        overflow: 'hidden',
-        '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-            color: 'rgba(255, 255, 255, 0.9)',
-        },
-        '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-            color: '#e94560',
-            fontWeight: 600,
-        },
-    }));
-
     useEffect(() => {
 
         fetch(WeaponUrl + "/" + props.mod.id + "/" + props.weaponId)
@@ -151,7 +137,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
 
 
         return (
-            <div style={{color: 'rgba(255, 255, 255, 0.85)'}}>
+            <div style={{color: '#dee2e6'}}>
                 <Grid2 container spacing={2}>
                     {!props.isDefault && <Grid2 size={12}>
                          <DescriptionBox>
@@ -262,8 +248,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                             onChange={handleChange}
                             sx={{ mb: 2 }}
                         >
-                            <ToggleButton size="small" value="dps" sx={{ color: '#ffffff', '&.Mui-selected': { borderColor: '#e94560', color: '#e94560', backgroundColor: 'rgba(233, 69, 96, 0.15)' } }}>Dps</ToggleButton>
+                                                        <ToggleButton size="small" value="dps" sx={{ color: '#dee2e6', '&.Mui-selected': { borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' }  }}>Dps</ToggleButton>
-                            <ToggleButton size="small" value="one hit" sx={{ color: '#ffffff', '&.Mui-selected': {borderColor: '#e94560', color: '#e94560', backgroundColor: 'rgba(233, 69, 96, 0.15)' } }}>One hit average damage</ToggleButton>
+                            <ToggleButton size="small" value="one hit" sx={{ color: '#dee2e6', '&.Mui-selected': {borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' } }}>One hit average damage</ToggleButton>
                         </ToggleButtonGroup>
                         <TableContainer>
                             { props.mod !== undefined && props.mod.technicalName === 'UltimateApocalypse' ?
@@ -327,7 +313,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                                                 name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
                                             <StyledTableCell><img style={{verticalAlign: "top"}}
                                                                   src="/images/ARM_Morale.webp"/>
-                                                <div style={{width: 20, fontSize: 12, height: 50, color: 'rgba(255,255,255,0.7)'}}>
+                                                <div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
                                                     <i>Morale</i></div>
                                             </StyledTableCell>
                                         </TableRow>
@@ -381,7 +367,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                                                 name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
                                             <StyledTableCell><img style={{verticalAlign: "top"}}
                                                                   src="/images/ARM_Morale.webp"/>
-                                                <div style={{width: 20, fontSize: 12, height: 50, color: 'rgba(255,255,255,0.7)'}}>
+                                                <div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
                                                     <i>Morale</i></div>
                                             </StyledTableCell>
                                         </TableRow>
@@ -413,7 +399,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
 
                     </Grid2>
                     {weapon.modifiers.length > 0  && <Grid2 size={12}>
-                        <h3 style={{color: '#ffffff', fontWeight: 700}}>Modifiers</h3>
+                        <h3 style={{color: '#dee2e6', fontWeight: 700}}>Modifiers</h3>
                         <ModifiersProvidesTable modifiers={weapon.modifiers} modId={props.mod.id} race={props.race} affectedData={null}/>
                     </Grid2>}
                     {weapon.requirements !== null && !props.isDefault && props.haveReinforceMenu &&

src/classes/building/BuildingAddon.tsx

@@ -3,7 +3,6 @@ import {
     AccordionDetails,
     AccordionSummary,
     Grid2,
-    Paper,
     Table,
     TableBody,
     TableCell,
@@ -19,24 +18,10 @@ import {getIcon, ModifiersProvidesTable,} from "../ModifiersProvideTable";
 import Required from "../Required";
 import {StyledAccordion} from "../../commons/StyledAccordion";
 import {DescriptionBox} from "../../commons/DescriptionBox";
+import {StyledPaper} from "../../commons/StyledPaper";
 import {styled} from "@mui/material/styles";
 
 
-
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'rgba(255, 255, 255, 0.03)',
-    border: '1px solid rgba(255, 255, 255, 0.05)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.85)',
-    },
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
-        fontWeight: 600,
-    },
-}));
-
 interface IBuildingAddonProps {
     addon: IBuildingAddon,
     building: IBuilding,
@@ -52,16 +37,16 @@ function BuildingAddon(props: IBuildingAddonProps){
 
     return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
         <AccordionSummary
-            expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
             aria-controls="panel1-content"
-            sx={{color: '#ffffff'}}
         >
-                <span style={{fontSize: 20, color: '#ffffff'}}>
+            <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
                 <img className="sergeantIcon" src={getIcon(addon.icon)}/>
                     &nbsp; {addon.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
+        <AccordionDetails sx={{color: '#dee2e6'}}>
             <Grid2 container spacing={2}>
                 <Grid2 size={{xs: 12, md: 4}}>
                     <TableContainer component={StyledPaper} elevation={0}>

src/classes/building/Research.tsx

@@ -23,10 +23,10 @@ import {StyledAccordion} from "../../commons/StyledAccordion";
 import {styled} from "@mui/material/styles";
 
 const StyledLink = styled('a')(({ theme }) => ({
-    color: '#e94560',
+    color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
     textDecoration: 'none',
     '&:hover': {
-        color: '#ff6b6b',
+        color: theme.palette.mode === 'dark' ? '#cccccc' : '#ff6b6b',
         textDecoration: 'underline',
     },
 }));
@@ -45,16 +45,16 @@ function Research(props: IResearchProps){
 
     return <div className='addon-research-accordion' id={"research-" + research.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
         <AccordionSummary
-            expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
             aria-controls="panel1-content"
-            sx={{color: '#ffffff'}}
         >
-                <span style={{fontSize: 20, color: '#ffffff'}}>
+                <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
                 <img className="sergeantIcon" src={getIcon(research.icon)}/>
                     &nbsp; {research.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
+        <AccordionDetails sx={{color: '#dee2e6'}}>
             <ResearchFull id={research.id} building={building}/>
         </AccordionDetails>
     </StyledAccordion></div>
@@ -71,7 +71,7 @@ export function renderAffectedResearches(researches: IResearchShort[], modId: nu
                 </StyledLink></span>
     }
 
-    return <div style={{color: 'rgba(255, 255, 255, 0.85)'}}> {researches.map(rs =>
+    return <div style={{color: '#dee2e6'}}> {researches.map(rs =>
         rs.buildingId == null ? <span key={rs.id}></span> :
             <span key={rs.id}>Research affect: {researchLink(rs)}<br/></span>
     )}</div>

src/classes/building/ResearchFull.tsx

@@ -5,7 +5,6 @@ import {
     AccordionDetails,
     AccordionSummary,
     Grid2,
-    Paper,
     Table,
     TableBody,
     TableCell,
@@ -24,20 +23,7 @@ import {ResearchUrl, WeaponUrl} from "../../core/api";
 import {IWeapon} from "../../types/IUnit";
 import {styled} from '@mui/material/styles';
 import {DescriptionBox} from "../../commons/DescriptionBox";
-
+import {StyledPaper} from "../../commons/StyledPaper";
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.9)',
-    },
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
-        fontWeight: 600,
-    },
-}));
 
 
 interface IResearchFull {

src/commons/BackButton.tsx

@@ -3,12 +3,12 @@ import {styled} from '@mui/material/styles';
 
 export const BackButton = styled(Button)(({ theme }) => ({
     marginBottom: theme.spacing(3),
-    color: '#e94560BB',
+    color: '#FFD700',
-    borderColor: 'rgba(233, 69, 96, 0.5)',
+    borderColor: 'rgba(255, 215, 0, 0.5)',
     textTransform: 'none',
     fontWeight: 600,
     '&:hover': {
-        borderColor: '#e94560',
+        borderColor: '#FFD700',
-        backgroundColor: 'rgba(233, 69, 96, 0.1)',
+        backgroundColor: 'rgba(255, 215, 0, 0.1)',
     },
 }));

src/commons/DescriptionBox.tsx

@@ -1,12 +1,12 @@
 import {styled} from '@mui/material/styles';
 
 export const DescriptionBox = styled('div')(({ theme }) => ({
-    color: 'rgba(255, 255, 255, 0.85)',
+    color: theme.palette.text.primary,
     lineHeight: 1.7,
     fontSize: '0.95rem',
     padding: theme.spacing(3),
-    background: 'rgba(255, 255, 255, 0.03)',
+    background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)',
     borderRadius: '12px',
-    border: '1px solid rgba(255, 255, 255, 0.05)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'}`,
     whiteSpace: 'pre-wrap',
 }));

src/commons/StyledAccordion.tsx

@@ -2,8 +2,10 @@ import {Accordion} from '@mui/material';
 import {styled} from '@mui/material/styles';
 
 export const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
+    background: theme.palette.mode === 'dark'
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
     borderRadius: '12px',
     '&:before': { display: 'none' },
     '&.Mui-expanded': { margin: '0 0 8px 0' },

src/commons/StyledLink.tsx

@@ -2,11 +2,11 @@ import {Link} from "@mui/material";
 import {styled} from '@mui/material/styles';
 
 export const StyledLink = styled(Link)(({ theme }) => ({
-    color: '#e94560BB',
+    color: theme.palette.mode === 'dark' ? '#abc3ff' : '#e94560BB',
     textDecoration: 'none',
     transition: 'all 0.2s ease',
     '&:hover': {
-        color: '#ff6b6bBB',
+        color: theme.palette.mode === 'dark' ? '#ffffff' : '#ff6b6bBB',
         textDecoration: 'underline',
     },
 }));

src/commons/StyledPaper.tsx

@@ -0,0 +1,19 @@
+import {Paper} from '@mui/material';
+import {styled} from '@mui/material/styles';
+
+export const StyledPaper = styled(Paper)(({ theme }) => ({
+    background: theme.palette.mode === 'dark'
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
+    borderRadius: '12px',
+    overflow: 'hidden',
+    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
+        color: theme.palette.text.primary,
+    },
+    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
+        fontWeight: 600,
+    },
+}));
+

src/context/ThemeContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { darkTheme, lightTheme } from '../themes/theme';
+
+type ThemeMode = 'dark' | 'light';
+
+interface ThemeContextType {
+    mode: ThemeMode;
+    toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+    const [mode, setMode] = useState<ThemeMode>(() => {
+        const saved = localStorage.getItem('theme');
+        return (saved === 'light' ? 'light' : 'dark') as ThemeMode;
+    });
+
+    useEffect(() => {
+        localStorage.setItem('theme', mode);
+    }, [mode]);
+
+    const toggleTheme = () => {
+        setMode(prev => prev === 'dark' ? 'light' : 'dark');
+    };
+
+    const theme = mode === 'dark' ? darkTheme : lightTheme;
+
+    return (
+        <ThemeContext.Provider value={{ mode, toggleTheme }}>
+            <MuiThemeProvider theme={theme}>
+                <CssBaseline />
+                {children}
+            </MuiThemeProvider>
+        </ThemeContext.Provider>
+    );
+};
+
+export const useThemeContext = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useThemeContext must be used within a ThemeProvider');
+    }
+    return context;
+};

src/core/api.js

@@ -1,4 +1,7 @@
 
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+
 export const UserUrl = process.env.REACT_APP_HOST_URL + '/api/v1/user';
 export const WeaponUrl = process.env.REACT_APP_HOST_URL + '/api/v1/weapon';
 export const AbilityUrl = process.env.REACT_APP_HOST_URL + '/api/v1/ability';
@@ -8,3 +11,11 @@ export const AvailableRacesPart = process.env.REACT_APP_HOST_URL + '/api/v1/race
 export const AvailableUnits = process.env.REACT_APP_HOST_URL + '/api/v1/units';
 export const AvailableBuildings = process.env.REACT_APP_HOST_URL + '/api/v1/buildings';
 export const IconUrl = process.env.REACT_APP_HOST_URL + '/api/v1/grapics/icon/';
+
+export function withTheme(Component) {
+    return function WithTheme(props) {
+        const theme = useTheme();
+        return <Component theme={theme} {...props} />;
+    };
+}
+

src/index.css

@@ -1,5 +1,35 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
+:root {
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #1a1a2e;
+  --bg-tertiary: #16213e;
+  --text-primary: #dee2e6;
+  --text-secondary: #dee2e6;
+  --text-muted: rgba(255, 255, 255, 0.5);
+  --border-color: rgba(255, 255, 255, 0.1);
+  --border-light: rgba(255, 255, 255, 0.05);
+  --card-bg: rgba(255, 255, 255, 0.03);
+  --accent: #dee2e6;
+  --accent-light: #cccccc;
+  --scrollbar-track: #1a1a2e;
+}
+
+body.light-theme {
+  --bg-primary: #f5f5f5;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #e8e8e8;
+  --text-primary: rgba(0, 0, 0, 0.85);
+  --text-secondary: rgba(0, 0, 0, 0.6);
+  --text-muted: rgba(0, 0, 0, 0.5);
+  --border-color: rgba(0, 0, 0, 0.1);
+  --border-light: rgba(0, 0, 0, 0.05);
+  --card-bg: rgba(0, 0, 0, 0.03);
+  --accent: #e94560;
+  --accent-light: #ff6b6b;
+  --scrollbar-track: #e8e8e8;
+}
+
 body {
   margin: 0;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -7,8 +37,12 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #0a0a0a;
+  background-color: var(--bg-primary);
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--text-primary);
+}
+
+body.light-theme code {
+  background: rgba(0, 0, 0, 0.1);
 }
 
 code {
@@ -21,7 +55,7 @@ code {
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: #e94560 #1a1a2e;
+  scrollbar-color: var(--accent) var(--scrollbar-track);
 }
 
 *::-webkit-scrollbar {
@@ -29,11 +63,11 @@ code {
 }
 
 *::-webkit-scrollbar-track {
-  background: #1a1a2e;
+  background: var(--scrollbar-track);
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: #e94560;
+  background-color: var(--accent);
   border-radius: 4px;
 }
 

src/pages/BuildingPage.tsx

@@ -17,7 +17,7 @@ import {
     TableCell,
     TableRow,
     Tooltip,
-    Typography, LinearProgress
+    Typography, LinearProgress, Theme,
 } from "@mui/material";
 import ArmorType from "../classes/ArmorType";
 import AvTimerOutlinedIcon from '@mui/icons-material/AvTimer';
@@ -34,6 +34,7 @@ import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
 import Ability from "../classes/Ability";
 import DeathExplosion from "../classes/DeathExplosion";
 import {styled} from '@mui/material/styles';
+import {withTheme} from "../core/api";
 import {DescriptionBox} from "../commons/DescriptionBox";
 import {ArrowBack} from "@mui/icons-material";
 import {BackButton} from "../commons/BackButton";
@@ -46,51 +47,80 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
 }));
 
 const StatsPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
+    background: theme.palette.mode === 'dark'
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
     borderRadius: '12px',
     overflow: 'hidden',
     '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.9)',
+        color: theme.palette.text.primary,
     },
     '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
         fontWeight: 600,
     },
 }));
 
+const StyledDivider = styled(Divider)(({ theme }) => ({
+    my: 3,
+    borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+}));
+
+const BuildingTitle = styled(Typography)(({ theme }) => ({
+    fontWeight: 800,
+    mb: 1,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 2,
+}));
+
+const BuildingSubtitle = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontWeight: 500,
+}));
+
+const UnitLink = styled(Link)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    textDecoration: 'none',
+    '&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560' },
+}));
+
+const UnitListItem = styled(ListItem)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    padding: '8px 12px',
+    background: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)',
+    borderRadius: '8px',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'}`,
+    transition: 'all 0.2s ease',
+    '&:hover': { background: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(233, 69, 96, 0.1)', borderColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.3)' : 'rgba(233, 69, 96, 0.3)' },
+}));
+
 interface UintPageState {
     building: IBuilding,
     mod: IMod,
 }
 
-function Unit (unit: IUnitShort, modId: number, raceId: String) {
+function Unit (unit: IUnitShort, modId: number, raceId: String, theme: Theme) {
 
     return (<Grid2 key={unit.id} size={{xs: 12, md: 3}}>
-        <Link href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id} sx={{color: 'rgba(255,255,255,0.85)', textDecoration: 'none', '&:hover': {color: '#e94560'}}}>
+        <UnitLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id}>
-            <ListItem sx={{
+            <UnitListItem>
-                color: 'rgba(255,255,255,0.85)',
-                padding: '8px 12px',
-                background: 'rgba(255,255,255,0.03)',
-                borderRadius: '8px',
-                border: '1px solid rgba(255,255,255,0.05)',
-                transition: 'all 0.2s ease',
-                '&:hover': { background: 'rgba(233, 69, 96, 0.1)', borderColor: 'rgba(233, 69, 96, 0.3)' }
-            }}>
                 {unit.icon && <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/> }
                 {unit.name}
                 {unit.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                     src="/images/DETECT_YES.webp"/></span>}
-            </ListItem>
+            </UnitListItem>
-        </Link>
+        </UnitLink>
     </Grid2>)
 }
 
 
-function Building(building: IBuilding, mod: IMod) {
+function Building(building: IBuilding, mod: IMod, theme: Theme) {
 
     document.title = building.name + " — " + mod.name
 
+    const isDark = theme.palette.mode === 'dark';
 
     let mapBuildingWeapons: Map<number, Map<number, IShortWeapon>> = new Map();
 
@@ -113,23 +143,14 @@ function Building(building: IBuilding, mod: IMod) {
     return (
         <Box>
             <Box sx={{ mb: 3 }}>
-                <Typography variant="h4" component="h2" sx={{
+                <BuildingTitle variant="h4">
-                    fontWeight: 800,
-                    mb: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                }}>
                     {building.icon &&
                         <img className="unitIcon" src={IconUrl + building.icon.replaceAll('\\', '/')}/>}
                     {buildingName}
-                </Typography>
+                </BuildingTitle>
-                <Typography variant="subtitle1" sx={{
+                <BuildingSubtitle variant="subtitle1">
-                    color: 'rgba(255, 255, 255, 0.6)',
-                    fontWeight: 500,
-                }}>
                     {mod.name} ({mod.version})
-                </Typography>
+                </BuildingSubtitle>
             </Box>
 
             <Grid2 container spacing={3}>
@@ -232,7 +253,7 @@ function Building(building: IBuilding, mod: IMod) {
                     <SectionTitle>Unit production</SectionTitle>
                     <Grid2 container spacing={2}>
                         {building.units.map(unit =>
-                            Unit(unit, mod.id, building.race.id)
+                            Unit(unit, mod.id, building.race.id, theme)
                         )}
                     </Grid2>
                 </Grid2>}
@@ -271,7 +292,7 @@ function Building(building: IBuilding, mod: IMod) {
                 </Grid2>
                 <b className="hotkey" >Hotkey: {building.hotkey}</b>
             </Grid2>
-            <Divider sx={{ my: 3, borderColor: 'rgba(255, 255, 255, 0.1)' }} />
+            <StyledDivider />
             <UnitsTable modId={mod.id}/>
         </Box>)
 }
@@ -298,9 +319,10 @@ class BuildingPage extends React.Component<any, UintPageState> {
 
         if (this.state != null && this.state.building != null && this.state.mod != null) {
             const backRef = "/mod/" + this.props.match.params.modId + "/race/" + this.props.match.params.raceId
+            const { theme } = this.props;
 
             return (
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+                <Container maxWidth="lg">
                     <BackButton
                         variant="outlined"
                         startIcon={<ArrowBack/>}
@@ -308,7 +330,7 @@ class BuildingPage extends React.Component<any, UintPageState> {
                     >
                         Back to race
                     </BackButton>
-                    {Building(this.state.building, this.state.mod)}
+                    {Building(this.state.building, this.state.mod, theme)}
                 </Container>
             );
         } else {
@@ -321,4 +343,4 @@ class BuildingPage extends React.Component<any, UintPageState> {
     }
 }
 
-export default withRouter(BuildingPage);
+export default withRouter(withTheme(BuildingPage));

src/pages/ModPage.tsx

@@ -1,6 +1,7 @@
 import {AvailableMods, AvailableRacesPart, AvailableUnits, IconUrl} from "../core/api";
 import React, { useState } from "react";
 import {withRouter} from "../core/withrouter";
+import {withTheme} from "../core/api";
 import {IMod} from "../types/Imod";
 import {
     ArrowBack,
@@ -19,6 +20,12 @@ import UnitsTable from "../classes/UnitsTable";
 import {BackButton} from "../commons/BackButton";
 
 
+
+const ModNotFound = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+}));
+
+
 interface ModPageState {
     mod: IMod | null,
     loading: boolean,
@@ -60,6 +67,7 @@ class ModPage extends React.Component<any, ModPageState> {
 
         if (this.state != null && this.state.mod != null) {
             document.title = this.state.mod.name + " — ModWiki";
+            const isDark = this.props.theme.palette.mode === 'dark';
 
             return (
                 <Container maxWidth="lg">
@@ -71,12 +79,20 @@ class ModPage extends React.Component<any, ModPageState> {
                         Back to mods list
                     </BackButton>
 
-                    <Typography variant="h6" sx={{
+                    <Typography variant="h3" component="h1" sx={{
-                        color: 'rgba(255, 255, 255, 0.6)',
+                        fontWeight: 800,
-                        fontWeight: 500,
+                        mb: 1,
-                        paddingBottom: 1
+                        WebkitBackgroundClip: isDark ? 'text' : 'initial',
+                        WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
+                        color: isDark ? '#dee2e6' : '#000000',
                     }}>
-                        {this.state.mod.name} ({this.state.mod.version})
+                        {this.state.mod.name}
+                    </Typography>
+                    <Typography variant="h6" sx={{
+                        color: this.props.theme.palette.text.secondary,
+                        fontWeight: 500,
+                    }}>
+                        ({this.state.mod.version})
                     </Typography>
 
                     <Box>
@@ -87,9 +103,9 @@ class ModPage extends React.Component<any, ModPageState> {
         } else {
             return (
                 <Container maxWidth="lg" sx={{ py: 8, textAlign: 'center' }}>
-                    <Typography variant="h5" sx={{ color: 'rgba(255, 255, 255, 0.5)' }}>
+                    <ModNotFound variant="h5">
                         Mod not found
-                    </Typography>
+                    </ModNotFound>
                 </Container>
             );
         }
@@ -98,4 +114,4 @@ class ModPage extends React.Component<any, ModPageState> {
 
 
 
-export default withRouter(ModPage);
+export default withRouter(withTheme(ModPage));

src/pages/ModsPage.tsx

@@ -23,7 +23,9 @@ import { styled } from '@mui/material/styles';
 const PageHeader = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(6, 4),
     marginBottom: theme.spacing(6),
-    background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
+    background: theme.palette.mode === 'dark'
+        ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)'
+        : 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%)',
     borderRadius: '16px',
     position: 'relative',
     overflow: 'hidden',
@@ -34,7 +36,7 @@ const PageHeader = styled(Paper)(({ theme }) => ({
         left: 0,
         right: 0,
         bottom: 0,
-        background: 'radial-gradient(circle at 30% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%)',
+        background: 'radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05) 0%, #dee2e6 50%)',
         pointerEvents: 'none',
     },
 }));
@@ -43,8 +45,10 @@ const ModCard = styled(Card)(({ theme }) => ({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
+    background: theme.palette.mode === 'dark'
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
     borderRadius: '16px',
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     position: 'relative',
@@ -56,14 +60,15 @@ const ModCard = styled(Card)(({ theme }) => ({
         left: 0,
         right: 0,
         height: '3px',
-        background: 'linear-gradient(90deg, #e94560 0%, #ff6b6b 100%)',
+        background: theme.palette.mode === 'dark'
+            ? 'linear-gradient(90deg, #dee2e6 0%, #cccccc 100%)'
+            : 'linear-gradient(90deg, #e94560 0%, #ff6b6b 100%)',
         transform: 'scaleX(0)',
         transition: 'transform 0.3s ease',
     },
     '&:hover': {
-        transform: 'translateY(-8px)',
+        boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(233, 69, 96, 0.2)',
-        boxShadow: '0 20px 40px rgba(233, 69, 96, 0.2)',
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
-        borderColor: 'rgba(233, 69, 96, 0.3)',
         '&::before': {
             transform: 'scaleX(1)',
         },
@@ -75,16 +80,79 @@ const VersionLink = styled(NavLink)(({ theme }) => ({
     alignItems: 'center',
     padding: theme.spacing(1.5, 2),
     marginBottom: theme.spacing(1),
-    background: 'rgba(255, 255, 255, 0.05)',
+    background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
     borderRadius: '10px',
     textDecoration: 'none',
     color: 'inherit',
     transition: 'all 0.2s ease',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
     '&:hover': {
-        background: 'rgba(233, 69, 96, 0.15)',
+        background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
-        borderColor: 'rgba(233, 69, 96, 0.3)',
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
-        transform: 'translateX(4px)',
+    },
+}));
+
+const ModTitle = styled(Typography)(({ theme }) => ({
+    fontWeight: 700,
+    mb: 1,
+    background: theme.palette.mode === 'dark'
+        ? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
+        : 'linear-gradient(135deg, #000000 0%, #333333 100%)',
+    WebkitBackgroundClip: theme.palette.mode === 'dark' ? 'text' : 'initial',
+    WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'initial',
+    color: theme.palette.mode === 'dark' ? '#dee2e6' : '#000000',
+}));
+
+const ModDescription = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    lineHeight: 1.6,
+}));
+
+const VersionsChip = styled(Chip)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(233, 69, 96, 0.2)',
+    color: theme.palette.mode === 'dark' ? '#dee2e6' : '#ff6b6b',
+    fontWeight: 600,
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+    my: 2,
+    borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+}));
+
+const MainVersionsLabel = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontWeight: 600,
+    mb: 1.5,
+}));
+
+const VersionText = styled(Typography)(({ theme }) => ({
+    fontWeight: 600,
+    color: theme.palette.text.secondary,
+}));
+
+const VersionArrow = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+}));
+
+const BetaVersionsLabel = styled(Typography)(({ theme }) => ({
+    color: 'rgba(255, 193, 7, 0.9)',
+    fontWeight: 600,
+    mb: 1,
+}));
+
+const OpenLatestButton = styled(Button)(({ theme }) => ({
+    width: '100%',
+    color: '#FFD700',
+    borderColor: 'rgba(255, 215, 0, 0.5)',
+    fontWeight: 600,
+    borderRadius: '10px',
+    textTransform: 'none',
+    fontSize: '1rem',
+    py: 1.5,
+    '&:hover': {
+        borderColor: '#FFD700',
+        backgroundColor: 'rgba(255, 215, 0, 0.1)',
+        boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
     },
 }));
 
@@ -128,88 +196,48 @@ function Mods({ mods }: ModsProps) {
         const { latest, hasBeta, betaVersion } = getLatestVersion(modName);
 
         return (
-            <ModCard sx={{ animationDelay: `${index * 100}ms` }}>
+            <ModCard>
                 <CardContent sx={{ flexGrow: 1, p: 3 }}>
                     <Box sx={{ mb: 2 }}>
-                        <Typography variant="h5" component="h2" sx={{
+                        <ModTitle variant="h5">
-                            fontWeight: 700,
-                            mb: 1,
-                            background: 'linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%)',
-                            WebkitBackgroundClip: 'text',
-                            WebkitTextFillColor: 'transparent',
-                        }}>
                             {modName}
-                        </Typography>
+                        </ModTitle>
-                        <Typography variant="body2" sx={{
-                            color: 'rgba(255, 255, 255, 0.7)',
-                            lineHeight: 1.6,
-                        }}>
-                        </Typography>
                     </Box>
 
                     <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
-                        <Chip
+                        <VersionsChip
                             label={`${sameMods.length} versions`}
                             size="small"
-                            sx={{
-                                backgroundColor: 'rgba(233, 69, 96, 0.2)',
-                                color: '#ff6b6b',
-                                fontWeight: 600,
-                            }}
                         />
-                        {hasBeta && (
-                            <Chip
-                                label="Beta"
-                                size="small"
-                                color="warning"
-                                sx={{ fontWeight: 600 }}
-                            />
-                        )}
                     </Box>
 
-                    <Divider sx={{ my: 2, borderColor: 'rgba(255, 255, 255, 0.1)' }} />
-
-                    <Typography variant="subtitle2" sx={{
-                        color: 'rgba(255, 255, 255, 0.9)',
-                        fontWeight: 600,
-                        mb: 1.5,
-                    }}>
-                        Main versions:
-                    </Typography>
-
                     {sameMods.filter(m => !m.isBeta).map(mod => (
                         <VersionLink key={mod.id} to={"/mod/" + mod.id} state={mod.id}>
                             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-                                <Typography variant="body2" sx={{ fontWeight: 600, color: 'rgba(255, 255, 255, 0.7)' }}>
+                                <VersionText variant="body2">
                                     Version {mod.version}
-                                </Typography>
+                                </VersionText>
-                                <Typography variant="caption" sx={{
+                                <VersionArrow variant="caption">
-                                    color: 'rgba(255, 255, 255, 0.5)',
-                                }}>
                                     →
-                                </Typography>
+                                </VersionArrow>
                             </Box>
                         </VersionLink>
                     ))}
 
                     {hasBeta && (
                         <Box sx={{ mt: 2 }}>
-                            <Typography variant="subtitle2" sx={{
+                            <BetaVersionsLabel variant="subtitle2">
-                                color: 'rgba(255, 193, 7, 0.9)',
-                                fontWeight: 600,
-                                mb: 1,
-                            }}>
                                 Beta versions:
-                            </Typography>
+                            </BetaVersionsLabel>
                             {betaVersion && (
                                 <VersionLink to={"/mod/" + betaVersion.id} state={betaVersion.id}>
                                     <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                                         <Typography variant="body2" sx={{ fontWeight: 600 }}>
                                             Version {betaVersion.version} (Beta)
                                         </Typography>
-                                        <Typography variant="caption" sx={{ color: 'rgba(255, 255, 255, 0.5)' }}>
+                                        <VersionArrow variant="caption">
                                             →
-                                        </Typography>
+                                        </VersionArrow>
                                     </Box>
                                 </VersionLink>
                             )}
@@ -226,18 +254,17 @@ function Mods({ mods }: ModsProps) {
                         state={latest?.id}
                         sx={{
                             width: '100%',
-                            color: '#e94560',
+                            color: '#FFD700',
-                            borderColor: 'rgba(233, 69, 96, 0.5)',
+                            borderColor: 'rgba(255, 215, 0, 0.5)',
                             fontWeight: 600,
                             borderRadius: '10px',
                             textTransform: 'none',
                             fontSize: '1rem',
                             py: 1.5,
                             '&:hover': {
-                                borderColor: '#e94560',
+                                borderColor: '#FFD700',
-                                backgroundColor: 'rgba(233, 69, 96, 0.1)',
+                                backgroundColor: 'rgba(255, 215, 0, 0.1)',
-                                transform: 'translateY(-2px)',
+                                boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
-                                boxShadow: '0 8px 20px rgba(233, 69, 96, 0.2)',
                             },
                         }}
                     >

src/pages/RacePageFast.tsx

@@ -1,5 +1,5 @@
 import {AvailableBuildings, AvailableMods, AvailableRacesPart, AvailableUnits, IconUrl} from "../core/api";
-import React, {useState} from "react";
+import React from "react";
 import {withRouter} from "../core/withrouter";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
@@ -18,11 +18,13 @@ import {
     ListItem,
     Paper,
     Typography,
+    Theme,
 } from "@mui/material";
 import {ArrowBack, ExpandMore} from "@mui/icons-material";
 import {IRaceUnits, IUnitShort} from "../types/IUnitShort";
 import {IBuildingShort, IRaceBuildings} from "../types/IBuildingShort";
 import {styled} from '@mui/material/styles';
+import {withTheme} from "../core/api";
 import {StyledLink} from "../commons/StyledLink";
 import {BackButton} from "../commons/BackButton";
 
@@ -33,19 +35,30 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
 }));
 
 const UnitCard = styled(Paper)(({ theme }) => ({
-    background: 'rgba(255, 255, 255, 0.03)',
+    background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)',
-    border: '1px solid rgba(255, 255, 255, 0.05)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'}`,
     borderRadius: '10px',
     padding: theme.spacing(1.5, 2),
     transition: 'all 0.2s ease',
     '&:hover': {
-        background: 'rgba(233, 69, 96, 0.1)',
+        background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.1)',
-        borderColor: 'rgba(233, 69, 96, 0.3)',
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
     },
 }));
 
 const BuildingCard = styled(UnitCard)(({ theme }) => ({}));
 
+const UnitLink = styled(Link)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    textDecoration: 'none',
+    display: 'block',
+    '&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560' }
+}));
+
+const LoadingText = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+}));
+
 interface RacePageState {
     mod: IMod,
     race: Irace,
@@ -53,29 +66,29 @@ interface RacePageState {
 }
 
 
-function Unit(unit: IUnitShort, modId: number, raceId: String) {
+function Unit(unit: IUnitShort, modId: number, raceId: String, theme: Theme) {
+    const isDark = theme.palette.mode === 'dark';
+    const borderColor = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
+    const bgColor = isDark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)';
 
-    return (<Link href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id} sx={{
+    return (
-        color: 'rgba(255,255,255,0.85)',
+        <UnitLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id}>
-        textDecoration: 'none',
+            <ListItem sx={{
-        display: 'block',
+                color: theme.palette.text.primary,
-        '&:hover': { color: '#e94560' }
+                padding: '6px 12px',
-    }}>
+                background: bgColor,
-        <ListItem sx={{
+                borderRadius: '8px',
-            color: 'rgba(255,255,255,0.85)',
+                border: `1px solid ${borderColor}`,
-            padding: '6px 12px',
+                transition: 'all 0.2s ease',
-            background: 'rgba(255,255,255,0.02)',
+                '&:hover': { background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(233, 69, 96, 0.1)', borderColor: isDark ? 'rgba(255,255,255,0.3)' : 'rgba(233, 69, 96, 0.3)' }
-            borderRadius: '8px',
+            }}>
-            border: '1px solid rgba(255,255,255,0.05)',
+                {unit.icon && <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
-            transition: 'all 0.2s ease',
+                {unit.name}
-            '&:hover': { background: 'rgba(233, 69, 96, 0.1)', borderColor: 'rgba(233, 69, 96, 0.3)' }
+                {unit.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
-        }}>
+                                                    src="/images/DETECT_YES.webp"/></span>}
-            {unit.icon && <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
+            </ListItem>
-            {unit.name}
+        </UnitLink>
-            {unit.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
+    )
-                                                src="/images/DETECT_YES.webp"/></span>}
-        </ListItem>
-    </Link>)
 }
 
 function UnitSmall(unit: IUnitShort, modId: number, raceId: String) {
@@ -94,13 +107,14 @@ function UnitSmall(unit: IUnitShort, modId: number, raceId: String) {
             src="/images/DETECT_YES.webp"/></span>}<br/></StyledLink>)
 }
 
-function Building(building: IBuildingShort, modId: number, raceId: String) {
+function Building(building: IBuildingShort, modId: number, raceId: String, theme: Theme) {
+    const isDark = theme.palette.mode === 'dark';
 
     return (<Grid2 size={{xs: 12, md: 3}}>
         <Link href={"/mod/" + modId + "/race/" + raceId + "/building/" + building.id} sx={{
             textDecoration: 'none',
             display: 'block',
-            '&:hover': { color: '#e94560' }
+            '&:hover': { color: isDark ? '#dee2e6' : '#e94560' }
         }}>
             <BuildingCard elevation={0}>
                 <ListItem sx={{
@@ -128,7 +142,7 @@ interface UnitsState {
     buildings: IRaceBuildings | null,
 }
 
-class Units extends React.Component<UnitsProps, UnitsState> {
+class Units extends React.Component<UnitsProps & { theme: Theme }, UnitsState> {
 
 
     constructor(props: any) {
@@ -157,7 +171,8 @@ class Units extends React.Component<UnitsProps, UnitsState> {
     }
 
     render() {
-
+        const { theme } = this.props;
+        const isDark = theme.palette.mode === 'dark';
 
         if (this.state && this.state.units) {
 
@@ -165,65 +180,73 @@ class Units extends React.Component<UnitsProps, UnitsState> {
                 document.title = this.state.buildings?.race.name
             }
 
-            const accordionSx = {
+            const accordionSx = isDark ? {
                 background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
                 border: '1px solid rgba(255, 255, 255, 0.1)',
                 borderRadius: '12px',
                 '&:before': { display: 'none' },
                 '&.Mui-expanded': { margin: '0 0 8px 0' },
+            } : {
+                background: 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+                border: '1px solid rgba(0, 0, 0, 0.1)',
+                borderRadius: '12px',
+                '&:before': { display: 'none' },
+                '&.Mui-expanded': { margin: '0 0 8px 0' },
             };
 
             return (this.state.buildings != null ?
                     <Box>
                         <Grid2 container spacing={2}>
-                            {this.state.buildings.buildings.map(building => Building(building, this.props.modId, this.props.raceId))}
+                            {this.state.buildings.buildings.map(building => Building(building, this.props.modId, this.props.raceId, theme))}
                         </Grid2>
                             {this.state.buildings.buildingsAdvanced.length > 0 && <Box sx={{ mt: 3 }}>
-                                <Divider sx={{ my: 2, borderColor: 'rgba(255, 255, 255, 0.1)' }} />
+                                <Divider sx={{ my: 2, borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' }} />
                                 <SectionTitle>Advanced buildings</SectionTitle>
                                 <Grid2 container spacing={2}>
-                                    {this.state.buildings.buildingsAdvanced.map(building => Building(building, this.props.modId, this.props.raceId))}
+                                    {this.state.buildings.buildingsAdvanced.map(building => Building(building, this.props.modId, this.props.raceId, theme))}
                                 </Grid2><br/></Box>}
                         <Box sx={{ mt: 3 }}>
                             <Accordion sx={accordionSx}>
                                 <AccordionSummary
-                                    expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+                                    expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : '#000000'}}/>}
                                     aria-controls="units-accordion"
                                     id="units-accordion"
-                                    sx={{color: '#ffffff'}}
+                                    sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
                                 >
-                                    <SectionTitle sx={{ mb: 0 }}>All units</SectionTitle>
+                                    <SectionTitle sx={{ mb: 0, display: 'flex', alignItems: 'center' }}>All units</SectionTitle>
                                 </AccordionSummary>
                                 <AccordionDetails>
                                     <Grid2 container spacing={2}>
                                         <Grid2 size={{xs: 12, md: 4}}>
-                                            <Typography variant="h6" sx={{ color: '#ffffff', fontWeight: 600, mb: 2 }}>Infantry</Typography>
+                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Infantry</Typography>
-                                            {this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId))}
+                                            {this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
                                         </Grid2>
                                         <Grid2 size={{xs: 12, md: 4}}>
-                                            <Typography variant="h6" sx={{ color: '#ffffff', fontWeight: 600, mb: 2 }}>Tech</Typography>
+                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Tech</Typography>
                                             <List>
-                                                {this.state.units.tech.map(unit => Unit(unit, this.props.modId, this.props.raceId))}
+                                                {this.state.units.tech.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
                                             </List>
                                         </Grid2>
                                         <Grid2 size={{xs: 12, md: 4}}>
-                                            <Typography variant="h6" sx={{ color: '#ffffff', fontWeight: 600, mb: 2 }}>Support</Typography>
+                                            <Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Support</Typography>
                                             <List>
-                                                {this.state.units.support.map(unit => Unit(unit, this.props.modId, this.props.raceId))}
+                                                {this.state.units.support.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
                                             </List>
                                         </Grid2>
                                     </Grid2>
                                 </AccordionDetails>
                             </Accordion>
                         </Box>
-                    </Box> : <Box sx={{ color: 'rgba(255, 255, 255, 0.5)' }}>Loading</Box>
+                    </Box> : <LoadingText>Loading</LoadingText>
             )
         } else {
-            return <Box sx={{ color: 'rgba(255, 255, 255, 0.5)' }}>Loading...</Box>;
+            return <LoadingText>Loading...</LoadingText>;
         }
     }
 }
 
+const UnitsWithTheme = withTheme(Units) as React.ComponentType<UnitsProps>;
+
 class RacePageFast extends React.Component<any, RacePageState> {
 
     constructor(props: any) {
@@ -252,9 +275,11 @@ class RacePageFast extends React.Component<any, RacePageState> {
 
         if (this.state != null && this.state.mod != null && this.state.race != null) {
             const backRef = "/mod/" + this.state.mod.id
+            const theme = this.props.theme;
+            const isDark = theme.palette.mode === 'dark';
 
             return (
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+                <Container maxWidth="lg">
                     <BackButton
                         variant="outlined"
                         startIcon={<ArrowBack/>}
@@ -267,26 +292,29 @@ class RacePageFast extends React.Component<any, RacePageState> {
                         <Typography variant="h3" component="h1" sx={{
                             fontWeight: 800,
                             mb: 1,
-                            background: 'linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%)',
+                            background: isDark
-                            WebkitBackgroundClip: 'text',
+                                ? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
-                            WebkitTextFillColor: 'transparent',
+                                : 'linear-gradient(135deg, #000000 0%, #333333 100%)',
+                            WebkitBackgroundClip: isDark ? 'text' : 'initial',
+                            WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
+                            color: isDark ? '#dee2e6' : '#000000',
                         }}>
                             {this.state.race.name}
                         </Typography>
                         <Typography variant="h6" sx={{
-                            color: 'rgba(255, 255, 255, 0.6)',
+                            color: theme.palette.text.secondary,
                             fontWeight: 500,
                         }}>
                             {this.state.mod.name} ({this.state.mod.version})
                         </Typography>
                     </Box>
 
-                    <Units raceId={this.state.race.id} modId={this.state.mod.id}/>
+                    <UnitsWithTheme raceId={this.state.race.id} modId={this.state.mod.id}/>
                 </Container>
             );
         } else {
             return (
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+                <Container maxWidth="lg">
                     <LinearProgress sx={{ width: '200px', mx: 'auto', display: 'block' }} />
                 </Container>
             );
@@ -294,4 +322,4 @@ class RacePageFast extends React.Component<any, RacePageState> {
     }
 }
 
-export default withRouter(RacePageFast);
+export default withRouter(withTheme(RacePageFast));

src/pages/UnitPage.tsx

@@ -18,7 +18,7 @@ import {
     TableCell,
     TableRow,
     Tooltip,
-    Typography,
+    Typography, Theme,
 } from "@mui/material";
 import {ArrowBack, ExpandMore} from "@mui/icons-material";
 import ArmorType from "../classes/ArmorType";
@@ -34,6 +34,7 @@ import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
 import Ability from "../classes/Ability";
 import DeathExplosion from "../classes/DeathExplosion";
 import {styled} from '@mui/material/styles';
+import {withTheme} from "../core/api";
 import {DescriptionBox} from "../commons/DescriptionBox";
 import {BackButton} from "../commons/BackButton";
 
@@ -44,19 +45,50 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
 }));
 
 const StatsPaper = styled(Paper)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
+    background: theme.palette.mode === 'dark'
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
     borderRadius: '12px',
     overflow: 'hidden',
     '& .MuiTableBody .MuiTableRow-root': {
         '&:last-child td, &:last-child th': { border: 0 },
     },
     '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
+        color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
         fontWeight: 600,
     },
 }));
 
+const SergeantAccordion = styled(Accordion)(({ theme }) => ({
+    background: theme.palette.mode === 'dark'
+        ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
+    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
+    borderRadius: '12px',
+    mb: 1,
+    '&:before': { display: 'none' },
+    '&.Mui-expanded': { margin: '0 0 8px 0' },
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+    my: 3,
+    borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+}));
+
+const UnitTitle = styled(Typography)(({ theme }) => ({
+    fontWeight: 800,
+    mb: 1,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 2,
+}));
+
+const UnitSubtitle = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontWeight: 500,
+}));
+
 
 interface UintPageState {
     unit: IUnit,
@@ -64,10 +96,12 @@ interface UintPageState {
 }
 
 
-function Unit(unit: IUnit, mod: IMod) {
+function Unit(unit: IUnit, mod: IMod, theme: Theme) {
 
     document.title = unit.name + " — " + mod.name
 
+    const isDark = theme.palette.mode === 'dark';
+
     const morale = (unit.moraleMax !== null) ? <span>
         <img style={{verticalAlign: "top"}} src="/images/ARM_Morale.webp"/>&nbsp;{unit.moraleMax}
         +{unit.moraleRegeneration}/s
@@ -98,7 +132,7 @@ function Unit(unit: IUnit, mod: IMod) {
     const SergeantShort = (props: sergeantProps) => {
 
         return (
-            <span style={{fontSize: 20, color: '#ffffff'}}>
+            <span style={{fontSize: 20, color: isDark ? '#dee2e6' : '#000000', display: 'flex', alignItems: 'center'}}>
                 {props.icon && <img className="sergeantIcon" src={IconUrl + props.icon.replaceAll('\\', '/')}/> }
                 &nbsp; {props.name}
                 {props.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
@@ -111,23 +145,14 @@ function Unit(unit: IUnit, mod: IMod) {
     return (
         <Box>
             <Box sx={{ mb: 3 }}>
-                <Typography variant="h4" component="h2" sx={{
+                <UnitTitle variant="h4">
-                    fontWeight: 800,
-                    mb: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                }}>
                     {unit.icon &&
                         <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
                     {unit.name}
-                </Typography>
+                </UnitTitle>
-                <Typography variant="subtitle1" sx={{
+                <UnitSubtitle variant="subtitle1">
-                    color: 'rgba(255, 255, 255, 0.6)',
-                    fontWeight: 500,
-                }}>
                     {mod.name} ({mod.version})
-                </Typography>
+                </UnitSubtitle>
             </Box>
 
             <Grid2 container spacing={3}>
@@ -297,22 +322,15 @@ function Unit(unit: IUnit, mod: IMod) {
                     </Grid2>}
                 <Grid2 size={12}>
                     {unit.sergeants.map(s =>
-                        <Accordion key={s.id} sx={{
+                        <SergeantAccordion key={s.id}>
-                            background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-                            border: '1px solid rgba(255, 255, 255, 0.1)',
-                            borderRadius: '12px',
-                            mb: 1,
-                            '&:before': { display: 'none' },
-                            '&.Mui-expanded': { margin: '0 0 8px 0' },
-                        }}>
                             <AccordionSummary
-                                sx={{color: '#ffffff'}}>
+                                sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}>
                                 <SergeantShort name={s.name} icon={s.icon} canDetect={s.detectRadius > 0}/>
                             </AccordionSummary>
-                            <AccordionDetails sx={{color: 'rgba(255, 255, 255, 0.85)'}}>
+                            <AccordionDetails sx={{color: theme.palette.text.primary}}>
                                 <Sergeant mod={mod} sergeant={s} race={unit.race}/>
                             </AccordionDetails>
-                        </Accordion>)}
+                        </SergeantAccordion>)}
                 </Grid2>
 
                 {unit.moraleMax !== null && !(unit.moraleBrakeModifiers.find(m => m.reference.includes("accuracy_weapon_modifier") && m.value === 0.2) !== undefined &&
@@ -355,7 +373,7 @@ function Unit(unit: IUnit, mod: IMod) {
             <Box sx={{ mt: 3, mb: 2, fontWeight: 600, fontSize: '0.85rem' }}>
                 Hotkey: {unit.hotkey}
             </Box>
-            <Divider sx={{ my: 3, borderColor: 'rgba(255, 255, 255, 0.1)' }} />
+            <StyledDivider />
             <UnitsTable modId={mod.id}/>
         </Box>
     )
@@ -387,9 +405,10 @@ class UnitPage extends React.Component<any, UintPageState> {
 
         if (this.state != null && this.state.unit != null && this.state.mod != null) {
             const backRef = "/mod/" + this.props.match.params.modId + "/race/" + this.props.match.params.raceId
+            const { theme } = this.props;
 
             return (
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+                <Container maxWidth="lg">
                     <BackButton
                         variant="outlined"
                         startIcon={<ArrowBack/>}
@@ -397,7 +416,7 @@ class UnitPage extends React.Component<any, UintPageState> {
                     >
                         Back to race
                     </BackButton>
-                    {Unit(this.state.unit, this.state.mod)}
+                    {Unit(this.state.unit, this.state.mod, theme)}
                 </Container>
             );
         } else {
@@ -410,4 +429,4 @@ class UnitPage extends React.Component<any, UintPageState> {
     }
 }
 
-export default withRouter(UnitPage);
+export default withRouter(withTheme(UnitPage));

src/themes/theme.ts

@@ -0,0 +1,83 @@
+import { createTheme } from '@mui/material/styles';
+
+export const darkTheme = createTheme({
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1320,
+            xl: 1536,
+        },
+    },
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: "#1a1a2e",
+        },
+        background: {
+            default: '#0a0a0a',
+            paper: '#1a1a2e',
+        },
+        text: {
+            primary: '#dee2e6',
+            secondary: '#dee2e6',
+        },
+    },
+    typography: {
+        fontFamily: '"Inter", "Roboto", "Helvetica", sans-serif',
+    },
+    shape: {
+        borderRadius: 12,
+    },
+    components: {
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    color: '#dee2e6',
+                },
+            },
+        },
+    },
+});
+
+export const lightTheme = createTheme({
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1320,
+            xl: 1536,
+        },
+    },
+    palette: {
+        mode: 'light',
+        primary: {
+            main: "#1a1a2e",
+        },
+        background: {
+            default: '#f5f5f5',
+            paper: '#ffffff',
+        },
+        text: {
+            primary: 'rgba(0, 0, 0, 0.85)',
+            secondary: 'rgba(0, 0, 0, 0.6)',
+        },
+    },
+    typography: {
+        fontFamily: '"Inter", "Roboto", "Helvetica", sans-serif',
+    },
+    shape: {
+        borderRadius: 12,
+    },
+    components: {
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    color: 'rgba(0, 0, 0, 0.85)',
+                },
+            },
+        },
+    },
+});