电子：试图设置“ nativeTheme.themeSource”，但未定义“ nativeTheme”

问题描述

我无法设置电子应用的 themeSource 。平台是Windows 8.1。

  const electronic = require（’electron’）; 
 const app = electronic.app; 
 if（app）app.on（'ready'，function（）{
 nativeTheme = electro.nativeTheme; 
 nativeTheme.themeSource ='dark'; 
}）; 
  

这会在模态弹出式警报中显示错误，提示 nativeTheme 未定义。

我肯定做错了，但是对于我自己的一生，我看不到。

我在Electron中所做的所有其他事情都像魅力。 / p>

这是我的整个app.js：

  //服务器端jquery 
 const jsdom = require（'jsdom'）; 
 const jquery = require（‘jquery’）; 
 const {JSDOM} = jsdom; 
 const dom = new JSDOM（’<！DOCTYPE html>’）; 
 const $ = jquery（dom.window）; 
 global.jq = $; 
 //用于启动网络应用程序
 const request = require（’request’）; 
 //电子配置资料
 var backgroundColor =‘＃1A1A1A’; 
 var width = 800，height = 600; 
 //获取电子
 const electronic = require（‘electron’）; 
 //主电子应用程序
 const app = electro.app; 
 //标志：直到两帆&电子报告就绪
 var electronicIsReady = false; 
 var sailsIsReady = false; 
 var gruntIsReady = false; 
 //阻止重复发射（边缘偶然性）
 var windowIsLaunching = false; 
 var splashIsUp = false; 
 var splashResponse ='pong'; 
 //电子窗口
 var mainWindow = null; 
 var splashWindow = null; 
 //所有预检检查通过后延迟
 var windowCreationDelay = 0; 
 //航行应用程序地址
 const appAddress =‘http://127.0.0.1’； 
 const appPort = 1337; 
 
 const BrowserWindow = electro.BrowserWindow; 
 if（app）app.on（就绪，tryLaunchingForElectron）； 
 else electroIsReady = true; 
 
函数tryLaunchingForSails（）{
 sailsIsReady = true; 
 try {
 //通过提前请求内容
 request（`$ {appAddress}：$ {appPort}`，（error，response，body）=> { / * nada * /}）； 
 if（app&& electronicIsReady&&&&&&&& gruntIsReady）createWindow（）; 
} 
 catch（e）{console.error（e）; } 
} 
函数tryLaunchingForElectron（）{
 //尝试阻止应用程序的多个实例运行
 app.requestSingleInstanceLock（）; 
 electronicIsReady = true; 
 if（！splashIsUp）{
 splashIsUp = true; 
 //显示初始屏幕
 splashWindow = new BrowserWindow（{
 width：width，height：height，
 transparent：true，frame：false，alwaysOnTop：true，
 focusable：false，fullscreenable：false，
 webPreferences：{nodeIntegration：true} 
}）； 
 splashWindow.loadURL（`file：// $ {__dirname} / splash.html`）; 
} 
 //如果sails也准备就绪，则进入UI阶段
 if（app&& sailsIsReady&&& gruntIsReady）createWindow（）; 
} 
 
