diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 6e08597935..414731fc7b 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -69,6 +69,8 @@ $primary-hairline-color: #e5e5e5;
 $input-border-color: #f0f0f0;
 $input-darker-bg-color: rgba(193, 201, 214, 0.29);
 $input-darker-fg-color: #9fa9ba;
+$input-lighter-bg-color: #f2f5f8;
+$input-lighter-fg-color: $input-darker-fg-color;
 
 $button-bg-color: #7ac9a1;
 $button-fg-color: white;
@@ -222,6 +224,26 @@ input[type=search] {
     min-width: 0;
 }
 
+.dark-panel {
+    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput) > input[type=search],
+    .mx_textinput {
+        color: $input-darker-fg-color;
+        background-color: $input-darker-bg-color;
+        border: none;
+    }
+}
+
+.light-panel {
+    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput) > input[type=search],
+    .mx_textinput {
+        color: $input-lighter-fg-color;
+        background-color: $input-lighter-bg-color;
+        border: none;
+    }
+}
+
 
 // dont search UI as not all browsers support it,
 // we implement it ourselves where needed instead
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index f24524cc5f..820e3b2e75 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -1287,6 +1287,7 @@ export default React.createClass({
 
             const headerClasses = {
                 mx_GroupView_header: true,
+                'light-panel': true,
                 mx_GroupView_header_view: !this.state.editing,
                 mx_GroupView_header_isUserMember: this.state.isUserMember,
             };
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index da5abed41b..84642a12a6 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -201,7 +201,7 @@ const LeftPanel = React.createClass({
         return (
             <div className={containerClasses}>
                 { tagPanel }
-                <aside className={"mx_LeftPanel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed }/>
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 38c679a5b5..156785efe8 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -163,7 +163,7 @@ export default React.createClass({
             </div> : <div />;
 
         return (
-            <div className="mx_MemberList">
+            <div className="mx_MemberList dark-panel">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true}>
                     { joined }
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index cfd2b806d4..1abf6acb94 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -131,7 +131,7 @@ export default React.createClass({
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
-            <div className="mx_GroupRoomList">
+            <div className="mx_GroupRoomList dark-panel">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index ddc7bc1e48..22e0794a3c 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -457,7 +457,7 @@ module.exports = React.createClass({
         );
 
         return (
-            <div className="mx_MemberList">
+            <div className="mx_MemberList dark-panel">
                 { filterAndButtons }
                 <GeminiScrollbarWrapper autoshow={true}>
                     <div className="mx_MemberList_wrapper">
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 1cc04b1168..e32ff26d32 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -424,7 +424,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
+            <div className={"mx_RoomHeader light-panel " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
                     { name }