diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss
index 8e12e500e..65793200c 100644
--- a/stylesheets/_mentions.scss
+++ b/stylesheets/_mentions.scss
@@ -3,26 +3,6 @@
   max-height: 240px;
   overflow-y: auto;
   margin: 4px;
-
-  .check-mark {
-    float: right;
-    text-align: center;
-    color: darkslategrey;
-    margin: 4px;
-    min-width: 20px;
-  }
-}
-
-.member-list-container {
-  margin: 0;
-  padding: 0;
-
-  max-height: 240px;
-  overflow-y: scroll;
-
-  .check-mark {
-    display: none;
-  }
 }
 
 .module-conversation-list-item--mentioned-us {
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index 0afb07fed..75c5bfe53 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -4,7 +4,7 @@
   left: 0;
   height: 100vh;
   width: 100vw;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--modal-background-color);
   padding: 0 20px;
   z-index: 100;
   overflow-y: auto;
@@ -14,10 +14,10 @@
     max-width: 350px;
     margin: 100px auto;
     padding: 1em;
-    background-color: white;
+    background-color: var(--modal-background-content-color);
     border-radius: $border-radius;
     overflow: auto;
-    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--modal-drop-shadow);
   }
 }
 
@@ -76,7 +76,7 @@
 .edit-profile-dialog {
   .error-message {
     text-align: center;
-    color: red;
+    color: var(--danger-color);
     display: block;
     user-select: none;
   }
@@ -102,10 +102,10 @@
     max-width: 75%;
     min-width: 60%;
     padding: 1em;
-    background: white;
+    background: var(--modal-background-content-color);
     border-radius: $border-radius;
     overflow: auto;
-    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 0px 15px 0px var(--modal-background-color);
   }
 
   input[type='radio'] {
@@ -122,7 +122,6 @@
     border: 0;
     outline: none;
     border-radius: 4px;
-    background-color: var(--color-lighter-gray-color);
 
     &:focus {
       outline: none;
@@ -143,9 +142,13 @@
   }
 
   input {
-    background-color: var(--color-input-background);
-    color: var(--color-text);
-    border: var(--border-session);
+    background-color: var(--input-background-color);
+    color: var(--input-text-color);
+    border: 1px solid var(--input-border-color);
+
+    &::placeholder {
+      color: var(--input-text-placeholder-color);
+    }
   }
 }
 
@@ -180,7 +183,7 @@
       height: 30px;
       width: 30px;
       border-radius: 50%;
