Vue实现页面主题切换和全屏控制

1、定义两套主题样式

:root{--theme-bg-color: #ffffff;--theme-text-color: #000000;
}:root.dark{--theme-bg-color: #121212;--theme-text-color: #ffffff;
}

2、给挂载标签指定样式

#app {background-color: var(--theme-bg-color);color: var(--theme-text-color);
}

3、安装第三方全屏控制插件

npm install screenfull

4、在组件上使用

import screenfull from 'screenfull';// 当前是否为暗黑主题
const isDark = ref(localStorage.getItem('isDark') === 'true' || false)// 若页面刷新之前已经设定为暗黑主题，应该添加class=dark
if (isDark.value) {document.documentElement.classList.add('dark');
}// 切换主题
const toggleTheme = () => {isDark.value = !isDark.value;localStorage.setItem('isDark', isDark.value);document.documentElement.classList.toggle('dark');
}// 切换全屏状态
const toggleFullscreen = () => {if (screenfull.isEnabled) {if (screenfull.isFullscreen) {screenfull.exit();} else {screenfull.request();}} else {alert('您的浏览器不支持全屏功能');}
}// 监听全屏状态
if (screenfull.isEnabled) {screenfull.on('change', () => {isExpand.value = screenfull.isFullscreen});
}// 为了避免 F11 快捷键与 screenfull 的全屏状态冲突，禁用 F11 快捷键默认行为
const disableF11 = (event) => {if (event.key === 'F11') {event.preventDefault();toggleFullscreen(); // 使用 screenfull 控制全屏}
};
// 监听键盘事件
window.addEventListener('keydown', disableF11);onBeforeUnmount(()=>{// 清除事件监听if (screenfull.isEnabled) {screenfull.off('change');}window.removeEventListener('keydown', disableF11);
})