DarkMode 模块重命名

themes/Hexo/components/Header.js

@@ -14,7 +14,7 @@ let autoScroll = false
  */
 export default function Header () {
   const [typed, changeType] = useState()
-  const { theme } = useGlobal()
+  const { isDarkMode } = useGlobal()
 
   useEffect(() => {
     scrollTrigger()
@@ -76,7 +76,7 @@ export default function Header () {
   }
 
   const updateTopNav = () => {
-    if (theme !== 'dark') {
+    if (!isDarkMode) {
       const stickyNavElement = document.getElementById('sticky-nav')
       if (window.scrollY < window.innerHeight) {
         stickyNavElement?.classList?.add('dark')

themes/NEXT/components/DarkModeButton.js

@@ -1,18 +1,18 @@
 import { useGlobal } from '@/lib/global'
-import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
+import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme'
 
 const DarkModeButton = () => {
-  const { changeTheme } = useGlobal()
-  const userTheme = loadUserThemeFromCookies()
+  const { updateDarkMode } = useGlobal()
+  const isDarkMode = loadDarkModeFromCookies()
 
   // 用户手动设置主题
   const handleChangeDarkMode = () => {
-    const newTheme = (userTheme === 'light' ? 'dark' : 'light')
-    saveTheme(newTheme)
-    changeTheme(newTheme)
+    const newTheme = (isDarkMode ? 'dark' : 'light')
+    saveDarkModeToCookies(newTheme)
+    updateDarkMode(newTheme)
   }
   return <div className='z-10 duration-200 text-xs cursor-pointer py-1.5 px-1'>
-    <i id='darkModeButton' className={`hover:scale-125 transform duration-200 fas ${userTheme === 'dark' ? 'fa-sun' : 'fa-moon'}`}
+    <i id='darkModeButton' className={`hover:scale-125 transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>
 }

themes/NEXT/components/FloatDarkModeButton.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
+import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme'
 import CONFIG_NEXT from '../config_next'
 
 export default function FloatDarkModeButton () {
@@ -7,16 +7,15 @@ export default function FloatDarkModeButton () {
     return <></>
   }
 
-  const { changeTheme } = useGlobal()
-  const userTheme = loadUserThemeFromCookies()
+  const { isDarkMode, updateDarkMode } = useGlobal()
   // 用户手动设置主题
   const handleChangeDarkMode = () => {
-    const newTheme = userTheme === 'light' ? 'dark' : 'light'
-    saveTheme(newTheme)
-    changeTheme(newTheme)
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
     const htmlElement = document.getElementsByTagName('html')[0]
-    htmlElement.classList?.remove(userTheme)
-    htmlElement.classList?.add(newTheme)
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
   return (
@@ -27,7 +26,7 @@ export default function FloatDarkModeButton () {
     >
       <i
         id="darkModeButton"
-        className={`${userTheme === 'dark' ? 'fa-sun' : 'fa-moon'} fas hover:scale-150 transform duration-200`}
+        className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas hover:scale-150 transform duration-200`}
       />
     </div>
   )

themes/NEXT/components/Header.js

@@ -27,7 +27,7 @@ export default function Header () {
       )
     }
   })
-  const { theme } = useGlobal()
+  const { isDarkMode } = useGlobal()
 
   const autoScrollEnd = () => {
     if (autoScroll) {
@@ -61,7 +61,7 @@ export default function Header () {
   }
 
   const updateTopNav = () => {
-    if (theme !== 'dark') {
+    if (!isDarkMode) {
       const stickyNavElement = document.getElementById('sticky-nav')
       if (window.scrollY < window.innerHeight) {
         stickyNavElement.classList.add('dark')