-      background-color: white;
+      background-color: var(--white-color);
       transition: var(--default-duration);
 
       &:hover {
@@ -212,9 +215,10 @@
       border-radius: 5px;
       text-align: center;
       font-size: $session-font-md;
-      background: var(--color-input-background);
-      color: var(--color-text);
-      border: var(--border-session);
+      // TODO Theming - Is this redundant?
+      background-color: var(--input-background-color);
+      color: var(--input-text-color);
+      border: 1px solid var(--input-border-color);
     }
 
     &-uneditable {
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index e20c52fe5..4728c1fa0 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -183,8 +183,9 @@ label {
   visibility: hidden;
 }
 
+// TODO Theming update
 .Toastify__toast {
-  background: var(--modal-background-color);
+  background: var(--modal-background-content-color);
   color: var(--modal-text-color);
   border-left: 4px solid var(--primary-color);
 
@@ -205,11 +206,11 @@ label {
   max-height: 70vh;
   max-width: calc(min(70vw, 800px));
   font-family: $session-font-default;
-  background-color: var(--color-modal-background);
-  color: var(--color-text);
-  border: var(--border-session);
+  background-color: var(--modal-background-content-color);
+  color: var(--modal-text-color);
+  border: 1px solid var(--border-color);
   border-radius: 14px;
-  box-shadow: var(--color-session-shadow);
+  box-shadow: var(--modal-drop-shadow);
 
   overflow: hidden;
   display: flex;
@@ -313,7 +314,7 @@ label {
   &__text-highlight {
     @include text-highlight(var(--primary-color));
 
-    color: var(--black-color);
+    color: var(--modal-text-color);
 
     font-family: monospace;
     font-style: normal;
@@ -395,10 +396,10 @@ label {
     transition: var(--default-duration);
 
     &:first-child {
-      border-top: var(--border-color);
+      border-top: 1px solid var(--border-color);
     }
     &:last-child {
-      border-top: var(--border-color);
+      border-top: 1px solid var(--border-color);
     }
 
     .session-icon {
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index ce2628d7b..d1da8a5f1 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -2,7 +2,7 @@
   &-fullscreen {
     width: 100%;
     height: 100%;
-    background-color: var(--color-white-color);
+    background-color: var(--background-primary-color);
   }
   &-content {
     &-accent {
@@ -56,7 +56,7 @@
     }
 
     @mixin registration-label-mixin {
-      color: var(--color-text);
+      color: var(--text-primary-color);
 
       font-weight: bold;
       padding: 20px;
@@ -90,7 +90,7 @@
     height: 46.5px;
     width: 280px;
     font-family: $session-font-default;
-    color: var(--color-text);
+    color: var(--text-primary-color);
 
     padding: 2px 0 2px 0;
     transition: opacity var(--default-duration);
@@ -100,7 +100,7 @@
     label {
       line-height: 14px;
       opacity: 0;
-      color: var(--color-text);
+      color: var(--text-primary-color);
 
       font-size: 10px;
       line-height: 11px;
@@ -113,7 +113,7 @@
     }
 
     &.error {
-      color: var(--color-destructive);
+      color: var(--danger-color);
     }
 
     input {
@@ -122,7 +122,7 @@
       height: 14px;
       width: 280px;
       background: transparent;
-      color: var(--color-text);
+      color: var(--input-text-color);
 
       font-family: $session-font-default;
       font-size: 12px;
@@ -130,10 +130,14 @@
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
+
+      &::placeholder {
+        color: var(--input-text-placeholder-color);
+      }
     }
 
     hr {
-      border: var(--border-session);
+      border: 1px solid var(--border-color);
 
       width: 100%;
       position: absolute;
@@ -151,7 +155,7 @@
   &-terms-conditions-agreement {
     padding-top: var(--margins-md);
 
-    color: var(--color-text-subtle);
+    color: var(--text-secondary-color);
     text-align: center;
     font-size: 12px;
 
@@ -159,15 +163,15 @@
       white-space: nowrap;
       font-weight: bold;
       text-decoration: none;
-      color: var(--color-text-subtle);
+      color: var(--text-secondary-color);
       transition: var(--default-duration);
 
       &:visited &:link {
-        color: var(--color-text-subtle);
+        color: var(--text-secondary-color);
       }
 
       &:hover {
-        color: var(--color-text);
+        color: var(--text-primary-color);
       }
     }
   }
@@ -176,7 +180,7 @@
     padding-top: 0;
     padding-bottom: 20px;
     // TODO Theming needs to be updated
-    color: rgba(black, 0.6);
+    color: rgba(var(--black-color), 0.6);
     text-align: center;
     font-size: 12px;
     line-height: 20px;
@@ -202,7 +206,7 @@
       outline: 0;
       border: none;
       background: transparent;
-      color: var(--color-text);
+      color: var(--text-primary-color);
       font-size: var(--font-size-md);
       line-height: 18px;
       text-align: center;
@@ -220,6 +224,6 @@
 [contenteditable='true']:empty::before {
   content: attr(placeholder);
 
-  color: var(--color-text-subtle);
+  color: var(--text-secondary-color);
   font-size: var(--font-size-sm);
 }
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 2839a47a8..0300d3bde 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -1,110 +1,103 @@
 .dark-theme {
   // _debugLog
 
+  // TODO Theming - Most of this should be removed when the debug window is properly styled
   .debug-log {
     &.modal {
       .content {
         textarea {
-          background-color: var(--color-darkest-gray-color);
-          border: 1px solid var(--color-gray-color);
-          color: var(--color-lighter-gray-color);
+          background-color: var(--input-background-color);
+          border: 1px solid var(--border-color);
+          color: var(--input-text-color);
         }
       }
     }
 
     .result {
       .open {
-        border: solid 1px var(--color-gray-color);
-        background-color: var(--color-darkest-gray-color);
-        color: var(--color-lighter-gray-color);
+        textarea {
+          background-color: var(--input-background-color);
+          border: 1px solid var(--border-color);
+          color: var(--input-text-color);
 
-        &:before {
-          @include header-icon-white('../images/open_link.svg');
+          &:before {
+            @include color-svg('../images/open_link.svg', var(--button-icon-stroke-color));
+          }
+        }
+
+        .link {
+          color: var(--text-primary-color);
+          border: 1px solid var(--border-color);
+          border-right: none;
+          background-color: var(--background-primary-color);
         }
       }
+    }
 
-      .link {
-        color: var(--color-lighter-gray-color);
-        border: solid 1px var(--color-gray-color);
-        border-right: none;
-        background-color: var(--color-darkest-gray-color);
+    // _global
+    .title-bar {
+      color: var(--text-primary-color);
+    }
+
+    // TODO Theming - Do we still use this?
+    button.grey {
+      border: 1px solid var(--color-light-gray-color);
+      color: var(--color-gray-color);
+      background: var(--color-lightest-gray-color);
+      box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
+
+      &:hover {
+        box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
       }
     }
-  }
 
-  // _global
-  .title-bar {
-    color: var(--color-lighter-gray-color);
-  }
-
-  button.grey {
-    border: solid 1px var(--color-light-gray-color);
-    color: var(--color-gray-color);
-    background: var(--color-lightest-gray-color);
-    box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
-
-    &:hover {
-      box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
+    .loading {
+      position: relative;
+      // TODO Theming - Review
+      &::before {
+        border: 3px solid;
+        border-color: var(--color-light-blue-color) var(--color-light-blue-color)
+          var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
+      }
     }
-  }
 
-  .loading {
-    position: relative;
-    &::before {
-      border: solid 3px;
-      border-color: var(--color-light-blue-color) var(--color-light-blue-color)
-        var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
+    .x {
+      &:before {
+        @include color-svg('../images/x.svg', var(--white-color));
+      }
     }
-  }
 
-  .x {
-    &:before {
-      @include color-svg('../images/x.svg', var(--color-white-color));
-    }
-  }
+    // TODO Theming - Do we use this anywhere?
+    // .hint {
+    //   color: var(--color-white-color);
+    //   border: 2px dashed var(--color-white-color);
 
-  // TODO Theming - Do we use this anywhere?
-  // .hint {
-  //   color: var(--color-white-color);
-  //   border: 2px dashed var(--color-white-color);
+    //   &.firstRun {
+    //     &:before,
+    //     &:after {
+    //       border: solid 10px var(--color-white-color);
+    //       border-color: transparent var(--color-white-color) transparent transparent;
+    //     }
+    //     &:after {
+    //       border-color: transparent var(--color-dark-blue-color) transparent transparent;
+    //     }
+    //   }
+    // }
 
-  //   &.firstRun {
-  //     &:before,
-  //     &:after {
-  //       border: solid 10px var(--color-white-color);
-  //       border-color: transparent var(--color-white-color) transparent transparent;
-  //     }
-  //     &:after {
-  //       border-color: transparent var(--color-dark-blue-color) transparent transparent;
-  //     }
-  //   }
-  // }
-
-  // TODO Theming - I don't think we use this.
-  // .contact.placeholder {
-  //   color: var(--color-white-color);
-  //   border: 2px dashed var(--color-white-color);
-  //   p {
-  //     color: var(--color-white-color);
-  //   }
-  //   &:before,
-  //   &:after {
-  //     border: solid 10px var(--color-white-color);
-  //     border-color: transparent transparent var(--color-white-color) transparent;
-  //   }
-  //   &:after {
-  //     border-color: transparent transparent var(--color-dark-blue-color) transparent;
-  //   }
-  // }
-  // _modal
-
-  // TODO Theming
-  .modal {
-    background-color: rgba(var(--color-black-color-rgb), 0.3);
-
-    .content {
-      background-color: var(--color-darkest-gray-color);
-      box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
-    }
+    // TODO Theming - I don't think we use this.
+    // .contact.placeholder {
+    //   color: var(--color-white-color);
+    //   border: 2px dashed var(--color-white-color);
+    //   p {
+    //     color: var(--color-white-color);
+    //   }
+    //   &:before,
+    //   &:after {
+    //     border: solid 10px var(--color-white-color);
+    //     border-color: transparent transparent var(--color-white-color) transparent;
+    //   }
+    //   &:after {
+    //     border-color: transparent transparent var(--color-dark-blue-color) transparent;
+    //   }
   }
 }
diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index 7e632aa4b..d7c7aa6ee 100644
--- a/ts/components/MemberListItem.tsx
+++ b/ts/components/MemberListItem.tsx
@@ -42,7 +42,7 @@ const StyledSessionMemberItem = styled.button<{
       : null};
 
   :not(:last-child) {
-    border-bottom: var(--border-color);
+    border-bottom: 1px solid var(--border-color);
   }
 `;
 
@@ -101,7 +101,7 @@ export const MemberListItem = (props: {
       style={
         !inMentions && !disableBg
           ? {
-              backgroundColor: 'var(--background-secondary-color)',
+              backgroundColor: 'var(--background-primary-color)',
             }
           : {}
       }
diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx
index 4c332432c..0559ff6ab 100644
--- a/ts/components/SessionHeaderSearchInput.tsx
+++ b/ts/components/SessionHeaderSearchInput.tsx
@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 
 export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
-  color: var(
-    ${props => (props.darkMode ? '--color-lighter-gray-color' : '--color-lighter-gray-color')}
-  );
-  background-color: var(
-    ${props => (props.darkMode ? '--color-darkest-gray-color' : '--color-darkest-gray-color')}
-  );
-  border: 1px solid
-    var(${props => (props.darkMode ? '--color-dark-gray-color' : '--color-gray-color')});
+  color: var(--input-text-color);
+  background-color: var(--input-background-color);
+  border: 1px solid var(--input-border-color);
   padding: 0 26px 0 30px;
   margin-inline-start: 8px;
   margin-inline-end: 8px;
@@ -21,14 +16,14 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
   font-weight: normal;
 
   position: relative;
-  border-radius: ${props => (props.darkMode ? '14px' : '4px')};
+  border-radius: '4px';
 
   &::placeholder {
-    color: var(--color-light-gray-color);
+    color: var(--input-text-placeholder-color);
   }
 
   &:focus {
-    border: solid 1px var(${props => (props.darkMode ? '--color-accent' : '--color-text')});
+    border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--input-text-color')});
     outline: none;
   }
 `;
diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index ce85d8553..e0f9daa93 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/ts/components/basic/SessionRadio.tsx
@@ -35,6 +35,7 @@ const StyledLabel = styled.label<{
   beforeMargins?: string;
 }>`
   cursor: pointer;
+  color: var(--text-primary-color);
 
   :before {
     content: '';
@@ -43,8 +44,8 @@ const StyledLabel = styled.label<{
 
     transition: var(--default-duration);
     padding: ${props => props.filledSize}px;
-    outline: var(--text-primary-color) solid 1px;
     border: none;
+    outline: 1px solid currentColor; /* CSS varibles didn't work here */
     outline-offset: ${props => props.outlineOffset}px;
     ${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
   }
@@ -85,7 +86,6 @@ export const SessionRadio = (props: Props) => {
         beforeMargins={beforeMargins}
         aria-label={label}
         data-testid={`label-${value}`}
-        // TODO Theming does this need a selected color
       >
         {label}
       </StyledLabel>
@@ -94,12 +94,13 @@ export const SessionRadio = (props: Props) => {
 };
 
 const StyledInputOutlineSelected = styled(StyledInput)`
+  color: var(--text-primary-color);
   label:before,
   label:before {
     outline: none;
   }
   :checked + label:before {
-    outline: var(--text-primary-color) solid 1px;
+    outline-color: 1px solid currentColor;
   }
 `;
 const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`
diff --git a/ts/components/calling/CallInFullScreenContainer.tsx b/ts/components/calling/CallInFullScreenContainer.tsx
index 15763be6d..457376006 100644
--- a/ts/components/calling/CallInFullScreenContainer.tsx
+++ b/ts/components/calling/CallInFullScreenContainer.tsx
@@ -22,7 +22,7 @@ const CallInFullScreenVisible = styled.div`
   display: flex;
   flex-direction: column;
   background-color: var(--black-color);
-  border: var(--border-color);
+  border: 1px solid var(--border-color);
   opacity: 1;
 `;
 
diff --git a/ts/components/calling/DraggableCallContainer.tsx b/ts/components/calling/DraggableCallContainer.tsx
index 47f93083c..b0ab7c29a 100644
--- a/ts/components/calling/DraggableCallContainer.tsx
+++ b/ts/components/calling/DraggableCallContainer.tsx
@@ -20,8 +20,8 @@ export const DraggableCallWindow = styled.div`
   width: 12vw;
   display: flex;
   flex-direction: column;
-  background-color: var(--modal-background-color);
-  border: var(--border-color);
+  background-color: var(--modal-background-content-color);
+  border: 1px solid var(--border-color);
 `;
 
 export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`
diff --git a/ts/components/calling/IncomingCallDialog.tsx b/ts/components/calling/IncomingCallDialog.tsx
index e7a662752..af0b0983b 100644
--- a/ts/components/calling/IncomingCallDialog.tsx
+++ b/ts/components/calling/IncomingCallDialog.tsx
@@ -20,8 +20,8 @@ export const CallWindow = styled.div`
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
-  background-color: var(--modal-background-color);
-  border: var(--border-color);
+  background-color: var(--modal-background-content-color);
+  border: 1px solid var(--border-color);
 `;
 
 const IncomingCallAvatarContainer = styled.div`
diff --git a/ts/components/dialog/SessionModal.tsx b/ts/components/dialog/SessionModal.tsx
index 5f8f1a348..9fb8bae37 100644
--- a/ts/components/dialog/SessionModal.tsx
+++ b/ts/components/dialog/SessionModal.tsx
@@ -27,6 +27,7 @@ interface State {
   isVisible: boolean;
 }
 
+// TODO Theming - Can we remove this.
 export class SessionModal extends React.PureComponent<Props, State> {
   public static defaultProps = {
     showExitIcon: true,
diff --git a/ts/components/leftpane/LeftPaneSectionContainer.tsx b/ts/components/leftpane/LeftPaneSectionContainer.tsx
index 2d77fe5a5..263d33288 100644
--- a/ts/components/leftpane/LeftPaneSectionContainer.tsx
+++ b/ts/components/leftpane/LeftPaneSectionContainer.tsx
@@ -5,7 +5,6 @@ export const LeftPaneSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-right: var(--border-color);
   overflow-y: auto;
 
   .session-icon-button {
diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx
index aec2db56f..4a9f2b1c9 100644
--- a/ts/components/leftpane/LeftPaneSectionHeader.tsx
+++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx
@@ -47,7 +47,7 @@ export const StyledLeftPaneBanner = styled.div`
   background: var(--background-primary-color);
   display: flex;
   flex-direction: column;
-  border-bottom: var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 `;
 
 const StyledBannerInner = styled.div`
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index 3191dce84..282aad424 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -32,7 +32,8 @@ const StyledGroupMemberListContainer = styled.div`
   width: 100%;
   max-height: 400px;
   overflow-y: auto;
-  border: var(--border-color);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 `;
 
 const NoContacts = () => {
diff --git a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
index adb503414..c16aa786e 100644
--- a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
@@ -29,7 +29,7 @@ const MessageRequestListPlaceholder = styled.div`
 const MessageRequestListContainer = styled.div`
   width: 100%;
   overflow-y: auto;
-  border: var(--border-color);
+  border: 1px solid var(--border-color);
   margin-bottom: auto;
 `;
 
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 25751281d..71d277b78 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -626,9 +626,11 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* TODO Theming - Should Pills have their own colors? */
 
     /* Modals */
-    --modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
+    --modal-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3);
+    --modal-background-content-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
     --modal-text-color: var(--text-primary-color);
     --modal-text-danger-color: var(--danger-color);
+    --modal-drop-shadow: 0px 0px 10px  rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
 
     /* Toasts */
     --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
@@ -677,6 +679,14 @@ export const SessionGlobalStyles = createGlobalStyle`
   --lightbox-caption-background-color: 'rgba(192, 192, 192, .40)';
   --lightbox-icon-stroke-color: var(--white-color);
 
+  /* Inputs */
+  /* Also used for some TextAreas */
+  --input-background-color: var(--background-secondary-color);
+  --input-background-hover-color: var(--background-secondary-color);
+  --input-text-placeholder-color: var(--text-secondary-color);
+  --input-text-color:  var(--text-primary-color);
+  --input-border-color: var(--border-color);
+
   };
 `;
 
diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx
index 259e5a901..faabdf28a 100644
--- a/ts/themes/switchTheme.tsx
+++ b/ts/themes/switchTheme.tsx
@@ -324,7 +324,7 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
   );
 
   document.documentElement.style.setProperty(
-    '--modal-background-color',
+    '--modal-background-content-color',
     THEMES.CLASSIC_LIGHT.COLOR6
   );
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
@@ -410,6 +410,21 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
     'rgba(192, 192, 192, .40)'
   );
   document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
+
+  document.documentElement.style.setProperty(
+    '--input-background-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--input-background-hover-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--input-text-placeholder-color',
+    'var(--text-secondary-color)'
+  );
+  document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
+  document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
 }
 
 function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@@ -725,8 +740,8 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
   );
 
   document.documentElement.style.setProperty(
-    '--modal-background-color',
-    'var(--background-secondary-color)'
+    '--modal-background-content-color',
+    'var(--background-primary-color)'
   );
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
   document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
@@ -809,6 +824,21 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
     'rgba(192, 192, 192, .40)'
   );
   document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
+
+  document.documentElement.style.setProperty(
+    '--input-background-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--input-background-hover-color',
+    'var(--background-primary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--input-text-placeholder-color',
+    'var(--text-secondary-color)'
+  );
+  document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
+  document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
 }
 
 function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@@ -1128,7 +1158,7 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
   );
 
   document.documentElement.style.setProperty(
-    '--modal-background-color',
+    '--modal-background-content-color',
     'var(--background-primary-color)'
   );
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
@@ -1214,6 +1244,18 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
     'rgba(192, 192, 192, .40)'
   );
   document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
+
+  document.documentElement.style.setProperty('--input-background-color', THEMES.OCEAN_LIGHT.COLOR5);
+  document.documentElement.style.setProperty(
+    '--input-background-hover-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--input-text-placeholder-color',
+    'var(--text-secondary-color)'
+  );
+  document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
+  document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
 }
 
 function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@@ -1525,8 +1567,8 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
   );
 
   document.documentElement.style.setProperty(
-    '--modal-background-color',
-    'var(--background-primary-color)'
+    '--modal-background-content-color',
+    'var(--background-secondary-color)'
   );
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
   document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
@@ -1609,6 +1651,18 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
     'rgba(192, 192, 192, .40)'
   );
   document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
+
+  document.documentElement.style.setProperty('--input-background-color', THEMES.OCEAN_DARK.COLOR3);
+  document.documentElement.style.setProperty(
+    '--input-background-hover-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--input-text-placeholder-color',
+    'var(--text-secondary-color)'
+  );
+  document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
+  document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
 }
 
 export async function switchTheme(theme: ThemeStateType) {