From 617f8a928c8fef035f01cc76181cabd2df79086f Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 29 Jun 2021 08:38:33 -0700
Subject: [PATCH] Use dark scrollbar and system elements

Summary:
This diff adds OS support for dark mode (at least on Mac), by making sure system elements are styled according to system dark theme.

For some unknown reason, this does apply to all system dialogs, titlebars etc, but not for scrollbars, so they got custom themed.

Differential Revision: D29436058

fbshipit-source-id: bac649b6cd81f0142c607ed567eeb00f41625041
---
 desktop/app/src/init.tsx | 2 ++
 desktop/static/main.ts   | 6 ++++++
 desktop/themes/dark.less | 5 +++++
 3 files changed, 13 insertions(+)

diff --git a/desktop/app/src/init.tsx b/desktop/app/src/init.tsx
index 573010f34..5b5822a82 100644
--- a/desktop/app/src/init.tsx
+++ b/desktop/app/src/init.tsx
@@ -50,6 +50,7 @@ import {CopyOutlined} from '@ant-design/icons';
 import {clipboard} from 'electron/common';
 import {getVersionString} from './utils/versionString';
 import {PersistGate} from 'redux-persist/integration/react';
+import {ipcRenderer} from 'electron';
 
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   // By default Node.JS has its internal certificate storage and doesn't use
@@ -222,6 +223,7 @@ function init() {
       (
         document.getElementById('flipper-theme-import') as HTMLLinkElement
       ).href = `themes/${theme.dark ? 'dark' : 'light'}.css`;
+      ipcRenderer.send('setTheme', theme.dark ? 'dark' : 'light');
     },
   );
 }
diff --git a/desktop/static/main.ts b/desktop/static/main.ts
index d52dc9ae8..736495dd6 100644
--- a/desktop/static/main.ts
+++ b/desktop/static/main.ts
@@ -17,6 +17,7 @@ import {
   Notification,
   globalShortcut,
   session,
+  nativeTheme,
 } from 'electron';
 import os from 'os';
 import path from 'path';
@@ -268,6 +269,11 @@ ipcMain.on('getLaunchTime', (event) => {
   }
 });
 
+ipcMain.on('setTheme', (_e, mode: 'light' | 'dark') => {
+  console.log('Switching to theme ' + mode);
+  nativeTheme.themeSource = mode;
+});
+
 ipcMain.on(
   'sendNotification',
   (e, {payload, pluginNotification, closeAfter}) => {
diff --git a/desktop/themes/dark.less b/desktop/themes/dark.less
index af128f2eb..e0ffeab1f 100644
--- a/desktop/themes/dark.less
+++ b/desktop/themes/dark.less
@@ -46,3 +46,8 @@
 
 // Divider color
 @divider-color: #181818; // white 10%
+
+::-webkit-scrollbar { width: 8px;}
+::-webkit-scrollbar-track-piece { background-color: transparent; }
+::-webkit-scrollbar-thumb { height: 50px; background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;}
+::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.7);}