Skip to content

Commit d45f6db

Browse files
GZTimeWalkerGZTimeWalker
committed
feat: custom theme color for frontend
1 parent 7d2b2bd commit d45f6db

22 files changed

+260
-25
lines changed

‎src/Directory.Packages.props‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<PackageVersion Include="Microsoft.EntityFrameworkCore" Version="8.0.4" />
1414
<PackageVersion Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.4" />
1515
<PackageVersion Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="8.0.2" />
16-
<PackageVersion Include="Npgsql.OpenTelemetry" Version="8.0.2" />
16+
<PackageVersion Include="Npgsql.OpenTelemetry" Version="8.0.3" />
1717
<PackageVersion Include="NPOI" Version="2.7.0" />
1818
<PackageVersion Include="NSwag.AspNetCore" Version="14.0.7" />
1919
<PackageVersion Include="NSwag.MSBuild" Version="14.0.7" />

‎src/GZCTF/ClientApp/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@babel/core": "^7.24.5",
1616
"@emotion/react": "^11.11.4",
1717
"@mantine/carousel": "^7.9.1",
18+
"@mantine/colors-generator": "^7.9.1",
1819
"@mantine/core": "^7.9.1",
1920
"@mantine/dates": "^7.9.1",
2021
"@mantine/dropzone": "^7.9.1",
@@ -27,6 +28,7 @@
2728
"@mdi/js": "^7.4.47",
2829
"@mdi/react": "^1.6.1",
2930
"@microsoft/signalr": "^8.0.0",
31+
"chroma-js": "^2.4.2",
3032
"dayjs": "^1.11.11",
3133
"echarts": "^5.5.0",
3234
"echarts-for-react": "^3.0.2",
@@ -56,6 +58,7 @@
5658
"@kainstar/vite-plugin-i18next-loader": "^1.0.3",
5759
"@nabla/vite-plugin-eslint": "^2.0.4",
5860
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
61+
"@types/chroma-js": "^2.4.4",
5962
"@types/katex": "^0.16.7",
6063
"@types/node": "20.12.11",
6164
"@types/prismjs": "^1.26.4",

‎src/GZCTF/ClientApp/pnpm-lock.yaml‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/GZCTF/ClientApp/prettier.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default {
1313
'^@Components/(.*)$',
1414
'^@Utils/(.*)$',
1515
'^@Api$',
16+
'^@Styles/(.*)$',
1617
'^@(.*).css$',
1718
'^[./]',
1819
],

