diff --git a/app/components/Actions.js b/app/components/Actions.js
index 77a8b51fb..89bc091b5 100644
--- a/app/components/Actions.js
+++ b/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);
 
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 68f5e44cb..bc09750cc 100644
--- a/app/components/Layout.js
+++ b/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%;
diff --git a/app/components/Modal.js b/app/components/Modal.js
index 721534c16..85dfa4111 100644
--- a/app/components/Modal.js
+++ b/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;
 `;
diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js
index ca3bf5705..ab95d2ef3 100644
--- a/app/components/Sidebar/Sidebar.js
+++ b/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;
 
diff --git a/app/components/Sidebar/components/SidebarLink.js b/app/components/Sidebar/components/SidebarLink.js
index f86862bc2..523b45522 100644
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/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}
-          style={active ? this.activeStyle : this.style}
+          activeStyle={activeStyle}
+          style={active ? activeStyle : this.style}
           onClick={onClick}
           exact={exact !== false}
           to={to}
diff --git a/app/components/Theme.js b/app/components/Theme.js
index b995e8835..543a1412c 100644
--- a/app/components/Theme.js
+++ b/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}
diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js
index ef8417895..03ec94aec 100644
--- a/app/scenes/Document/components/Editor.js
+++ b/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;
diff --git a/app/scenes/Search/components/SearchField.js b/app/scenes/Search/components/SearchField.js
index 56d5e5bf9..d65842086 100644
--- a/app/scenes/Search/components/SearchField.js
+++ b/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};
diff --git a/app/scenes/Settings/Profile.js b/app/scenes/Settings/Profile.js
index 678b8e202..ae0b529e4 100644
--- a/app/scenes/Settings/Profile.js
+++ b/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;
 `;
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index bed1cda60..693d78e6b 100644
--- a/shared/styles/theme.js
+++ b/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 = {