mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-23 15:09:46 +00:00
hexo 微调,添加随机跳转按钮
This commit is contained in:
38
themes/hexo/components/ButtonFloatDarkMode.js
Normal file
38
themes/hexo/components/ButtonFloatDarkMode.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import { siteConfig } from '@/lib/config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { saveDarkModeToLocalStorage } from '@/themes/theme'
|
||||
import CONFIG from '../config'
|
||||
|
||||
/**
|
||||
* 深色模式按钮
|
||||
*/
|
||||
export default function ButtonDarkModeFloat() {
|
||||
const { isDarkMode, updateDarkMode } = useGlobal()
|
||||
|
||||
if (!siteConfig('HEXO_WIDGET_DARK_MODE', null, CONFIG)) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
// 用户手动设置主题
|
||||
const handleChangeDarkMode = () => {
|
||||
const newStatus = !isDarkMode
|
||||
saveDarkModeToLocalStorage(newStatus)
|
||||
updateDarkMode(newStatus)
|
||||
const htmlElement = document.getElementsByTagName('html')[0]
|
||||
htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
|
||||
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleChangeDarkMode}
|
||||
className={
|
||||
'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
|
||||
}>
|
||||
<i
|
||||
id='darkModeButton'
|
||||
className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user