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);
})

4、原生全屏控制API

const fullscreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.webkitRequestFullscreen) { /* Safari */
      document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) { /* IE11 */
      document.documentElement.msRequestFullscreen();
    }
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { /* Safari */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE11 */
      document.msExitFullscreen();
    }
  }
}