‎src/GZCTF/ClientApp/src/Api.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,8 @@ export interface GlobalConfig {
255255
slogan?: string;
256256
/** 页脚显示的信息 */
257257
footerInfo?: string | null;
258+
/** 自定义主题颜色 */
259+
customTheme?: string | null;
258260
/** 邮件模版 */
259261
emailTemplate?: string;
260262
}
@@ -1723,6 +1725,8 @@ export interface ClientConfig {
17231725
slogan?: string;
17241726
/** 页脚显示的信息 */
17251727
footerInfo?: string | null;
1728+
/** 自定义主题颜色 */
1729+
customTheme?: string | null;
17261730
/**
17271731
* 容器的默认生命周期，以分钟计
17281732
* @format int32

‎src/GZCTF/ClientApp/src/App.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,25 @@ import { SWRConfig } from 'swr'
1111
import routes from '~react-pages'
1212
import ErrorFallback from '@Components/ErrorFallback'
1313
import { useLanguage } from '@Utils/I18n'
14-
import { CustomTheme } from '@Utils/ThemeOverride'
14+
import { useCustomeTheme } from '@Utils/ThemeOverride'
1515
import { useBanner, localCacheProvider } from '@Utils/useConfig'
1616
import { fetcher } from '@Api'
1717
import '@mantine/carousel/styles.css'
1818
import '@mantine/core/styles.css'
1919
import '@mantine/dates/styles.css'
2020
import '@mantine/dropzone/styles.css'
2121
import '@mantine/notifications/styles.css'
22-
import './App.css'
22+
import './styles/App.css'
2323

2424
export const App: FC = () => {
2525
useBanner()
2626

2727
const { t } = useTranslation()
2828
const { locale } = useLanguage()
29+
const { theme } = useCustomeTheme()
2930

3031
return (
31-
<MantineProvider
32-
defaultColorScheme="dark"
33-
theme={CustomTheme}
34-
stylesTransform={emotionTransform}
35-
>
32+
<MantineProvider defaultColorScheme="dark" theme={theme} stylesTransform={emotionTransform}>
3633
<MantineEmotionProvider>
3734
<ErrorBoundary FallbackComponent={ErrorFallback}>
3835
<Notifications zIndex={5000} />

‎src/GZCTF/ClientApp/src/components/ColorPreview.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { ColorSwatch, Group, GroupProps, MantineColorsTuple, isLightColor } from '@mantine/core'
2+
import chroma from 'chroma-js'
3+
import { FC } from 'react'
4+
import classes from '@Styles/ColorPreview.module.css'
5+
6+
interface ColorsPreviewProps extends GroupProps {
7+
colors: MantineColorsTuple
8+
displayColorsInfo: boolean | undefined
9+
}
10+
11+
const ColorPreview: FC<ColorsPreviewProps> = ({ colors, displayColorsInfo, ...others }) => {
12+
const colorList = colors.map((color) => chroma(color))
13+
14+
const items = colorList.map((color, index) => (
15+
<div key={index} className={classes.item}>
16+
<ColorSwatch
17+
color={color.hex()}
18+
radius={0}
19+
className={classes.swatch}
20+
withShadow={false}
21+
c={isLightColor(color.hex()) ? 'black' : 'white'}
22+
>
23+
{displayColorsInfo && (
24+
<div className={classes.label}>
25+
<span className={classes.hex}>{color.hex()}</span>
26+
</div>
27+
)}
28+
</ColorSwatch>
29+
</div>
30+
))
31+
32+
return (
33+
<Group gap={0} wrap="nowrap" {...others}>
34+
{items}
35+
</Group>
36+
)
37+
}
38+
39+
export default ColorPreview

‎src/GZCTF/ClientApp/src/components/MobileScoreboardItemModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ interface MobileScoreboardItemModalProps extends ModalProps {
3030

3131
const MobileScoreboardItemModal: FC<MobileScoreboardItemModalProps> = (props) => {
3232
const { item, challenges, ...modalProps } = props
33-
const { classes, theme } = useTableStyles()
33+
const { classes } = useTableStyles()
3434

3535
const { t } = useTranslation()
3636

@@ -70,7 +70,7 @@ const MobileScoreboardItemModal: FC<MobileScoreboardItemModalProps> = (props) =>
7070
{...modalProps}
7171
title={
7272
<Group justify="left" gap="md" wrap="nowrap">
73-
<Avatar alt="avatar" src={item?.avatar} size={50} radius="md" color={theme.primaryColor}>
73+
<Avatar alt="avatar" src={item?.avatar} size={50} radius="md">
7474
{item?.name?.slice(0, 1) ?? 'T'}
7575
</Avatar>
7676
<Stack gap={0}>

‎src/GZCTF/ClientApp/src/components/ScoreboardItemModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ interface ScoreboardItemModalProps extends ModalProps {
2929

3030
const ScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
3131
const { item, challenges, bloodBonusMap, ...modalProps } = props
32-
const { classes, theme } = useTableStyles()
32+
const { classes } = useTableStyles()
3333

3434
const { t } = useTranslation()
3535

@@ -69,7 +69,7 @@ const ScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
6969
{...modalProps}
7070
title={
7171
<Group justify="left" gap="md" wrap="nowrap">
72-
<Avatar alt="avatar" src={item?.avatar} size={50} radius="md" color={theme.primaryColor}>
72+
<Avatar alt="avatar" src={item?.avatar} size={50} radius="md">
7373
{item?.name?.slice(0, 1) ?? 'T'}
7474
</Avatar>
7575
<Stack gap={0}>

‎src/GZCTF/ClientApp/src/components/TeamCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const TeamCard: FC<TeamCardProps> = (props) => {
4141
<Group align="stretch" style={{ flexWrap: 'nowrap', alignItems: 'center' }}>
4242
<Stack style={{ flexGrow: 1 }}>
4343
<Group align="stretch" justify="space-between">
44-
<Avatar alt="avatar" color="cyan" size="lg" radius="md" src={team.avatar}>
44+
<Avatar alt="avatar" size="lg" radius="md" src={team.avatar}>
4545
{team.name?.slice(0, 1) ?? 'T'}
4646
</Avatar>
4747

0 commit comments

Comments
 (0)