diff --git a/packages/app-desktop/ElectronAppWrapper.ts b/packages/app-desktop/ElectronAppWrapper.ts
index 9a76cab9e9..e4f8937826 100644
--- a/packages/app-desktop/ElectronAppWrapper.ts
+++ b/packages/app-desktop/ElectronAppWrapper.ts
@@ -6,7 +6,7 @@ const shim: typeof ShimType = require('@joplin/lib/shim').default;
 import { isCallbackUrl } from '@joplin/lib/callbackUrlUtils';
 import { FileLocker } from '@joplin/utils/fs';
 import { IpcMessageHandler, IpcServer, Message, newHttpError, sendMessage, SendMessageOptions, startServer, stopServer } from '@joplin/utils/ipc';
-import { BrowserWindow, Tray, WebContents, screen, App } from 'electron';
+import { BrowserWindow, Tray, WebContents, screen, App, nativeTheme } from 'electron';
 import bridge from './bridge';
 const url = require('url');
 const path = require('path');
@@ -215,7 +215,10 @@ export default class ElectronAppWrapper {
 			height: windowState.height,
 			minWidth: 100,
 			minHeight: 100,
-			backgroundColor: '#fff', // required to enable sub pixel rendering, can't be in css
+			// A backgroundColor is needed to enable sub-pixel rendering.
+			// Based on https://www.electronjs.org/docs/latest/faq#the-font-looks-blurry-what-is-this-and-what-can-i-do,
+			// this needs to be a non-transparent color:
+			backgroundColor: nativeTheme.shouldUseDarkColors ? '#333' : '#fff',
 			webPreferences: {
 				nodeIntegration: true,
 				contextIsolation: false,