27 files changed, 77 insertions, 52 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 37989cb59..3673a805b 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -186,7 +186,7 @@
 
                 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 
-                <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small>
+                <small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small>
               </div>
 
               <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@@ -253,7 +253,7 @@
 
           <div class="form-group mt-4">
             <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="text-muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
+            <span i18n class="muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 
             <div class="number-with-unit">
               <input type="number" name="importConcurrency" formControlName="concurrency" />
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 8d6a4ce19..b29651437 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -50,7 +50,7 @@
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
                 <label i18n for="liveMaxInstanceLives">
-                  Max simultaneous lives created on your instance <span class="text-muted">(-1 for "unlimited")</span>
+                  Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span>
                 </label>
 
                 <div class="number-with-unit">
@@ -63,7 +63,7 @@
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
                 <label i18n for="liveMaxUserLives">
-                  Max simultaneous lives created per user <span class="text-muted">(-1 for "unlimited")</span>
+                  Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span>
                 </label>
 
                 <div class="number-with-unit">
@@ -139,7 +139,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 
-            <span class="text-muted ml-1">
+            <span class="muted ml-1">
               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
                 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
               </ng-container>
@@ -160,7 +160,7 @@
 
           <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
-            <span class="text-muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
+            <span class="muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 
             <my-select-options
               id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 2be855756..52d6c79f6 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -128,7 +128,7 @@
                         </my-peertube-checkbox>
                       </div>
 
-                      <span class="mb-2 text-muted" i18n>
+                      <span class="mb-2 muted" i18n>
                         The original file resolution will be the default target if no option is selected.
                       </span>
                     </ng-container>
@@ -142,7 +142,7 @@
 
         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingThreads">Transcoding threads</label>
-          <span class="text-muted ml-1">
+          <span class="muted ml-1">
             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
               will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
             </ng-container>
@@ -164,7 +164,7 @@
 
         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
-          <span class="text-muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
+          <span class="muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 
           <div class="number-with-unit">
             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -176,7 +176,7 @@
 
         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingProfile">Transcoding profile</label>
-          <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
+          <span class="muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
           <my-select-options
             id="transcodingProfile"
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 0662e3ac3..30d10e3cf 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -96,7 +96,7 @@
             <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
            <div>
               <span class="user-table-primary-text">{{ user.account.displayName }}</span>
-              <span class="text-muted">{{ user.username }}</span>
+              <span class="muted">{{ user.username }}</span>
             </div>
           </div>
         </a>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index eb2a48e15..ae5f25cff 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -8,7 +8,7 @@
       type="text" id="username" class="form-control"
       formControlName="username" readonly
     >
-    <div class="text-muted" i18n>
+    <div class="muted" i18n>
       People can find you using @{{ user.username }}@{{ instanceHost }}
     </div>
   </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index a5823fbc4..cbac81d01 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -10,7 +10,7 @@ label {
   margin-bottom: 15px;
 }
 
-input#username + .text-muted {
+input#username + .muted {
   margin-top: 5px;
 }
 
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index 4303695a3..a8a3da863 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -22,7 +22,7 @@
         <span class="glyphicon glyphicon-new-window"></span>
       </a>
 
-      <div class="text-muted">
+      <div class="muted">
         <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
         <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
       </div>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index cb032505e..c29c71c0a 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -40,7 +40,7 @@
             <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount" size="32"></my-actor-avatar>
             <div>
               {{ videoChangeOwnership.initiatorAccount.displayName }}
-              <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
+              <span class="muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
             </div>
           </div>
         </a>
@@ -56,7 +56,7 @@
               <div>
                 {{ videoChangeOwnership.video.name }}
               </div>
-              <div class="text-muted">by {{ videoChangeOwnership.video.channel?.displayName }} </div>
+              <div class="muted">by {{ videoChangeOwnership.video.channel?.displayName }} </div>
             </div>
           </div>
         </a>
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index 1e25e4495..0333f9550 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,14 +1,14 @@
 <div class="root">
   <div *ngIf="status !== 403 && status !== 418" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 text-muted" i18n>That's an error.</span>
