Fixes: Socket reconnecting when changing theme

app/components/Actions.js

@@ -30,6 +30,7 @@ const Actions = styled(Flex)`
   left: 0;
   border-radius: 3px;
   background: ${props => props.theme.background};
+  transition: ${props => props.theme.backgroundTransition};
   padding: 12px;
   -webkit-backdrop-filter: blur(20px);
 

app/components/Layout.js

@@ -126,6 +126,7 @@ class Layout extends React.Component<Props> {
 
 const Container = styled(Flex)`
   background: ${props => props.theme.background};
+  transition: ${props => props.theme.backgroundTransition};
   position: relative;
   width: 100vw;
   min-height: 100%;

app/components/Modal.js

@@ -80,6 +80,7 @@ const StyledModal = styled(ReactModal)`
   overflow-x: hidden;
   overflow-y: auto;
   background: ${props => props.theme.background};
+  transition: ${props => props.theme.backgroundTransition};
   padding: 13vh 2rem 2rem;
   outline: none;
 `;

app/components/Sidebar/Sidebar.js

@@ -65,7 +65,7 @@ const Container = styled(Flex)`
   left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
   width: 100%;
   background: ${props => props.theme.sidebarBackground};
-  transition: left 100ms ease-out;
+  transition: left 100ms ease-out, ${props => props.theme.backgroundTransition};
   margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
   z-index: 2;
 

app/components/Sidebar/components/SidebarLink.js

@@ -32,13 +32,6 @@ class SidebarLink extends React.Component<Props> {
     paddingLeft: `${(this.props.depth || 0) * 16 + 16}px`,
   };
 
-  activeStyle = {
-    color: this.props.theme.text,
-    background: this.props.theme.sidebarItemBackground,
-    fontWeight: 600,
-    ...this.style,
-  };
-
   componentDidMount() {
     if (this.props.expanded) this.handleExpand();
   }
@@ -75,12 +68,18 @@ class SidebarLink extends React.Component<Props> {
       exact,
     } = this.props;
     const showDisclosure = !!children && !hideDisclosure;
+    const activeStyle = {
+      color: this.props.theme.text,
+      background: this.props.theme.sidebarItemBackground,
+      fontWeight: 600,
+      ...this.style,
+    };
 
     return (
       <Wrapper menuOpen={menuOpen} column>
         <StyledNavLink
-          activeStyle={this.activeStyle}
+          activeStyle={activeStyle}
-          style={active ? this.activeStyle : this.style}
+          style={active ? activeStyle : this.style}
           onClick={onClick}
           exact={exact !== false}
           to={to}

app/components/Theme.js

@@ -13,7 +13,7 @@ type Props = {
 
 function Theme({ children, ui }: Props) {
   return (
-    <ThemeProvider theme={ui.theme === 'dark' ? dark : light} key={ui.theme}>
+    <ThemeProvider theme={ui.theme === 'dark' ? dark : light}>
       <React.Fragment>
         <GlobalStyles />
         {children}

app/scenes/Document/components/Editor.js

@@ -53,6 +53,10 @@ class DocumentEditor extends React.Component<Props> {
 const StyledEditor = styled(Editor)`
   justify-content: start;
 
+  > div {
+    transition: ${props => props.theme.backgroundTransition};
+  }
+
   p {
     ${Placeholder} {
       visibility: hidden;

app/scenes/Search/components/SearchField.js

@@ -56,6 +56,7 @@ const StyledInput = styled.input`
   outline: none;
   border: 0;
   background: ${props => props.theme.sidebarBackground};
+  transition: ${props => props.theme.backgroundTransition};
   border-radius: 4px;
 
   color: ${props => props.theme.text};

app/scenes/Settings/Profile.js

@@ -127,6 +127,7 @@ class Profile extends React.Component<Props> {
 
 const DangerZone = styled.div`
   background: ${props => props.theme.background};
+  transition: ${props => props.theme.backgroundTransition};
   position: absolute;
   bottom: 16px;
 `;

shared/styles/theme.js

@@ -45,6 +45,7 @@ export const base = {
     "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
   fontWeight: 400,
   link: colors.primary,
+  backgroundTransition: 'background 100ms ease-in-out',
 };
 
 export const light = {