{researches.map(rs =>
+ return
{researches.map(rs =>
rs.buildingId == null ? :
Research affect: {researchLink(rs)}
)}
diff --git a/src/classes/building/ResearchFull.tsx b/src/classes/building/ResearchFull.tsx
index d4b8272..1c4c813 100644
--- a/src/classes/building/ResearchFull.tsx
+++ b/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";
-
-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,
- },
-}));
+import {StyledPaper} from "../../commons/StyledPaper";
interface IResearchFull {
diff --git a/src/commons/BackButton.tsx b/src/commons/BackButton.tsx
index 8d99c39..c09cb11 100644
--- a/src/commons/BackButton.tsx
+++ b/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',
- borderColor: 'rgba(233, 69, 96, 0.5)',
+ color: '#FFD700',
+ borderColor: 'rgba(255, 215, 0, 0.5)',
textTransform: 'none',
fontWeight: 600,
'&:hover': {
- borderColor: '#e94560',
- backgroundColor: 'rgba(233, 69, 96, 0.1)',
+ borderColor: '#FFD700',
+ backgroundColor: 'rgba(255, 215, 0, 0.1)',
},
}));
\ No newline at end of file
diff --git a/src/commons/DescriptionBox.tsx b/src/commons/DescriptionBox.tsx
index 0ad4309..c6316d4 100644
--- a/src/commons/DescriptionBox.tsx
+++ b/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',
}));
\ No newline at end of file
diff --git a/src/commons/StyledAccordion.tsx b/src/commons/StyledAccordion.tsx
index 2f7b592..86f497d 100644
--- a/src/commons/StyledAccordion.tsx
+++ b/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%)',
- border: '1px solid rgba(255, 255, 255, 0.1)',
+ 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',
'&:before': { display: 'none' },
'&.Mui-expanded': { margin: '0 0 8px 0' },
diff --git a/src/commons/StyledLink.tsx b/src/commons/StyledLink.tsx
index 8343828..68da5c3 100644
--- a/src/commons/StyledLink.tsx
+++ b/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',
},
}));
diff --git a/src/commons/StyledPaper.tsx b/src/commons/StyledPaper.tsx
new file mode 100644
index 0000000..a593891
--- /dev/null
+++ b/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,
+ },
+}));
+
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..a75774a
--- /dev/null
+++ b/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
(undefined);
+
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+ const [mode, setMode] = useState(() => {
+ 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 (
+
+
+
+ {children}
+
+
+ );
+};
+
+export const useThemeContext = () => {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error('useThemeContext must be used within a ThemeProvider');
+ }
+ return context;
+};
diff --git a/src/core/api.js b/src/core/api.js
index 292f2cf..17b4afe 100644
--- a/src/core/api.js
+++ b/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 ;
+ };
+}
+
diff --git a/src/index.css b/src/index.css
index 02d3cde..ecc94a3 100644
--- a/src/index.css
+++ b/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;
- color: rgba(255, 255, 255, 0.85);
+ background-color: var(--bg-primary);
+ 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;
}
diff --git a/src/pages/BuildingPage.tsx b/src/pages/BuildingPage.tsx
index 5a65273..a18bfbf 100644
--- a/src/pages/BuildingPage.tsx
+++ b/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%)',
- border: '1px solid rgba(255, 255, 255, 0.1)',
+ 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: '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 (
-
-
+
+
{unit.icon && 
}
{unit.name}
{unit.canDetect && 
}
-
-
+
+
)
}
-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> = new Map();
@@ -113,23 +143,14 @@ function Building(building: IBuilding, mod: IMod) {
return (
-
+
{building.icon &&
}
{buildingName}
-
-
+
+
{mod.name} ({mod.version})
-
+
@@ -232,7 +253,7 @@ function Building(building: IBuilding, mod: IMod) {
Unit production
{building.units.map(unit =>
- Unit(unit, mod.id, building.race.id)
+ Unit(unit, mod.id, building.race.id, theme)
)}
}
@@ -271,7 +292,7 @@ function Building(building: IBuilding, mod: IMod) {
Hotkey: {building.hotkey}
-
+
)
}
@@ -298,9 +319,10 @@ class BuildingPage extends React.Component {
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 (
-
+
}
@@ -308,7 +330,7 @@ class BuildingPage extends React.Component {
>
Back to race
- {Building(this.state.building, this.state.mod)}
+ {Building(this.state.building, this.state.mod, theme)}
);
} else {
@@ -321,4 +343,4 @@ class BuildingPage extends React.Component {
}
}
-export default withRouter(BuildingPage);
+export default withRouter(withTheme(BuildingPage));
diff --git a/src/pages/ModPage.tsx b/src/pages/ModPage.tsx
index 8fdf927..3b96c43 100644
--- a/src/pages/ModPage.tsx
+++ b/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 {
if (this.state != null && this.state.mod != null) {
document.title = this.state.mod.name + " — ModWiki";
+ const isDark = this.props.theme.palette.mode === 'dark';
return (
@@ -71,12 +79,20 @@ class ModPage extends React.Component {
Back to mods list
-
- {this.state.mod.name} ({this.state.mod.version})
+ {this.state.mod.name}
+
+
+ ({this.state.mod.version})
@@ -87,9 +103,9 @@ class ModPage extends React.Component {
} else {
return (
-
+
Mod not found
-
+
);
}
@@ -98,4 +114,4 @@ class ModPage extends React.Component {
-export default withRouter(ModPage);
\ No newline at end of file
+export default withRouter(withTheme(ModPage));
diff --git a/src/pages/ModsPage.tsx b/src/pages/ModsPage.tsx
index 4eedae5..47fd8e7 100644
--- a/src/pages/ModsPage.tsx
+++ b/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%)',
- border: '1px solid rgba(255, 255, 255, 0.1)',
+ 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: '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: '0 20px 40px rgba(233, 69, 96, 0.2)',
- borderColor: 'rgba(233, 69, 96, 0.3)',
+ boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '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)',
'&::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)',
- borderColor: 'rgba(233, 69, 96, 0.3)',
- transform: 'translateX(4px)',
+ background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
+ borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
+ },
+}));
+
+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 (
-
+
-
+
{modName}
-
-
-
+
-
- {hasBeta && (
-
- )}
-
-
-
- Main versions:
-
-
{sameMods.filter(m => !m.isBeta).map(mod => (
-
+
Version {mod.version}
-
-
+
+
→
-
+
))}
{hasBeta && (
-
+
Beta versions:
-
+
{betaVersion && (
Version {betaVersion.version} (Beta)
-
+
→
-
+
)}
@@ -226,18 +254,17 @@ function Mods({ mods }: ModsProps) {
state={latest?.id}
sx={{
width: '100%',
- color: '#e94560',
- borderColor: 'rgba(233, 69, 96, 0.5)',
+ color: '#FFD700',
+ borderColor: 'rgba(255, 215, 0, 0.5)',
fontWeight: 600,
borderRadius: '10px',
textTransform: 'none',
fontSize: '1rem',
py: 1.5,
'&:hover': {
- borderColor: '#e94560',
- backgroundColor: 'rgba(233, 69, 96, 0.1)',
- transform: 'translateY(-2px)',
- boxShadow: '0 8px 20px rgba(233, 69, 96, 0.2)',
+ borderColor: '#FFD700',
+ backgroundColor: 'rgba(255, 215, 0, 0.1)',
+ boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
},
}}
>
diff --git a/src/pages/RacePageFast.tsx b/src/pages/RacePageFast.tsx
index 48d81d0..c422fd8 100644
--- a/src/pages/RacePageFast.tsx
+++ b/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)',
- border: '1px solid rgba(255, 255, 255, 0.05)',
+ background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)',
+ 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)',
- borderColor: 'rgba(233, 69, 96, 0.3)',
+ 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)',
},
}));
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 (
-
- {unit.icon && }
- {unit.name}
- {unit.canDetect && }
-
- )
+ return (
+
+
+ {unit.icon && }
+ {unit.name}
+ {unit.canDetect && }
+
+
+ )
}
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"/>}
)
}
-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 (
{
+class Units extends React.Component {
constructor(props: any) {
@@ -157,7 +171,8 @@ class Units extends React.Component {
}
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 {
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 ?
- {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))}
{this.state.buildings.buildingsAdvanced.length > 0 &&
-
+
Advanced buildings
- {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))}
}
}
+ expandIcon={}
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' }}}
>
- All units
+ All units
- Infantry
- {this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId))}
+ Infantry
+ {this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
- Tech
+ Tech
- {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))}
- Support
+ Support
- {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))}
- : Loading
+ : Loading
)
} else {
- return Loading...;
+ return Loading...;
}
}
}
+const UnitsWithTheme = withTheme(Units) as React.ComponentType;
+
class RacePageFast extends React.Component {
constructor(props: any) {
@@ -252,9 +275,11 @@ class RacePageFast extends React.Component {
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 (
-
+
}
@@ -267,26 +292,29 @@ class RacePageFast extends React.Component {
{this.state.race.name}
{this.state.mod.name} ({this.state.mod.version})
-
+
);
} else {
return (
-
+
);
@@ -294,4 +322,4 @@ class RacePageFast extends React.Component {
}
}
-export default withRouter(RacePageFast);
\ No newline at end of file
+export default withRouter(withTheme(RacePageFast));
diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx
index 0dbe11c..077b00d 100644
--- a/src/pages/UnitPage.tsx
+++ b/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%)',
- border: '1px solid rgba(255, 255, 255, 0.1)',
+ 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': {
'&: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) ?
{unit.moraleMax}
+{unit.moraleRegeneration}/s
@@ -98,7 +132,7 @@ function Unit(unit: IUnit, mod: IMod) {
const SergeantShort = (props: sergeantProps) => {
return (
-
+
{props.icon && }
{props.name}
{props.canDetect && ![]()
-
+
{unit.icon &&
}
{unit.name}
-
-
+
+
{mod.name} ({mod.version})
-
+
@@ -297,22 +322,15 @@ function Unit(unit: IUnit, mod: IMod) {
}
{unit.sergeants.map(s =>
-
+
+ sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}>
0}/>
-
+
- )}
+ )}
{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) {
Hotkey: {unit.hotkey}
-
+
)
@@ -387,9 +405,10 @@ class UnitPage extends React.Component {
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 (
-
+
}
@@ -397,7 +416,7 @@ class UnitPage extends React.Component {
>
Back to race
- {Unit(this.state.unit, this.state.mod)}
+ {Unit(this.state.unit, this.state.mod, theme)}
);
} else {
@@ -410,4 +429,4 @@ class UnitPage extends React.Component {
}
}
-export default withRouter(UnitPage);
\ No newline at end of file
+export default withRouter(withTheme(UnitPage));
diff --git a/src/themes/theme.ts b/src/themes/theme.ts
new file mode 100644
index 0000000..202411d
--- /dev/null
+++ b/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)',
+ },
+ },
+ },
+ },
+});
+ 
: 
{requirement.requiredTotalPop}
{requirement.mobBonus.mobvalueRequired} in radius {requirement.mobBonus.proximityRequired}
:
- )} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
+ )} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
{this.props.isDefault && (default)}
-