theme movie & dark mode

Author: tangly1024

lib/global.js

@@ -16,7 +16,7 @@ export function GlobalContextProvider(props) {
   const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
   const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言
   const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
-  const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE === 'dark'
+  const defaultDarkMode = NOTION_CONFIG?.APPEARANCE === 'dark' || APPEARANCE === 'dark'
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode) // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
   const router = useRouter()

public/dplayer.htm

@@ -8,8 +8,17 @@
     <!-- 引入 DPlayer 样式文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
     <style>
+        html,
         body {
-            margin: 0px 0px;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #dplayer-container {
+            width: 100%;
+            height: 100%;
         }
     </style>
 </head>
@@ -25,7 +34,7 @@
 
     <script>
         var myParam = decodeURIComponent(location.search.split('n=')[1]);
-        if(!myParam){
+        if (!myParam) {
             alert('无效的视频地址')
         }
         // 创建 DPlayer 实例

themes/movie/index.js

@@ -157,7 +157,7 @@ const LayoutSlug = props => {
 
       // 创建一个新的容器元素
       const videoWrapper = document.createElement('div')
-      videoWrapper.className = 'video-wrapper p-2 bg-gray-100 dark:bg-hexo-black-gray max-w-5xl mx-auto'
+      videoWrapper.className = 'video-wrapper p-2 bg-gray-100 dark:bg-hexo-black-gray max-w-4xl mx-auto'
 
       // 创建一个新的容器元素
       const carouselWrapper = document.createElement('div')

themes/theme.js

@@ -12,7 +12,7 @@ export const { THEMES = [] } = getConfig().publicRuntimeConfig
  * @param {*} themeQuery
  * @returns
  */
-export const getGlobalLayoutByTheme = (themeQuery) => {
+export const getGlobalLayoutByTheme = themeQuery => {
   if (themeQuery !== BLOG.THEME) {
     return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), { ssr: true })
   } else {
@@ -29,22 +29,26 @@ export const getGlobalLayoutByTheme = (themeQuery) => {
 export const getLayoutByTheme = ({ router, theme }) => {
   const themeQuery = getQueryParam(router.asPath, 'theme') || theme
   if (themeQuery !== BLOG.THEME) {
-    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => {
-      setTimeout(() => {
-        checkThemeDOM()
-      }, 500);
+    return dynamic(
+      () =>
+        import(`@/themes/${themeQuery}`).then(m => {
+          setTimeout(() => {
+            checkThemeDOM()
+          }, 500)
 
-      const components = m[getLayoutNameByPath(router.pathname, router.asPath)]
-      if (components) {
-        return components
-      } else {
-        return m.LayoutSlug
-      }
-    }), { ssr: true })
+          const components = m[getLayoutNameByPath(router.pathname, router.asPath)]
+          if (components) {
+            return components
+          } else {
+            return m.LayoutSlug
+          }
+        }),
+      { ssr: true }
+    )
   } else {
     setTimeout(() => {
       checkThemeDOM()
-    }, 100);
+    }, 100)
     const components = ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
     if (components) {
       return components
@@ -59,12 +63,12 @@ export const getLayoutByTheme = ({ router, theme }) => {
  * @param {*} path
  * @returns
  */
-const getLayoutNameByPath = (path) => {
+const getLayoutNameByPath = path => {
   if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
+    return LAYOUT_MAPPINGS[path]
   } else {
     // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
+    return 'LayoutSlug'
   }
 }
 
@@ -90,20 +94,20 @@ const checkThemeDOM = () => {
  * @param updateDarkMode 更改主题ChangeState函数
  * @description 读取cookie中存的用户主题
  */
-export const initDarkMode = (updateDarkMode,defaultDarkMode) => {
+export const initDarkMode = (updateDarkMode, defaultDarkMode) => {
   // 查看用户设备浏览器是否深色模型
   let newDarkMode = isPreferDark()
 
   // 查看localStorage中用户记录的是否深色模式
   const userDarkMode = loadDarkModeFromLocalStorage()
   if (userDarkMode) {
-    newDarkMode = userDarkMode
+    newDarkMode = JSON.parse(userDarkMode)
   }
-    
+
   // 如果站点强制设置默认深色，则优先级改过用
-  //if(defaultDarkMode){
-    //newDarkMode = defaultDarkMode
-  //}
+  if (typeof defaultDarkMode ==='boolean' && defaultDarkMode) {
+    newDarkMode = defaultDarkMode
+  }
 
   // url查询条件中是否深色模式
   const queryMode = getQueryVariable('mode')
@@ -128,7 +132,11 @@ export function isPreferDark() {
     // 系统深色模式或时间是夜间时，强行置为夜间模式
     const date = new Date()
     const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    return prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
+    return (
+      prefersDarkMode ||
+      (BLOG.APPEARANCE_DARK_TIME &&
+        (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
+    )
   }
   return false
 }
@@ -142,9 +150,9 @@ export const loadDarkModeFromLocalStorage = () => {
 }
 
 /**
-   * 保存深色模式
-   * @param newTheme
-   */
-export const saveDarkModeToLocalStorage = (newTheme) => {
+ * 保存深色模式
+ * @param newTheme
+ */
+export const saveDarkModeToLocalStorage = newTheme => {
   localStorage.setItem('darkMode', newTheme)
 }