d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-02 15:10:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

深色额模式逻辑

Browse Source
This commit is contained in:
tangly1024
2024-03-17 00:21:11 +08:00
parent e74dc2b637
commit f009bd6f9c
3 changed files with 13 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/global.js
View File

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

50
public/videos/dplayer.html
View File

@@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DPlayer Video Player</title>
<!-- 引入 DPlayer 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<style>
body {
margin: 0px 0px;
}
</style>
</head>
<body>
<!-- 创建一个容器用于放置视频播放器 -->
<div id="dplayer-container"></div>
<!-- 引入 Hls.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- 引入 DPlayer JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script>
var myParam = location.search.split('n=')[1]
if(!myParam){
alert('无效的视频地址')
}
// 创建 DPlayer 实例
var dp = new DPlayer({
// 定义容器
container: document.getElementById('dplayer-container'),
// 视频源地址
video: {
url: myParam
// 如果有多个清晰度，可以在这里添加更多的清晰度选项
// quality: [
// { name: 'HD', url: 'https://example.com/your-video-hd.mp4', type: 'normal' },
// { name: 'SD', url: 'https://example.com/your-video-sd.mp4', type: 'normal' }
// ],
},
// 视频封面图片
poster: 'https://example.com/your-video-poster.jpg',
});
</script>
</body>
</html>

15
themes/theme.js
View File

@@ -90,14 +90,19 @@ const checkThemeDOM = () => {
* @param updateDarkMode 更改主题ChangeState函数 * @param updateDarkMode 更改主题ChangeState函数
* @description 读取cookie中存的用户主题 * @description 读取cookie中存的用户主题
*/ */
export const initDarkMode = (updateDarkMode) => { export const initDarkMode = (updateDarkMode,defaultDarkMode) => {
// 查看用户设备浏览器是否深色模型 // 查看用户设备浏览器是否深色模型
let newDarkMode = isPreferDark() let newDarkMode = isPreferDark()
// 查看cookie中是否用户强制设置深色模式 // 查看localStorage中用户记录的是否深色模式
const cookieDarkMode = loadDarkModeFromLocalStorage() const userDarkMode = loadDarkModeFromLocalStorage()
if (cookieDarkMode) { if (userDarkMode) {
newDarkMode = JSON.parse(cookieDarkMode) newDarkMode = userDarkMode
}
// 如果站点强制设置默认深色，则优先级改过用
if(defaultDarkMode){
newDarkMode = defaultDarkMode
} }
// url查询条件中是否深色模式 // url查询条件中是否深色模式