diff --git a/CHANGELOG.md b/CHANGELOG.md index 530e1c8f1..51cde7413 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ * 支持国产达梦数据库 [Issue #148](https://github.com/alibaba/Chat2DB/issues/147) * 支持自定义OPEN AI API_HOST [Issue #173](https://github.com/alibaba/Chat2DB/issues/173) * 🔥 支持自定义AI接口 +* 支持主题色跟随系统 # 1.0.6 * 修复Oracle数据库字符集问题 [Issue #205](https://github.com/alibaba/Chat2DB/issues/205) [Issue #181](https://github.com/alibaba/Chat2DB/issues/181) [Issue #182](https://github.com/alibaba/Chat2DB/issues/182) diff --git a/ali-dbhub-client/src/assets/theme-follow.png b/ali-dbhub-client/src/assets/theme-follow.png new file mode 100644 index 000000000..012134ddc Binary files /dev/null and b/ali-dbhub-client/src/assets/theme-follow.png differ diff --git a/ali-dbhub-client/src/assets/theme-follow.webp b/ali-dbhub-client/src/assets/theme-follow.webp new file mode 100644 index 000000000..60f6b8c8b Binary files /dev/null and b/ali-dbhub-client/src/assets/theme-follow.webp differ diff --git a/ali-dbhub-client/src/components/AppContainer/index.tsx b/ali-dbhub-client/src/components/AppContainer/index.tsx index b828eb07a..0c2be0d7b 100644 --- a/ali-dbhub-client/src/components/AppContainer/index.tsx +++ b/ali-dbhub-client/src/components/AppContainer/index.tsx @@ -80,9 +80,12 @@ export default memo(function AppContainer({ className, children }) { } function settings() { - const theme = localStorage.getItem('theme') || ThemeType.dark; + let theme = localStorage.getItem('theme') || ThemeType.dark; + if (theme === 'followOs') { + theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default' + } document.documentElement.setAttribute('theme', theme); - localStorage.setItem('theme', theme); + document.documentElement.setAttribute( 'primary-color', localStorage.getItem('primary-color') || 'polar-blue', diff --git a/ali-dbhub-client/src/components/Setting/index.less b/ali-dbhub-client/src/components/Setting/index.less index 811e71273..cd0885ebb 100644 --- a/ali-dbhub-client/src/components/Setting/index.less +++ b/ali-dbhub-client/src/components/Setting/index.less @@ -6,13 +6,20 @@ .backgroundList { display: flex; - margin-bottom: 20px; + margin: 0px 0px 20px -7px; + + .themeItemBox { + display: flex; + flex-direction: column; + align-items: center; + margin: 0px 7px; + } li { - margin-right: 15px; - border-radius: 6px; - overflow: hidden; + margin-bottom: 6px; width: 64px; height: 48px; + overflow: hidden; + border-radius: 6px; background-size: cover; background-repeat: no-repeat; cursor: pointer; diff --git a/ali-dbhub-client/src/components/Setting/index.tsx b/ali-dbhub-client/src/components/Setting/index.tsx index 7432809da..56c448421 100644 --- a/ali-dbhub-client/src/components/Setting/index.tsx +++ b/ali-dbhub-client/src/components/Setting/index.tsx @@ -11,6 +11,7 @@ import miscService from '@/service/misc'; import BrandLogo from '@/components/BrandLogo'; import themeDarkImg from '@/assets/theme-dark.webp'; import themeDefaultImg from '@/assets/theme-default.webp'; +import themeFollowImg from '@/assets/theme-follow.webp'; const { Option } = Select; @@ -59,6 +60,11 @@ const backgroundList = [ name: '亮色', img: themeDefaultImg }, + { + code: 'followOs', + name: '跟随系统', + img: themeFollowImg + }, // { // code: 'eyeshield', // name: '护眼', @@ -113,6 +119,20 @@ export default memo(function Setting({ className, text }) { const [currentMenu, setCurrentMenu] = useState(menusList[0]); useLayoutEffect(() => { + function change(e: any) { + if (e.matches) { + document.documentElement.setAttribute('theme', 'dark'); + colorSchemeListeners.forEach(t => t('dark')); + } else { + document.documentElement.setAttribute('theme', 'default'); + colorSchemeListeners.forEach(t => t('default')); + } + } + const themeMedia = window.matchMedia("(prefers-color-scheme: dark)"); + themeMedia.addListener(change); + return () => { + themeMedia.removeListener(change) + } }, []) const showModal = () => { @@ -281,11 +301,16 @@ export function BaseBody() { const [currentPrimaryColor, setCurrentPrimaryColor] = useState(localStorage.getItem('primary-color')); function changeTheme(item: any) { + let theme = item.code + if (theme === 'followOs') { + theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default' + } + const html = document.documentElement; - html.setAttribute('theme', item.code); + html.setAttribute('theme', theme); localStorage.setItem('theme', item.code); - setCurrentTheme(item.code) - colorSchemeListeners.forEach(t => t(item.code)); + setCurrentTheme(item.code); + colorSchemeListeners.forEach(t => t(theme)); } const changePrimaryColor = (item: any) => { @@ -308,7 +333,10 @@ export function BaseBody() { diff --git a/ali-dbhub-client/src/theme/background/dark.less b/ali-dbhub-client/src/theme/background/dark.less index f855e16c2..c54cd7a88 100644 --- a/ali-dbhub-client/src/theme/background/dark.less +++ b/ali-dbhub-client/src/theme/background/dark.less @@ -1,5 +1,5 @@ // -html[theme='dark'] { +:root[theme='dark'] { // 背景色 --color-bg-400: #43444b; --color-bg-300: #27282e; diff --git a/ali-dbhub-client/src/utils/hooks.ts b/ali-dbhub-client/src/utils/hooks.ts index 0d3c3243f..019d7bf76 100644 --- a/ali-dbhub-client/src/utils/hooks.ts +++ b/ali-dbhub-client/src/utils/hooks.ts @@ -38,9 +38,11 @@ export function useUpdateEffect(fn: Function, arr: any[]) { } export function useTheme() { - const [currentColorScheme, setCurrentColorScheme] = useState( - localStorage.getItem('theme'), - ); + let theme = localStorage.getItem('theme') + if (theme === 'followOs') { + theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default' + } + const [currentColorScheme, setCurrentColorScheme] = useState(theme); useEffect(() => { addColorSchemeListener(setCurrentColorScheme); }, []);