[ThemeSync] Initial Add

README.md

@@ -29,10 +29,11 @@ OpenAsar is highly stable, but still likely has a few possible minor issues. Cra
 ## Config
 You can configure OpenAsar via `settings.json` (found in your Discord app data / user data), under a `openasar` object. Keep in mind most options are defaults for good reason. The avaliable options are:
 - `quickstart` (bool, default false) - whether to use Quickstart (experimental)
-- `skipStartupUpdateChecks` (bool, default false) - skips startup update checking (Linux-only)
+- `themeSync` (bool, default true) - syncs your modded client's theme with splash theming
 - `autoupdate` (bool, default true) - whether to autoupdate OpenAsar after Discord startup
 - `multiInstance` (bool, default false) - whether to enable multi-instance
 - `ssoeAllowlist` (bool, default true) - whether to use safer custom method of opening external urls (true) or normal Discord's method (false)
+- `skipStartupUpdateChecks` (bool, default false) - skips startup update checking (Linux-only)
 
 An example of a settings.json with OpenAsar config:
 ```json

src/bootstrap.js

@@ -1,4 +1,6 @@
-const { app } = require('electron');
+const { app, BrowserWindow } = require('electron');
+const { readFileSync } = require('fs');
+const { join } = require('path');
 
 log('Bootstrap', 'Forcing Electron props');
 app.name = 'discord'; // Force name as sometimes breaks data path even with "discord" name (also fixes kernel?)
@@ -59,6 +61,24 @@ const startCore = () => {
     updater,
     crashReporterSetup
   });
+
+  const i = setImmediate(() => {
+    log('MainWindowInject', 'Attempting to get main window');
+
+    if (!global.mainWindowId) return;
+
+    log('MainWindowInject', 'Success, adding dom-ready handler');
+
+    clearInterval(i);
+
+    const bw = BrowserWindow.fromId(global.mainWindowId);
+
+    bw.webContents.on('dom-ready', () => {
+      log('MainWindowInject', 'dom-ready triggered, injecting JS');
+
+      bw.webContents.executeJavaScript(readFileSync(join(__dirname, 'mainWindowInject.js'), 'utf8'));
+    });
+  });
 };
 
 const startUpdate = () => {

src/mainWindowInject.js

@@ -0,0 +1,14 @@
+const update = async () => {
+  const getVar = (name, el = document.body) => el && (getComputedStyle(el).getPropertyValue(name) || getVar(name, el.parentElement)).trim();
+  const vars = [ '--background-primary', '--background-secondary', '--brand-experiment', '--header-primary', '--text-muted' ];
+
+  let cached = await DiscordNative.userDataCache.getCached() || {};
+
+  const value = `.theme-dark {${vars.reduce((acc, x) => acc += `${x}: ${getVar(x)}; `, '')}}`;
+
+  cached['openasarSplashCSS'] = value;
+
+  DiscordNative.userDataCache.cacheUserData(JSON.stringify(cached));
+};
+
+setInterval(update, 5000);

src/splash/index.html

@@ -8,6 +8,14 @@
 <div id="debug"></div>
 
 <style>
+  :root {
+    --background-primary: #282b30;
+    --background-secondary: rgba(255, 255, 255, 0.1);
+    --brand-experiment: #5865F2;
+    --header-primary: #fff;
+    --text-muted: #72767d;
+  }
+
   @font-face {
     font-family: Whitney;
     font-weight: 400;
@@ -24,7 +32,7 @@
     width: 100%;
     height: 100%;
 
-    background: #282b30;
+    background: var(--background-primary);
 
     display: flex;
     flex-direction: column;
@@ -50,7 +58,7 @@
     font-size: 7vw;
     text-align: center;
 
-    color: #fff;
+    color: var(--header-primary);
     font-weight: 400;
     font-style: italic;
     font-size: 16px;
@@ -74,11 +82,11 @@
 
   #bar-container {
     position: absolute;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--background-secondary);
   }
 
   #bar-fill {
-    background-color: #737f8d;
+    background-color: var(--brand-experiment);
     width: 0;
 
     transform: translate(0%, -50%);
@@ -92,7 +100,7 @@
 
     text-align: right;
     font-size: 10px;
-    color: #72767d;
+    color: var(--text-muted);
     white-space: pre;
   }
 </style>
@@ -122,4 +130,12 @@
   });
 
   document.querySelector('#debug').textContent = DiscordSplash.getDebugInfo();
+
+  DiscordSplash.getCSS((css) => {
+    document.body.classList.add('theme-dark'); // Theme compat
+
+    const cssInject = document.createElement('style');
+    cssInject.appendChild(document.createTextNode(css));
+    document.body.appendChild(cssInject);
+  });
 </script>

src/splash/preload.js

@@ -2,6 +2,8 @@ const { app, contextBridge, ipcRenderer } = require('electron');
 
 const { saferShellOpenExternal } = require('../utils/securityUtils');
 
+const urlParams = new URLSearchParams(window.location.search);
+
 
 contextBridge.exposeInMainWorld('DiscordSplash', {
   signalReady: () => {
@@ -20,9 +22,11 @@ contextBridge.exposeInMainWorld('DiscordSplash', {
   getDebugInfo: () => {
     const buildInfo = require('../utils/buildInfo');
 
-    const urlParams = new URLSearchParams(window.location.search);
-
     return `${buildInfo.releaseChannel} ${buildInfo.version}
     OpenAsar ${urlParams.get('oaVersion')}`;
-  }
+  },
+
+  getCSS: callback => urlParams.get('oaThemeSync') !== 'false' ? ipcRenderer.on('DISCORD_GET_CSS', (_, value) => {
+    callback(value);
+  }) : {}
 });

src/splash/splashScreen.js

@@ -487,7 +487,13 @@ function launchSplashWindow(startMinimized) {
     pathname: _path.default.join(__dirname, 'index.html')
   });
 
-  splashWindow.loadURL(splashUrl + '?oaVersion=' + global.oaVersion);
+  try {
+    webContentsSend(splashWindow, 'GET_CSS', JSON.parse(_fs.default.readFileSync(_path.default.join(paths.getUserData(), 'userDataCache.json'), 'utf8')).openasarSplashCSS);
+  } catch (e) {
+    log('Splash', 'Failed to inject splash CSS');
+  }
+
+  splashWindow.loadURL(splashUrl + '?oaVersion=' + global.oaVersion + '&oaThemeSync=' + oaConfig.themeSync);
 
   log('Splash', `Loading window (with url ${splashUrl})`);
 }