Explicit theme colors for inputs and textarea

diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 8e5739e452dcee16aaa24c9ffe5fa8f05008f999..5c6657538f720e8845ee1f388493f1c040fd4d0b 100644 (file)
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -14,7 +14,6 @@ $input-border-radius: 3px;
     textarea {
       @include peertube-textarea(100%, 150px);
 
-      background-color: var(--textareaBackgroundColor);
       font-family: monospace;
       font-size: 13px;
       border-bottom: none;

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index d637c94d98274d988527ab17de7e41237a6f29c8..03935307744c984301485cfda06e8ffa2d1cab23 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -35,9 +35,11 @@ body {
   --menuForegroundColor: #{$menu-color};
   --submenuColor: #{$sub-menu-color};
 
+  --inputForegroundColor: #{$input-foreground-color};
   --inputBackgroundColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
 
+  --textareaForegroundColor: #{$textarea-foreground-color};
   --textareaBackgroundColor: #{$textarea-background-color};
 
   --actionButtonColor: #{$grey-foreground-color};

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f157ded5ec70deef7ff0f35997277127babd60f0..87b7edaad362c8b18d134ba5e64f23f8a578efe2 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -90,6 +90,7 @@
   display: inline-block;
   height: $button-height;
   width: $width;
+  color: var(--inputForegroundColor);
   background: var(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
@@ -121,6 +122,8 @@
 @mixin peertube-textarea ($width, $height) {
   @include peertube-input-text($width);
 
+  color: var(--textareaForegroundColor);
+  background-color: var(--textareaBackgroundColor);
   height: $height;
   padding: 5px 15px;
   font-size: 15px;
@@ -280,6 +283,7 @@
   margin: 0;
   width: $width;
   border-radius: 3px;
+  color: var(--inputForegroundColor);
   background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 46f1e99f7f8bc46ecc03ac409e7fa1baecf1740a..9b441dcfeebe9297f016a607b4ae3346e6bbe3df 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -63,9 +63,11 @@ $video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
 
 $theater-bottom-space: 115px;
 
+$input-foreground-color: $fg-color;
 $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
 
+$textarea-foreground-color: $fg-color;
 $textarea-background-color: $grey-background-hover-color;
 
 $sub-menu-margin-bottom: 30px;
@@ -92,9 +94,11 @@ $variables: (
   --menuForegroundColor: var(--menuForegroundColor),
   --submenuColor: var(--submenuColor),
 
+  --inputForegroundColor: var(--inputForegroundColor),
   --inputBackgroundColor: var(--inputBackgroundColor),
   --inputPlaceholderColor: var(--inputPlaceholderColor),
 
+  --textareaForegroundColor: var(--textareaForegroundColor),
   --textareaBackgroundColor: var(--textareaBackgroundColor),
 
   --actionButtonColor: var(--actionButtonColor),