函数createWindow（）{
 if（windowIsLaunching === true）返回-1; 
 windowIsLaunching = true; 
 //可选：腾出时间使它们完全融合
 setTimeout（function（）{
 try {
 //告诉启动页面关闭
 splashResponse = 'close'; 
 //创建主窗口
 mainWindow = new BrowserWindow（{show：false，width：width，height：height，
 backgroundColor：backgroundColor 
}）; 
 //隐藏可用的菜单栏
 mainWindow.setMenuBarVisibility（false）; 
 //最大化窗口
 mainWindow.maximize（）; 
 //置于最前面
 mainWindow.focus（）; 
 //启航应用程序
 mainWindow.loadURL（`$ {appAddress}：$ {appPort} /`）; 
 //显示javascript& DOM控制台
 mainWindow.webContents.openDevTools（）; 
 //仅在准备渲染自身时显示浏览器
 mainWindow.once（'ready-to-show'，function（ ）{
 //避免飞溅
 splashWindow.setAlwaysOnTop（fal se）; 
 //显示主窗口
 mainWindow.setAlwaysOnTop（true）; 
 mainWindow.show（）; 
 mainWindow.setAlwaysOnTop（false）; 
 app.focus（）; 
}）； 
 //设置关闭函数
 mainWindow.on（ closed，function（）{
 mainWindow = null; 
}）; 
} 
 catch（e）{console.error（e）; } 
}，windowCreationDelay）; 
} 
 
 // //在需要隐藏&时告诉启动窗口关闭
 if（app）app.on（'ready'，function（）{
 var ipcMain = electro.ipcMain; 
 ipcMain.on（'splashPing'，（event，arg）= > {
 try {
 event.sender.send（'splashPing'，splashResponse）; 
} catch（e）{console.log（e）;} 
 if（ splashResponse ==='close'）{
 // splashWindow = null; 
 ipcMain.removeAllListeners（'splashPing'）; 
} 
 // console.log（`$ { arg} || $$（splashResponse}`）; 
}）; 
}）; 
 
 //关闭所有窗口后退出
 if（app）app.on（'window-all-closed'，function（）{
 if（process.platform！ =='darwin'）{
 sails.lower（function（err）{
 if（err）{
 console.log（err）; 
 app.exit（1） ; 
} else 
 app.quit（）; 
 setTimeout（（）=> {app.quit（）;}，5000）; 
}）; 
} 
}）； 
 
 //可能是移动设备
 if（app）app.on（'activate'，function（）{
 if（mainWindow === null）{
 createWindow（）; 
} 
}）
 
 if（app）app.on（'ready'，function（）{
 nativeTheme = electronic.nativeTheme; 
 nativeTheme.themeSource ='dark'; 
}）; 
 
 //帆想要这个
 process.chdir（__ dirname）; 
 
 //进口帆rc 
 var sails; 
 var rc; 
 try {
 sails = require（’sails’）; 
 sails.on（'hook：grunt：done'，（）=> {
 gruntIsReady = true; 
 tryLaunchingForSails（）; 
}）; 
 rc = require（‘sails / accessible / rc’）; 
} catch（err）{
 console.error（err）; 
} 
 
 //启动服务器
 try {
 sails.lift（rc（’sails’），tryLaunchingForSails）; 
} 
 catch（e）{console.log（e）; } 
 
  

解决方案

  nativeTheme = electronic.nativeTheme; 
  

这是问题所在。您需要这样做：

  const nativeTheme = electronic.nativeTheme; 
  

尽管在这种情况下，不需要额外的变量-只需执行 electron .nativeTheme.themeSource ='dark'; 。

我强烈建议您使用Typescript-它会告诉您

编辑：我确定在注释中提到了此问题，但似乎已被删除：您还需要确保使用的是Electron 7.0.0或更高版本- nativeTheme 在此之前不可用。

I'm unable to set the themeSource of my electron app. Platform is Windows 8.1.

const electron = require('electron');
const app = electron.app;
if (app) app.on('ready', function() {
  nativeTheme = electron.nativeTheme;
  nativeTheme.themeSource = 'dark';
});

This produces an error in a modal pop-up alert saying nativeTheme is undefined.

I'm definitely doing something wrong, but for the life of me I can't see it.

Everything else I'm doing in Electron works like a charm.

Here's my entire app.js:

// server-side jquery
const jsdom = require('jsdom');
const jquery = require('jquery');
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html>');
const $ = jquery(dom.window);
global.jq = $;
// for priming the webapp
const request = require('request');
// electron config stuff
var backgroundColor = '#1A1A1A';
var width = 800, height = 600;
// get electron
const electron = require('electron');
// prime electron app
const app = electron.app;
// flags: don't enter GUI launch until both sails & electron report ready
var electronIsReady = false;
var sailsIsReady = false;
var gruntIsReady = false;
// block repeat launches (edge contingency)
var windowIsLaunching = false;
var splashIsUp = false;
var splashResponse = 'pong';
// electron window(s)
var mainWindow = null;
var splashWindow = null;
// delay after all preflight checks pass
var windowCreationDelay = 0;
// sails app address
const appAddress = 'http://127.0.0.1';
const appPort = 1337;

const BrowserWindow = electron.BrowserWindow;
if (app) app.on('ready', tryLaunchingForElectron);
else electronIsReady = true;

