remove darkMode feature flag. make desktop startup always correct (ke…

…ybase#20262)
SaltineChips · Oct 10, 2019 · 5ff5254 · 5ff5254
1 parent 326bad9
commit 5ff5254
Show file tree

Hide file tree

Showing 15 changed files with 102 additions and 72 deletions.
diff --git a/shared/__mocks__/feature-flags.tsx b/shared/__mocks__/feature-flags.tsx
@@ -9,7 +9,6 @@ const ff: FeatureFlags = {
   airdrop: true,
   chatIndexProfilingEnabled: false,
   conflictResolution: false,
-  darkMode: false,
   dbCleanEnabled: false,
   fastAccountSwitch: true,
   foldersInProfileTab: true,

diff --git a/shared/desktop/app/main-window.desktop.tsx b/shared/desktop/app/main-window.desktop.tsx
@@ -11,7 +11,7 @@ import logger from '../../logger'
 import {resolveRootAsURL} from './resolve-root.desktop'
 import debounce from 'lodash/debounce'
 
-const htmlFile = resolveRootAsURL('dist', `main${__DEV__ ? '.dev' : ''}.html`)
+let htmlFile = resolveRootAsURL('dist', `main${__DEV__ ? '.dev' : ''}.html`)
 
 const setupDefaultSession = () => {
   const ds = Electron.session.defaultSession
@@ -106,6 +106,8 @@ export const showDockIcon = () => changeDock(true)
 export const hideDockIcon = () => changeDock(false)
 
 let useNativeFrame = defaultUseNativeFrame
+let isDarkMode = false
+let darkModePreference = undefined
 
 /**
  * loads data that we normally save from configGuiSetValue. At this point the service might not exist so we must read it directly
@@ -125,6 +127,24 @@ const loadWindowState = () => {
       useNativeFrame = guiConfig.useNativeFrame
     }
 
+    if (guiConfig.ui) {
+      const {darkMode} = guiConfig.ui
+      switch (darkMode) {
+        case 'system':
+          darkModePreference = darkMode
+          isDarkMode = isDarwin && Electron.systemPreferences.isDarkMode()
+          break
+        case 'alwaysDark':
+          darkModePreference = darkMode
+          isDarkMode = true
+          break
+        case 'alwaysLight':
+          darkModePreference = darkMode
+          isDarkMode = false
+          break
+      }
+    }
+
     const obj = JSON.parse(guiConfig.windowState)
     windowState.dockHidden = obj.dockHidden || windowState.dockHidden
     windowState.height = obj.height || windowState.height
@@ -241,7 +261,10 @@ export default () => {
   setupDefaultSession()
   loadWindowState()
 
+  // pass to main window
+  htmlFile = htmlFile + `?darkModePreference=${darkModePreference || ''}`
   const win = new Electron.BrowserWindow({
+    backgroundColor: isDarkMode ? '#191919' : '#ffffff',
     frame: useNativeFrame,
     height: windowState.height,
     minHeight: 600,

diff --git a/shared/desktop/renderer/main2.desktop.tsx b/shared/desktop/renderer/main2.desktop.tsx
@@ -15,11 +15,25 @@ import {disable as disableDragDrop} from '../../util/drag-drop'
 import flags from '../../util/feature-flags'
 import {dumpLogs} from '../../actions/platform-specific/index.desktop'
 import {initDesktopStyles} from '../../styles/index.desktop'
+import {_setDarkModePreference} from '../../styles/dark-mode'
 import {isDarwin} from '../../constants/platform'
 import {useSelector} from '../../util/container'
 import {isDarkMode} from '../../constants/config'
 import {TypedActions} from '../../actions/typed-actions-gen'
 
+// node side plumbs through initial pref so we avoid flashes
+const darkModeFromNode = window.location.search.match(/darkModePreference=(alwaysLight|alwaysDark|system)/)
+
+if (darkModeFromNode) {
+  const dm = darkModeFromNode[1]
+  switch (dm) {
+    case 'alwaysLight':
+    case 'alwaysDark':
+    case 'system':
+      _setDarkModePreference(dm)
+  }
+}
+
 // Top level HMR accept
 if (module.hot) {
   module.hot.accept()
@@ -104,8 +118,10 @@ const DarkCSSInjector = () => {
     // inject it in body so modals get darkMode also
     if (isDark) {
       document.body.classList.add('darkMode')
+      document.body.classList.remove('lightMode')
     } else {
       document.body.classList.remove('darkMode')
+      document.body.classList.add('lightMode')
     }
   }, [isDark])
   return null

diff --git a/shared/desktop/renderer/style.css b/shared/desktop/renderer/style.css
@@ -398,6 +398,9 @@ body {
   opacity: 1;
 }
 
+.lightMode {
+  background-color: #ffffff;
+}
 .darkMode {
   background-color: #191919;
 }

diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx
@@ -90,7 +90,7 @@ class MenubarRender extends React.Component<Props, State> {
   _renderLoggedOut() {
     return (
       <Kb.Box
-        className={this.props.darkMode ? 'darkMode' : ''}
+        className={this.props.darkMode ? 'darkMode' : 'lightMode'}
         key={this.props.darkMode ? 'darkMode' : 'light'}
         style={styles.widgetContainer}
       >
@@ -160,7 +160,7 @@ class MenubarRender extends React.Component<Props, State> {
     return (
       <Kb.Box
         style={styles.widgetContainer}
-        className={this.props.darkMode ? 'darkMode' : ''}
+        className={this.props.darkMode ? 'darkMode' : 'lightMode'}
         key={this.props.darkMode ? 'darkMode' : 'light'}
       >
         {isDarwin && <style>{_realCSS}</style>}
@@ -301,7 +301,7 @@ class MenubarRender extends React.Component<Props, State> {
     return (
       <Kb.Box
         style={styles.widgetContainer}
-        className={this.props.darkMode ? 'darkMode' : ''}
+        className={this.props.darkMode ? 'darkMode' : 'lightMode'}
         key={this.props.darkMode ? 'darkMode' : 'light'}
       >
         {isDarwin && <style>{_realCSS}</style>}

diff --git a/shared/pinentry/index.desktop.tsx b/shared/pinentry/index.desktop.tsx
@@ -82,7 +82,7 @@ class Pinentry extends React.Component<Props, State> {
     return (
       <Kb.Box
         style={styles.container}
-        className={this.props.darkMode ? 'darkMode' : ''}
+        className={this.props.darkMode ? 'darkMode' : 'lightMode'}
         key={this.props.darkMode ? 'darkMode' : 'light'}
       >
         <Kb.Header icon={false} title="" onClose={this.props.onCancel} windowDragging={true} />

diff --git a/shared/settings/display/index.tsx b/shared/settings/display/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import * as Kb from '../../common-adapters'
 import * as Styles from '../../styles'
-import flags from '../../util/feature-flags'
 import {DarkModePreference, isDarkModeSystemSupported} from '../../styles/dark-mode'
 
 type Props = {
@@ -13,30 +12,28 @@ type Props = {
 const Display = (props: Props) => (
   <Kb.ScrollView style={styles.scrollview}>
     <Kb.Box style={styles.container}>
-      {flags.darkMode && (
-        <Kb.Box2 direction="vertical" fullWidth={true}>
-          <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny">
-            <Kb.Text type="Header">Appearance</Kb.Text>
-            {isDarkModeSystemSupported() && (
-              <Kb.RadioButton
-                label="Respect system settings"
-                selected={props.darkModePreference === 'system' || props.darkModePreference === undefined}
-                onSelect={() => props.onSetDarkModePreference('system')}
-              />
-            )}
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny">
+          <Kb.Text type="Header">Appearance</Kb.Text>
+          {isDarkModeSystemSupported() && (
             <Kb.RadioButton
-              label="Dark"
-              selected={props.darkModePreference === 'alwaysDark'}
-              onSelect={() => props.onSetDarkModePreference('alwaysDark')}
+              label="Respect system settings"
+              selected={props.darkModePreference === 'system' || props.darkModePreference === undefined}
+              onSelect={() => props.onSetDarkModePreference('system')}
             />
-            <Kb.RadioButton
-              label={<Kb.Text type="Body">Light</Kb.Text>}
-              selected={props.darkModePreference === 'alwaysLight'}
-              onSelect={() => props.onSetDarkModePreference('alwaysLight')}
-            />
-          </Kb.Box2>
+          )}
+          <Kb.RadioButton
+            label="Dark"
+            selected={props.darkModePreference === 'alwaysDark'}
+            onSelect={() => props.onSetDarkModePreference('alwaysDark')}
+          />
+          <Kb.RadioButton
+            label={<Kb.Text type="Body">Light</Kb.Text>}
+            selected={props.darkModePreference === 'alwaysLight'}
+            onSelect={() => props.onSetDarkModePreference('alwaysLight')}
+          />
         </Kb.Box2>
-      )}
+      </Kb.Box2>
     </Kb.Box>
   </Kb.ScrollView>
 )