whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Add theme switching to Navbar

Browse Source 
- Added a new theme switching functionality to the Navbar.
This commit is contained in:
kangfenmao 2024-09-06 18:03:06 +08:00
parent b2b79f12a2
commit 37b0a175f7
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/renderer/src/pages/home/Navbar.tsx
View File

@ -10,6 +10,7 @@ import { useSettings } from '@renderer/hooks/useSettings'
import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore' import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
import { getDefaultTopic } from '@renderer/services/assistant' import { getDefaultTopic } from '@renderer/services/assistant'
import { Assistant, Topic } from '@renderer/types' import { Assistant, Topic } from '@renderer/types'
import { Switch } from 'antd'
import { FC, useCallback } from 'react' import { FC, useCallback } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import styled from 'styled-components' import styled from 'styled-components'
@ -97,13 +98,13 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
<SelectModelButton assistant={assistant} /> <SelectModelButton assistant={assistant} />
</HStack> </HStack>
<HStack alignItems="center"> <HStack alignItems="center">
<NewButton onClick={toggleTheme} style={{ marginRight: 3 }}> <ThemeSwitch
{theme === 'dark' ? ( checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
<i className="iconfont icon-theme icon-theme-light" /> unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
) : ( checked={theme === 'dark'}
<i className="iconfont icon-a-darkmode" /> onChange={toggleTheme}
)} style={{ opacity: theme === 'dark' ? 0.6 : 1 }}
</NewButton> />
{topicPosition === 'right' && ( {topicPosition === 'right' && (
<NewButton onClick={toggleShowTopics}> <NewButton onClick={toggleShowTopics}>
<i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} /> <i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
@ -153,4 +154,12 @@ const TitleText = styled.span`
font-weight: 500; font-weight: 500;
` `
const ThemeSwitch = styled(Switch)`
-webkit-app-region: no-drag;
margin-right: 10px;
.icon-theme {
font-size: 14px;
}
`
export default HeaderNavbar export default HeaderNavbar