function tryLaunchingForSails() {
  sailsIsReady = true;
  try {
    // "prime" the webapp by requesting content early
    request(`${appAddress}:${appPort}`, (error,response,body) => {/*nada*/});
    if (app && electronIsReady && gruntIsReady) createWindow();
  }
  catch (e) { console.error(e); }
}
function tryLaunchingForElectron() {
  // try to prevent multiple instances of the app running
  app.requestSingleInstanceLock();
  electronIsReady = true;
  if (!splashIsUp) {
    splashIsUp = true;
    // show splash screen
    splashWindow = new BrowserWindow({
      width: width, height: height,
      transparent: true, frame: false, alwaysOnTop: true,
      focusable: false, fullscreenable: false,
      webPreferences: { nodeIntegration: true }
    });
    splashWindow.loadURL(`file://${__dirname}/splash.html`);
  }
  // enter UI phase if sails is also ready
  if (app && sailsIsReady && gruntIsReady) createWindow();
}

function createWindow() {
  if (windowIsLaunching === true) return -1;
  windowIsLaunching = true;
  // optional: give sails time to get it fully together
  setTimeout(function() {
    try {
      // tell the splash page to close
      splashResponse = 'close';
      // create main window
      mainWindow = new BrowserWindow({show: false, width: width, height: height,
        backgroundColor: backgroundColor
      });
      // hide menu bar where available
      mainWindow.setMenuBarVisibility(false);
      // maximize the window
      mainWindow.maximize();
      // bring to the front
      mainWindow.focus();
      // go to the sails app
      mainWindow.loadURL(`${appAddress}:${appPort}/`);
      // show javascript & DOM consoles
      mainWindow.webContents.openDevTools();
      // show browser only when it's ready to render itself
      mainWindow.once('ready-to-show', function() {
        // get the splash out of the way
        splashWindow.setAlwaysOnTop(false);
        // show the main window
        mainWindow.setAlwaysOnTop(true);
        mainWindow.show();
        mainWindow.setAlwaysOnTop(false);
        app.focus();
      });
      // setup close function
      mainWindow.on('closed', function() {
        mainWindow = null;
      });
    }
    catch (e) { console.error(e); }
  }, windowCreationDelay);
}

// tell the splash window when it's time to hide & close
if (app) app.on('ready', function() {
  var ipcMain = electron.ipcMain;
  ipcMain.on('splashPing', (event, arg) => {
    try {
      event.sender.send('splashPing', splashResponse);
    } catch (e) { console.log(e); }
    if (splashResponse === 'close') {
      //splashWindow = null;
      ipcMain.removeAllListeners('splashPing');
    }
    // console.log(`${arg}||${splashResponse}`);
  });
});

// quit when all windows are closed
if (app) app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    sails.lower(function (err) {
      if (err) {
        console.log(err);
        app.exit(1);
      } else
        app.quit();
      setTimeout(()=>{app.quit();},5000);
    });
  }
});

// probably for mobile
if (app) app.on('activate', function() {
  if (mainWindow === null) {
    createWindow();
  }
})

if (app) app.on('ready', function() {
  nativeTheme = electron.nativeTheme;
  nativeTheme.themeSource = 'dark';
});

// sails wants this
process.chdir(__dirname);

// import sails & rc
var sails;
var rc;
try {
    sails = require('sails');
  sails.on('hook:grunt:done', () => {
    gruntIsReady = true;
    tryLaunchingForSails();
  });
    rc = require('sails/accessible/rc');
} catch (err) {
    console.error(err);
}

// Start server
try {
  sails.lift(rc('sails'), tryLaunchingForSails );
}
catch (e) { console.log(e); }

解决方案

nativeTheme = electron.nativeTheme;

This is the problem. You need to do:

const nativeTheme = electron.nativeTheme;

Although in this case there's no need for the extra variable - just do electron.nativeTheme.themeSource = 'dark';.

I strongly suggest you use Typescript - it would tell you this:

Edit: I'm sure I mentioned this in the comments but it seems to have been removed somehow: You also need to make sure you are using Electron 7.0.0 or greater - nativeTheme was not available before that.

这篇关于电子：试图设置“ nativeTheme.themeSource”，但未定义“ nativeTheme”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！