feat: themed password window

password_preload.js

@@ -11,7 +11,8 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 window.React = require('react');
 window.ReactDOM = require('react-dom');
 
-window.theme = config.theme;
+// If the app is locked we can't access the database to check the theme.
+window.theme = 'classic-dark';
 window.i18n = i18n.setupi18n(locale, localeMessages);
 
 window.getEnvironment = () => config.environment;

ts/components/SessionPasswordPrompt.tsx

@@ -5,11 +5,9 @@ import { SessionIcon } from './icon';
 import autoBind from 'auto-bind';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SessionSpinner } from './basic/SessionSpinner';
-import {
-  SessionTheme,
-  switchHtmlToDarkTheme,
-  switchHtmlToLightTheme,
-} from '../themes/SessionTheme';
+import { SessionTheme } from '../themes/SessionTheme';
+import { switchThemeTo } from '../session/utils/Theme';
+import styled from 'styled-components';
 
 interface State {
   error: string;
@@ -27,6 +25,12 @@ const TextPleaseWait = (props: { isLoading: boolean }) => {
   return <div>{window.i18n('pleaseWaitOpenAndOptimizeDb')}</div>;
 };
 
+const StyledContent = styled.div`
+  background-color: var(--background-primary-color);
+  height: 100%;
+  width: 100%;
+`;
+
 class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
   private inputRef?: any;
 
@@ -216,16 +220,16 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
 
 export const SessionPasswordPrompt = () => {
   useEffect(() => {
-    if ((window as any).theme === 'dark') {
-      switchHtmlToDarkTheme();
-    } else {
-      switchHtmlToLightTheme();
+    if ((window as any).theme) {
+      void switchThemeTo((window as any).theme, null, false);
     }
   }, []);
 
   return (
     <SessionTheme>
-      <SessionPasswordPromptInner />
+      <StyledContent>
+        <SessionPasswordPromptInner />
+      </StyledContent>
     </SessionTheme>
   );
 };

ts/mains/password_start.tsx

@@ -3,11 +3,5 @@
 
 import React from 'react';
 import { SessionPasswordPrompt } from '../components/SessionPasswordPrompt';
-import { SessionTheme } from '../themes/SessionTheme';
 
-window.ReactDOM.render(
-  <SessionTheme>
-    <SessionPasswordPrompt />
-  </SessionTheme>,
-  document.getElementById('root')
-);
+window.ReactDOM.render(<SessionPasswordPrompt />, document.getElementById('root'));