pref:移除黑夜模式

This commit is contained in:
zdl
2025-11-24 15:07:13 +08:00
parent e201f35b18
commit 528e61b961
5 changed files with 36 additions and 171 deletions

View File

@@ -3,7 +3,6 @@
import React, { memo } from 'react';
import { HStack, Spinner } from '@chakra-ui/react';
import ThemeToggleButton from '../ThemeToggleButton';
import LoginButton from '../LoginButton';
import CalendarButton from '../CalendarButton';
import { WatchlistMenu, FollowingEventsMenu } from '../FeatureMenus';
@@ -34,9 +33,6 @@ const NavbarActions = memo(({
}) => {
return (
<HStack spacing={{ base: 2, md: 4 }}>
{/* 主题切换按钮 */}
<ThemeToggleButton />
{/* 显示加载状态 */}
{isLoading ? (
<Spinner size="sm" color="blue.500" />

View File

@@ -1,51 +0,0 @@
// src/components/Navbars/components/ThemeToggleButton.js
// 主题切换按钮组件 - Phase 7 优化:添加导航埋点支持
import React, { memo } from 'react';
import { IconButton, useColorMode } from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons';
import { useNavigationEvents } from '../../../hooks/useNavigationEvents';
/**
* 主题切换按钮组件
* 支持在亮色和暗色主题之间切换,包含导航埋点
*
* 性能优化:
* - 使用 memo 避免父组件重新渲染时的不必要更新
* - 只依赖 colorMode当主题切换时才重新渲染
*
* @param {Object} props
* @param {string} props.size - 按钮大小,默认 'sm'
* @param {string} props.variant - 按钮样式,默认 'ghost'
* @returns {JSX.Element}
*/
const ThemeToggleButton = memo(({ size = 'sm', variant = 'ghost' }) => {
const { colorMode, toggleColorMode } = useColorMode();
const navEvents = useNavigationEvents({ component: 'theme_toggle' });
const handleToggle = () => {
// 追踪主题切换
const fromTheme = colorMode;
const toTheme = colorMode === 'light' ? 'dark' : 'light';
navEvents.trackThemeChanged(fromTheme, toTheme);
// 切换主题
toggleColorMode();
};
return (
<IconButton
aria-label="切换主题"
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={handleToggle}
variant={variant}
size={size}
minW={{ base: '36px', md: '40px' }}
minH={{ base: '36px', md: '40px' }}
/>
);
});
ThemeToggleButton.displayName = 'ThemeToggleButton';
export default ThemeToggleButton;

View File

@@ -1,16 +1,22 @@
/**
* KLineChart 主题配置
* KLineChart 主题配置(仅浅色主题)
*
* 适配 klinecharts@10.0.0-beta1
* 参考: https://github.com/klinecharts/KLineChart/blob/main/docs/en-US/guide/styles.md
*
* ⚠️ 重要说明:
* - 本项目已移除深色模式支持2025-01
* - 应用通过 colorModeManager 强制使用浅色主题
* - 已删除 darkTheme 和 timelineThemeDark 配置
*/
/* eslint-disable @typescript-eslint/no-explicit-any */
// ⚠️ 使用 any 类型绕过 KLineChart 类型定义的限制beta 版本类型不完整)
import type { DeepPartial, Styles } from 'klinecharts';
// import type { DeepPartial, Styles } from 'klinecharts'; // ⚠️ 未使用(保留以便将来扩展)
/**
* 图表主题颜色配置
* 图表主题颜色配置(浅色主题)
* ⚠️ 已移除深色模式相关颜色常量
*/
export const CHART_COLORS = {
// 涨跌颜色(中国市场习惯:红涨绿跌)
@@ -22,20 +28,16 @@ export const CHART_COLORS = {
primary: '#1b3bbb', // Navy 500
secondary: '#728fea', // Navy 300
background: '#ffffff',
backgroundDark: '#1B254B',
// 文本颜色
text: '#333333',
textSecondary: '#888888',
textDark: '#ffffff',
// 网格颜色
grid: '#e0e0e0',
gridDark: '#2d3748',
// 边框颜色
border: '#e0e0e0',
borderDark: '#2d3748',
// 事件标记颜色
eventMarker: '#ff9800',
@@ -152,7 +154,7 @@ export const lightTheme: any = {
},
text: {
show: true,
color: CHART_COLORS.textDark,
color: '#ffffff', // 白色文字(十字线标签背景是深蓝色)
size: 12,
family: 'Helvetica, Arial, sans-serif',
weight: 'normal',
@@ -170,7 +172,7 @@ export const lightTheme: any = {
},
text: {
show: true,
color: CHART_COLORS.textDark,
color: '#ffffff', // 白色文字(十字线标签背景是深蓝色)
size: 12,
family: 'Helvetica, Arial, sans-serif',
weight: 'normal',
@@ -217,80 +219,7 @@ export const lightTheme: any = {
},
};
/**
* 深色主题配置
*/
export const darkTheme: any = {
...lightTheme,
candle: {
...lightTheme.candle,
tooltip: {
...lightTheme.candle?.tooltip,
text: {
...lightTheme.candle?.tooltip?.text,
color: CHART_COLORS.textDark,
},
},
},
indicator: {
...lightTheme.indicator,
tooltip: {
...lightTheme.indicator?.tooltip,
text: {
...lightTheme.indicator?.tooltip?.text,
color: CHART_COLORS.textDark,
},
},
},
xAxis: {
...lightTheme.xAxis,
axisLine: {
show: true,
color: CHART_COLORS.borderDark,
},
tickLine: {
show: true,
length: 3,
color: CHART_COLORS.borderDark,
},
tickText: {
...lightTheme.xAxis?.tickText,
color: CHART_COLORS.textDark,
},
},
yAxis: {
...lightTheme.yAxis,
axisLine: {
show: true,
color: CHART_COLORS.borderDark,
},
tickLine: {
show: true,
length: 3,
color: CHART_COLORS.borderDark,
},
tickText: {
...lightTheme.yAxis?.tickText,
color: CHART_COLORS.textDark,
},
},
grid: {
show: true,
horizontal: {
show: true,
size: 1,
color: CHART_COLORS.gridDark,
style: 'dashed',
},
vertical: {
show: false,
},
},
separator: {
size: 1,
color: CHART_COLORS.borderDark,
},
};
// ❌ 已删除 darkTheme 配置(不再支持深色模式)
/**
* 分时图专用主题配置
@@ -389,43 +318,26 @@ export const timelineTheme: any = {
},
};
// ❌ 已删除 timelineThemeDark 配置(不再支持深色模式)
/**
* 分时图深色主题
* 获取主题配置(固定返回浅色主题
* ⚠️ 已移除深色模式支持
* @deprecated colorMode 参数已废弃,始终返回浅色主题
*/
export const timelineThemeDark: any = {
...timelineTheme,
...darkTheme,
candle: {
...timelineTheme.candle,
tooltip: {
...timelineTheme.candle?.tooltip,
text: {
...timelineTheme.candle?.tooltip?.text,
color: CHART_COLORS.textDark,
},
},
},
grid: {
...timelineTheme.grid,
horizontal: {
...timelineTheme.grid?.horizontal,
color: CHART_COLORS.gridDark,
},
},
export const getTheme = (_colorMode?: 'light' | 'dark'): any => {
// ✅ 始终返回浅色主题
return lightTheme;
};
/**
* 获取主题配置(根据 Chakra UI colorMode
* 获取分时图主题配置(固定返回浅色主题
* ⚠️ 已移除深色模式支持
* @deprecated colorMode 参数已废弃,始终返回浅色主题
*/
export const getTheme = (colorMode: 'light' | 'dark' = 'light'): any => {
return colorMode === 'dark' ? darkTheme : lightTheme;
};
/**
* 获取分时图主题配置
*/
export const getTimelineTheme = (colorMode: 'light' | 'dark' = 'light'): any => {
const baseTheme = colorMode === 'dark' ? timelineThemeDark : timelineTheme;
export const getTimelineTheme = (_colorMode?: 'light' | 'dark'): any => {
// ✅ 始终使用浅色主题
const baseTheme = timelineTheme;
// ✅ 添加成交量指标样式(蓝色渐变柱状图)+ 成交量单位格式化
return {

View File

@@ -7,7 +7,7 @@
import { useEffect, useRef, useState } from 'react';
import { init, dispose, registerIndicator } from 'klinecharts';
import type { Chart } from 'klinecharts';
import { useColorMode } from '@chakra-ui/react';
// import { useColorMode } from '@chakra-ui/react'; // ❌ 已移除深色模式支持
import { getTheme, getTimelineTheme } from '../config/klineTheme';
import { CHART_INIT_OPTIONS } from '../config';
import { logger } from '@utils/logger';
@@ -59,7 +59,8 @@ export const useKLineChart = (
const [isInitialized, setIsInitialized] = useState(false);
const [error, setError] = useState<Error | null>(null);
const { colorMode } = useColorMode();
// ✅ 固定使用浅色主题(已移除 useColorMode
const colorMode = 'light';
// 全局注册自定义均价线指标(只执行一次)
useEffect(() => {

View File

@@ -40,6 +40,13 @@ export function AppProviders({ children }) {
<ReduxProvider store={store}>
<ChakraProvider
theme={theme}
// ✅ 强制使用浅色主题(禁用深色模式)
colorModeManager={{
type: 'cookie',
ssr: false,
get: () => 'light', // 始终返回 'light'
set: () => {}, // 禁止设置(忽略切换操作)
}}
toastOptions={{
defaultOptions: {
position: 'top',