+    <span class="ml-1 muted" i18n>That's an error.</span>
 
     <div class="text mt-4">
       <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container>
       <ng-container *ngIf="type !== 'video'" i18n>We couldn't find any resource tied to the URL {{ pathname }} you were looking for.</ng-container>
     </div>
 
-    <div class="text-muted mt-4">
+    <div class="muted mt-4">
       <span i18n="Possible reasons preceding a list of reasons a `Not Found` error page may occur">Possible reasons:</span>
 
       <ul>
@@ -24,7 +24,7 @@
 
   <div *ngIf="status === 403" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 text-muted" i18n>You are not authorized here.</span>
+    <span class="ml-1 muted" i18n>You are not authorized here.</span>
 
     <div class="text mt-4">
       <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container>
@@ -34,12 +34,12 @@
 
   <div *ngIf="status === 418" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 text-muted">I'm a teapot.</span>
+    <span class="ml-1 muted">I'm a teapot.</span>
 
     <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request">
       The requested entity body blends sweet bits with a mellow earthiness.
     </div>
-    <div class="text-muted" i18n="This is about Sepia's tea">Sepia seems to like it.</div>
+    <div class="muted" i18n="This is about Sepia's tea">Sepia seems to like it.</div>
   </div>
 
   <img src='/client/assets/images/mascot/{{ getMascotName() }}.svg' alt='{{ status }} mascot'>
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index fc67ac65a..5c3453e4b 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -14,7 +14,7 @@
 
   .playlist-info {
     padding: 5px 30px;
-    background-color: #e4e4e4;
+    background-color: pvar(--greyBackgroundColor);
 
     .playlist-display-name {
       font-size: 18px;
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 9b21d3f86..7a9b6c51f 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -24,21 +24,21 @@
     <div *ngIf="showSearchGlobalHelp()" id="typeahead-help" class="overflow-hidden">
       <div class="d-flex justify-content-between">
         <label class="small-title" i18n>GLOBAL SEARCH</label>
-        <div class="advanced-search-status text-muted">
+        <div class="advanced-search-status muted">
           <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
           <i class="glyphicon glyphicon-globe"></i>
         </div>
       </div>
-      <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
+      <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
     </div>
 
     <!-- search instructions, when search input is empty -->
     <div *ngIf="areInstructionsDisplayed()" id="typeahead-instructions" class="overflow-hidden">
-      <span class="text-muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
+      <span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
       <div class="d-flex justify-content-between mt-3">
         <label class="small-title" i18n>ADVANCED SEARCH</label>
         <div class="advanced-search-status c-help">
-          <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
+          <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
             <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span>
             <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span>
             <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
@@ -47,13 +47,13 @@
       </div>
       <ul>
         <li>
-          <em>@channel_id@domain</em> <span class="flex-auto text-muted" i18n>will list the matching channel</span>
+          <em>@channel_id@domain</em> <span class="flex-auto muted" i18n>will list the matching channel</span>
         </li>
         <li>
-          <em>URL</em> <span class="text-muted" i18n>will list the matching channel</span>
+          <em>URL</em> <span class="muted" i18n>will list the matching channel</span>
         </li>
         <li>
-          <em>UUID</em> <span class="text-muted" i18n>will list the matching video</span>
+          <em>UUID</em> <span class="muted" i18n>will list the matching video</span>
         </li>
       </ul>
     </div>
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 5b9e821a7..0a364dcc8 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -36,14 +36,14 @@
               >
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
-                <span class="ml-auto text-muted">{{ currentInterfaceLanguage }}</span>
+                <span class="ml-auto muted">{{ currentInterfaceLanguage }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
                 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
                 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
                 <span i18n>Videos:</span>
-                <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
+                <span class="ml-auto muted">{{ videoLanguages.join(', ') }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
@@ -53,7 +53,7 @@
                 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
                 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
                 <span i18n>Sensitive:</span>
-                <span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
+                <span class="ml-auto muted">{{ nsfwPolicy }}</span>
               </a>
 
               <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index a1a4586f0..986de15ed 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -12,12 +12,12 @@
         >
           <my-actor-avatar size="18" [account]="abuse.reporterAccount"></my-actor-avatar>
           <div>
-            <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
+            <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
           </div>
         </a>
 
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
-          class="ml-auto text-muted abuse-details-links" i18n
+          class="ml-auto muted abuse-details-links" i18n
         >
           {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
         </a>
@@ -32,12 +32,12 @@
         >
           <my-actor-avatar size="18" [account]="abuse.flaggedAccount"></my-actor-avatar>
           <div>
-            <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
+            <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
           </div>
         </a>
 
         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
-          class="ml-auto text-muted abuse-details-links" i18n
+          class="ml-auto muted abuse-details-links" i18n
         >
           {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
         </a>
@@ -53,7 +53,7 @@
     <div class="mt-3 d-flex">
       <span class="moderation-expanded-label">
         <ng-container i18n>Report</ng-container>
-        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 muted">#{{ abuse.id }}</a>
       </span>
       <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
     </div>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 9d0402224..c679e1403 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -34,7 +34,7 @@
   </div>
 
   <div class="ml-4 d-flex flex-column">
-    <small class="wrapper mt-2 text-muted">
+    <small class="wrapper mt-2 muted">
       <ng-content select="description"></ng-content>
     </small>
 
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.html b/client/src/app/shared/shared-forms/select/select-options.component.html
index 83c7de9f5..0ccc23717 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.html
+++ b/client/src/app/shared/shared-forms/select/select-options.component.html
@@ -16,7 +16,7 @@
     {{ item.label }}
     <ng-container *ngIf="item.description">
       <br>
-      <span [title]="item.description" class="text-muted">{{ item.description }}</span>
+      <span [title]="item.description" class="muted">{{ item.description }}</span>
     </ng-container>
   </ng-template>
 </ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index f7b001fe8..4de43077c 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -3,7 +3,7 @@
 
 $form-base-input-width: auto;
 
-.text-muted {
+.muted {
   font-size: 90%;
 }
 
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index c465b6903..10dae68f0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -20,7 +20,7 @@
 
             <div class="d-flex flex-column">
               <span i18n>{{ action.label }}</span>
-              <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
+              <small class="muted" *ngIf="action.description">{{ action.description }}</small>
             </div>
           </ng-template>
 
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
index b456eeb95..fe65d6e7e 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -60,7 +60,6 @@
   .dropdown-item {
     display: flex;
     cursor: pointer;
-    color: #000 !important;
 
     &.with-icon {
       @include dropdown-with-icon-item;
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 0143194e9..a4f81d824 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -36,7 +36,7 @@
             <my-actor-avatar [account]="accountBlock.blockedAccount" size="32"></my-actor-avatar>
             <div>
               {{ accountBlock.blockedAccount.displayName }}
-              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
+              <span class="muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
             </div>
           </div>
         </a>
diff --git a/client/src/app/shared/shared-tables/video-cell.component.html b/client/src/app/shared/shared-tables/video-cell.component.html
index fb7d852ab..ea432b70e 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.html
+++ b/client/src/app/shared/shared-tables/video-cell.component.html
@@ -13,7 +13,7 @@
         {{ video.name }}
       </div>
 
-      <div class="text-muted">by {{ video.channel?.displayName }} on {{ video.channel?.host }} </div>
+      <div class="muted">by {{ video.channel?.displayName }} on {{ video.channel?.host }} </div>
     </div>
   </div>
 </a>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 9d6ef0360..7f5692dd4 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -1,5 +1,5 @@
 <ng-template #updateSettings let-fragment>
-  <div class="label-description text-muted" i18n>
+  <div class="label-description muted" i18n>
     Update
     <a routerLink="/my-account/settings" [fragment]="fragment">
       <span (click)="onAccountSettingsClick($event)">your settings</span>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9f64f7426..81bbfa43a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -28,13 +28,18 @@ body {
   --mainColor: #{$main-color};
   --mainColorLighter: #{$main-color-lighter};
   --mainColorLightest: #{$main-color-lightest};
+
   --mainHoverColor: #{$main-hover-color};
+  --mainBackgroundHoverColor: #{$main-background-hover-color};
+
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
+
   --secondaryColor: #{$secondary-color};
 
   --greyForegroundColor: #{$grey-foreground-color};
   --greyBackgroundColor: #{$grey-background-color};
+  --greySecondaryBackgroundColor: #{$grey-background-hover-color};
 
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
@@ -51,6 +56,7 @@ body {
   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
 
   --actionButtonColor: #{$grey-foreground-color};
+
   --supportButtonBackgroundColor: #{transparent};
   --supportButtonColor: #{pvar(--actionButtonColor)};
   --supportButtonHeartColor: #{$support-button-heart};
@@ -312,7 +318,7 @@ table {
 }
 
 .form-group-description {
-  @extend .text-muted;
+  @extend .muted !optional;
 
   font-size: 90%;
   margin-top: 10px;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 432e23e92..d6af7f485 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -89,6 +89,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
 
+  color: pvar(--mainForegroundColor);
+  background-color: pvar(--mainBackgroundColor);
+
   .dropdown-header {
     @include padding-left(1rem);
   }
@@ -96,14 +99,19 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   .dropdown-item {
     padding: 3px 15px;
 
+    color: pvar(--mainForegroundColor);
+    background-color: pvar(--mainBackgroundColor);
+
     &.active {
       color: pvar(--mainBackgroundColor) !important;
       background-color: pvar(--mainHoverColor);
       opacity: 0.9;
     }
 
-    &:active {
+    a:active,
+    &:hover {
       color: pvar(--mainForegroundColor) !important;
+      background-color: pvar(--mainBackgroundHoverColor);
     }
 
     &::after {
@@ -117,7 +125,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   a {
     @include disable-default-a-behaviour;
-    color: #000 !important;
   }
 }
 
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 1cd7a6058..90cdcf3ed 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -28,3 +28,7 @@
 .peertube-radio-container {
   @include peertube-radio-container;
 }
+
+.muted {
+  color: pvar(--greyForegroundColor) !important;
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 291bff6db..8de23e64d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -124,8 +124,8 @@
 @mixin peertube-textarea ($width, $height) {
   @include peertube-input-text($width);
 
-  color: pvar(--textareaForegroundColor);
-  background-color: pvar(--textareaBackgroundColor);
+  color: pvar(--textareaForegroundColor) !important;
+  background-color: pvar(--textareaBackgroundColor) !important;
   height: $height;
   padding: 5px 15px;
   font-size: 15px;
@@ -207,7 +207,7 @@
 @mixin grey-button {
   @include button-focus($grey-button-outline-color);
 
-  background-color: $grey-background-color;
+  background-color: pvar(--greyBackgroundColor);
   color: pvar(--greyForegroundColor);
 
   &:hover,
@@ -216,7 +216,7 @@
   &[disabled],
   &.disabled {
     color: pvar(--greyForegroundColor);
-    background-color: $grey-background-hover-color;
+    background-color: pvar(--greySecondaryBackgroundColor);
   }
 
   &[disabled],
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index f68f4e18d..fd1b137dc 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -18,7 +18,9 @@ $grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
 $main-color: hsl(24, 90%, 50%);
 $main-color-lighter: lighten($main-color, 10%);
 $main-color-lightest: lighten($main-color, 40%);
+
 $main-hover-color: lighten($main-color, 5%);
+$main-background-hover-color: #e9ecef;
 
 $secondary-color: hsl(187, 77%, 34%);
 
@@ -109,6 +111,7 @@ $variables: (
   --mainColorLightest: var(--mainColorLightest),
 
   --mainHoverColor: var(--mainHoverColor),
+  --mainBackgroundHoverColor: var(--mainBackgroundHoverColor),
 
   --mainBackgroundColor: var(--mainBackgroundColor),
   --mainForegroundColor: var(--mainForegroundColor),
@@ -117,6 +120,7 @@ $variables: (
 
   --greyForegroundColor: var(--greyForegroundColor),
   --greyBackgroundColor: var(--greyBackgroundColor),
+  --greySecondaryBackgroundColor: var(--greySecondaryBackgroundColor),
 
   --menuBackgroundColor: var(--menuBackgroundColor),
   --menuForegroundColor: var(--menuForegroundColor),
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index df0e0aaf4..f4c908da3 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -27,6 +27,11 @@ $ng-select-value-font-size: 15px;
     }
   }
 
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    color: pvar(--mainForegroundColor);
+    background-color: pvar(--mainBackgroundColor);
+  }
+
   .ng-select-container {
     background-color: pvar(--inputBackgroundColor);
   }