Fix dark mode startup error

Summary:
Changelog: Fixed startup error when loading default theme

The theme defaulted to `auto`, instead of `system`, causing an startup exception. Fixed by adding types and having a more defensive startup check.

Fixes https://github.com/facebook/flipper/issues/2835

Reviewed By: jknoxville

Differential Revision: D30866648

fbshipit-source-id: 83b6d9fc235eaa0a7e959df4276d3f378eed7d1f
This commit is contained in:
Michel Weststrate
2021-09-10 07:01:41 -07:00
committed by Facebook GitHub Bot
parent 80f48b444c
commit f9c8bf8941
5 changed files with 10 additions and 8 deletions

View File

@@ -215,7 +215,7 @@ function init() {
{name: 'loadTheme', fireImmediately: false, throttleMs: 500}, {name: 'loadTheme', fireImmediately: false, throttleMs: 500},
(state) => { (state) => {
const theme = state.settingsState.darkMode; const theme = state.settingsState.darkMode;
let shouldUseDarkMode = remote.nativeTheme.shouldUseDarkColors; let shouldUseDarkMode = false;
if (theme === 'dark') { if (theme === 'dark') {
shouldUseDarkMode = true; shouldUseDarkMode = true;
} else if (theme === 'light') { } else if (theme === 'light') {

View File

@@ -43,7 +43,7 @@ export type Settings = {
openDevMenu: string; openDevMenu: string;
}; };
}; };
darkMode: string; darkMode: 'dark' | 'light' | 'system';
showWelcomeAtStartup: boolean; showWelcomeAtStartup: boolean;
suppressPluginErrors: boolean; suppressPluginErrors: boolean;
}; };
@@ -78,7 +78,7 @@ const initialState: Settings = {
openDevMenu: 'Alt+Shift+D', openDevMenu: 'Alt+Shift+D',
}, },
}, },
darkMode: 'auto', darkMode: 'light',
showWelcomeAtStartup: true, showWelcomeAtStartup: true,
suppressPluginErrors: false, suppressPluginErrors: false,
}; };

View File

@@ -78,9 +78,9 @@
box.textContent = text; box.textContent = text;
} }
// load correct theme // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try { try {
if (JSON.parse(window.process.env.CONFIG).darkMode) { if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
document.getElementById('flipper-theme-import').href="themes/dark.css"; document.getElementById('flipper-theme-import').href="themes/dark.css";
} else { } else {
document.getElementById('flipper-theme-import').href="themes/light.css"; document.getElementById('flipper-theme-import').href="themes/light.css";

View File

@@ -15,9 +15,9 @@
global.electronRequire = window.require; global.electronRequire = window.require;
</script> </script>
<script> <script>
// load correct theme // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try { try {
if (JSON.parse(window.process.env.CONFIG).darkMode) { if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
document.getElementById('flipper-theme-import').href="themes/dark.css"; document.getElementById('flipper-theme-import').href="themes/dark.css";
} else { } else {
document.getElementById('flipper-theme-import').href="themes/light.css"; document.getElementById('flipper-theme-import').href="themes/light.css";

View File

@@ -109,7 +109,9 @@ if (argv['disable-gpu'] || process.env.FLIPPER_DISABLE_GPU === '1') {
} }
process.env.CONFIG = JSON.stringify(config); process.env.CONFIG = JSON.stringify(config);
nativeTheme.themeSource = config.darkMode || 'light'; nativeTheme.themeSource = ['light', 'dark', 'system'].includes(config.darkMode)
? config.darkMode
: 'light';
// possible reference to main app window // possible reference to main app window
let win: BrowserWindow; let win: BrowserWindow;