From b4f3a470c44e790d28b01f68b82e73218a874a77 Mon Sep 17 00:00:00 2001
From: Reto Brunner <reto@slightlybroken.com>
Date: Mon, 31 Jul 2023 11:54:57 +0200
Subject: [PATCH] search: move color to themes

Themes that differ from our built ins should not be forced
to use very specific styles just to undo what the base style sets.

If they decide that all input fields should have a certain color,
they should be able to just select on the input field.
Our base style should just do layout.
The themes can then override the colors where needed.
---
 client/components/MessageSearchForm.vue |  8 --------
 client/themes/default.css               | 18 ++++++++++++++++++
 client/themes/morning.css               |  9 +++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client/components/MessageSearchForm.vue b/client/components/MessageSearchForm.vue
index 98b1a0b2..6e61e71a 100644
--- a/client/components/MessageSearchForm.vue
+++ b/client/components/MessageSearchForm.vue
@@ -36,15 +36,9 @@ form.message-search input {
 	height: auto !important;
 	margin: 7px 0;
 	border: 0;
-	color: inherit;
-	background-color: #fafafa;
 	appearance: none;
 }
 
-form.message-search input::placeholder {
-	color: rgba(0, 0, 0, 0.35);
-}
-
 @media (min-width: 480px) {
 	form.message-search input {
 		min-width: 140px;
@@ -63,7 +57,6 @@ form.message-search .input-wrapper {
 	z-index: 1;
 	height: 0;
 	overflow: hidden;
-	background: var(--window-bg-color);
 }
 
 form.message-search .input-wrapper input {
@@ -76,7 +69,6 @@ form.message-search.opened .input-wrapper {
 
 #chat form.message-search button {
 	display: flex;
-	color: #607992;
 }
 </style>
 
diff --git a/client/themes/default.css b/client/themes/default.css
index fc473250..e87e3554 100644
--- a/client/themes/default.css
+++ b/client/themes/default.css
@@ -33,3 +33,21 @@
 		border-radius: 0;
 	}
 }
+
+/* Search Form */
+form.message-search input {
+	color: inherit;
+	background-color: #fafafa;
+}
+
+form.message-search input::placeholder {
+	color: rgba(0, 0, 0, 0.35);
+}
+
+form.message-search .input-wrapper {
+	background: var(--window-bg-color);
+}
+
+#chat form.message-search button {
+	color: #607992;
+}
diff --git a/client/themes/morning.css b/client/themes/morning.css
index a4fdcfdb..665cbac2 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -122,6 +122,15 @@ body {
 /* Search Form */
 form.message-search input {
 	background-color: #28333d;
+	color: inherit;
+}
+
+form.message-search input::placeholder {
+	color: rgba(0, 0, 0, 0.35);
+}
+
+form.message-search .input-wrapper {
+	background: var(--window-bg-color);
 }
 
 #chat form.message-search button {