Hosico–主题优化,增加暗黑模式

Hosico–主题优化,增加暗黑模式

0930
Hosico--主题优化,增加暗黑模式 - 我的自留地
Hosico–主题优化,增加暗黑模式
此内容为付费阅读,请付费后查看
5
您当前未登录!建议登陆后购买,可保存购买订单
付费阅读

此方法代码来源于子比主题

php代码:

//主题切换
function zib_get_theme_mode()
{
	$theme_mode = '';
	$theme_mode = tl_get_option('theme_mode');
	$time = current_time('G');
	if ($theme_mode == 'time-auto') {
		if ($time > 19 || $time < 9) {
			$theme_mode = 'dark-theme';
		} else {
			$theme_mode = 'white-theme';
		}
	}
	if (tl_get_option('theme_mode_button', true) && isset($_COOKIE["theme_mode"])) {
		$theme_mode = $_COOKIE["theme_mode"];
	}
	return $theme_mode;
}

后台选项:

{
                    name: '默认主题',
                    desc: '主题最高优先级来自用户选择,也就是浏览器缓存,只有当用户未设置主题的时候此选项才有效',
                    std: 'time-auto',
                    id: 'theme_mode',
                    type: 'select',
                    options: [
                        {
                            label: '日间亮色主题',
                            value: 'white-theme',
                        },
                        {
                            label: '夜间深色主题',
                            value: 'dark-theme',
                        },
                        {
                            label: '早晚8点自动切换',
                            value: 'time-auto',
                        },
                    ],
                },
                {
                    name: '主题切换按钮',
                    desc: '选择显示按钮显示位置',
                    std: 'pc_nav,m_menu',
                    id: 'theme_mode_button',
                    help: '如果关闭此功能,则前端不会显示切换按钮',
                    type: 'multicheck',
                    options: [
                        {
                            label: 'PC端顶部导航',
                            value: 'pc_nav',
                        },
                        {
                            label: '移动端弹出菜单',
                            value: 'm_menu',
                        },
                    ],
                },

js:

添加切换按钮:

<li class="toggle-theme nav-link" data-toggle="tooltip" data-placement="bottom" title="<?php _e('', TD); ?>"><a class="flex flex-row align-items-center" href="javascript:void(0)"><i class="bi bi-brightness-high"></i></a></li>

最后在Header.php中添加body class

zib_get_theme_mode();

请将所有代码放入合适的地方,即可

演示:

图片[1] - Hosico–主题优化,增加暗黑模式 - 我的自留地

© 除特别注明外,本站所有文章均为 我的自留地 原创,转载请注明出处来自 https://mehuts.com/2393.html

THE END
喜欢就支持一下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论