电脑系统主题模式

系统主题模式

• system 跟随系统
• light 明亮
• dark 暗黑

// frontend/src/views/os/theme/Index.vue
<script>
  setTheme (e) {
    this.currentThemeMode = e.target.value;
    this.$ipc.invoke(ipcApiRoute.setTheme, this.currentThemeMode).then(result => {
      this.currentThemeMode = result;
    })      
  },
  getTheme () {
    this.$ipc.invoke(ipcApiRoute.getTheme).then(result => {
      this.currentThemeMode = result;
    })  
  },
</script> 

// electron/controller/os.js
/**
 * 获取系统主题
 */
getTheme() {
  let theme = 'system';
  if (nativeTheme.shouldUseHighContrastColors) {
    theme = 'light';
  } else if (nativeTheme.shouldUseInvertedColorScheme) {
    theme = 'dark';
  }
  return theme;
}
/**
 * 设置系统主题
 */
setTheme(args) {
  nativeTheme.themeSource = args;
  return args;
}

// Make sure to add code blocks to your code group

完整代码

• github前端代码 (opens new window)
• github主进程代码 (opens new window)
• gitee前端代码 (opens new window)
• gitee主进程代码 (opens new window)