trigger theme switch with user theme on app start

ts/components/ConversationListItem.tsx

@@ -72,8 +72,11 @@ type PropsHousekeeping = {
 type Props = PropsData & PropsHousekeeping;
 
 const Portal = ({ children }: { children: any }) => {
-  return createPortal(children, document.querySelector('.inbox.index') as Element);
+  return createPortal(
-}
+    children,
+    document.querySelector('.inbox.index') as Element
+  );
+};
 
 class ConversationListItem extends React.PureComponent<Props> {
   public constructor(props: Props) {
@@ -188,14 +191,14 @@ class ConversationListItem extends React.PureComponent<Props> {
           {isTyping ? (
             <TypingAnimation i18n={i18n} />
           ) : (
-              <MessageBody
+            <MessageBody
-                isGroup={true}
+              isGroup={true}
-                text={text}
+              text={text}
-                disableJumbomoji={true}
+              disableJumbomoji={true}
-                disableLinks={true}
+              disableLinks={true}
-                i18n={i18n}
+              i18n={i18n}
-              />
+            />
-            )}
+          )}
         </div>
         {lastMessage && lastMessage.status ? (
           <div

ts/components/conversation/Message.tsx

@@ -291,15 +291,15 @@ export class Message extends React.PureComponent<Props, State> {
             {window.i18n('sendFailed')}
           </span>
         ) : (
-            <Timestamp
+          <Timestamp
-              i18n={window.i18n}
+            i18n={window.i18n}
-              timestamp={serverTimestamp || timestamp}
+            timestamp={serverTimestamp || timestamp}
-              extended={true}
+            extended={true}
-              direction={direction}
+            direction={direction}
-              withImageNoCaption={withImageNoCaption}
+            withImageNoCaption={withImageNoCaption}
-              module="module-message__metadata__date"
+            module="module-message__metadata__date"
-            />
+          />
-          )}
+        )}
         {this.renderMetadataBadges()}
         {expirationLength && expirationTimestamp ? (
           <ExpireTimer
@@ -473,30 +473,30 @@ export class Message extends React.PureComponent<Props, State> {
               <Spinner size="small" direction={direction} />
             </div>
           ) : (
-              <div className="module-message__generic-attachment__icon-container">
+            <div className="module-message__generic-attachment__icon-container">
-                <div
+              <div
-                  role="button"
+                role="button"
-                  className="module-message__generic-attachment__icon"
+                className="module-message__generic-attachment__icon"
-                  onClick={(e: any) => {
+                onClick={(e: any) => {
-                    if (this.props?.onDownload) {
+                  if (this.props?.onDownload) {
-                      e.stopPropagation();
+                    e.stopPropagation();
-                      this.props.onDownload(firstAttachment);
+                    this.props.onDownload(firstAttachment);
-                    }
+                  }
-                  }}
+                }}
-                >
+              >
-                  {extension ? (
+                {extension ? (
-                    <div className="module-message__generic-attachment__icon__extension">
+                  <div className="module-message__generic-attachment__icon__extension">
-                      {extension}
+                    {extension}
-                    </div>
-                  ) : null}
-                </div>
-                {isDangerous ? (
-                  <div className="module-message__generic-attachment__icon-dangerous-container">
-                    <div className="module-message__generic-attachment__icon-dangerous" />
                   </div>
                 ) : null}
               </div>
-            )}
+              {isDangerous ? (
+                <div className="module-message__generic-attachment__icon-dangerous-container">
+                  <div className="module-message__generic-attachment__icon-dangerous" />
+                </div>
+              ) : null}
+            </div>
+          )}
           <div className="module-message__generic-attachment__text">
             <div
               className={classNames(

ts/components/session/ActionsPanel.tsx

@@ -37,6 +37,15 @@ class ActionsPanelPrivate extends React.Component<Props> {
     void removeItemById('hasSeenLightModeDialog');
   }
 
+  // fetch the user saved theme from the db, and apply it on mount.
+  public componentDidMount() {
+    const theme = window.Events.getThemeSetting();
+    window.setTheme(theme);
+
+    const newThemeObject = theme === 'dark' ? darkTheme : lightTheme;
+    this.props.applyTheme(newThemeObject);
+  }
+
   public Section = ({
     isSelected,
     onSelect,