diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts
index c5886a3..e7d3ef5 100644
--- a/src/app/pages/customization/background-upload.component.ts
+++ b/src/app/pages/customization/background-upload.component.ts
@@ -26,6 +26,7 @@ declare var UIkit;
            class="uk-float-right  uk-border-rounded uk-margin-top uk-margin-right uk-background-muted uk-button uk-button-link">
           <icon name="delete" [defaultSize]="true" [flex]="true"></icon>
         </a>
+        <div class="uk-text-small uk-margin-large-top uk-text-center" [class.uk-light]="!light">Lorem ipsum dolor sit amet...</div>
       </div>
     </div>
     <div *ngIf="background.imageFile" class="uk-margin-top">
@@ -51,7 +52,7 @@ export class BackgroundUploadComponent implements OnInit {
   @Input() oldBackground;
   // @Input() light:boolean;
   @Input() communityId: string = "";
-  
+  @Input() light:boolean; //fonts mode
   public file: File;
   // public photo: string | ArrayBuffer;
   private maxsize: number = 2000 * 1024;
diff --git a/src/app/pages/customization/color.component.ts b/src/app/pages/customization/color.component.ts
index f2fb9cd..094100e 100644
--- a/src/app/pages/customization/color.component.ts
+++ b/src/app/pages/customization/color.component.ts
@@ -17,7 +17,7 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
       </div>
     </div>    
 
-    <div class="uk-text-warning uk-text-xsmall uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</div>
+    <div class="uk-text-warning uk-text-xsmall uk-margin-small-left" [class.uk-invisible]="!warningForContrast(color)">Contrast ratio may be too low.</div>
   `,
   styles:[
     `
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
index f532290..62831e6 100644
--- a/src/app/pages/customization/customization.component.html
+++ b/src/app/pages/customization/customization.component.html
@@ -207,11 +207,35 @@
       <background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
                   [light]="true"></background>
       <background label="Hero section" [background]="draftCustomizationOptions.backgrounds.form"
-                  [light]="true"
+                  [light]="draftCustomizationOptions.backgrounds.form.fontsDarkMode"
                   [oldBackground]="publishedCustomizationOptions.backgrounds.form"
                   [communityId]="communityId" description="The area under menu"></background>
-      <div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top uk-flex uk-flex-middle">
-        Hero section image
+      <div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top uk-flex uk-flex-middle uk-heading-divider">
+        Hero section
+      </div>
+      <div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-medium-top uk-flex uk-flex-middle">
+        Fonts
+        <a *ngIf="( publishedCustomizationOptions.backgrounds.form.fontsDarkMode != draftCustomizationOptions.backgrounds.form.fontsDarkMode  )
+                  && draftCustomizationOptions.backgroundsIsCustom"
+           (click)="draftCustomizationOptions.backgrounds.form.fontsDarkMode=publishedCustomizationOptions.backgrounds.form.fontsDarkMode;" class="uk-margin-small-left uk-button-link"
+           uk-tooltip="title:<div class='uk-width-large'>Reset to previously saved options</div>">
+          <icon name="settings_backup_restore" flex="true"></icon>
+        </a>
+      </div>
+      <div class="uk-margin-small-top">
+        <span>Dark mode </span>
+        <span>
+                  <mat-slide-toggle class="uk-margin-large-left"
+                                    [checked]="draftCustomizationOptions.backgrounds.form.fontsDarkMode"
+                                    (change)="draftCustomizationOptions.backgrounds.form.fontsDarkMode=!draftCustomizationOptions.backgrounds.form.fontsDarkMode;"
+                                    [attr.uk-tooltip]="'title:<div class=\'uk-width-large\'>' +
+                        (draftCustomizationOptions.backgrounds.form.fontsDarkMode?'Change to light color mode if the hero section background is dark':'Change to dark mode if the hero section background is light')+'</div>'"
+                  >
+                  </mat-slide-toggle>
+                  </span>
+      </div>
+      <div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-medium-top uk-flex uk-flex-middle">
+        Image
         <a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions)  )
                   && draftCustomizationOptions.backgroundsIsCustom"
            (click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left uk-button-link"
@@ -222,7 +246,7 @@
       <div class="uk-margin-medium-bottom">
       <background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
                          [oldBackground]="publishedCustomizationOptions.backgrounds.form"
-                         [communityId]="communityId"></background-upload>
+                         [communityId]="communityId" [light]="draftCustomizationOptions.backgrounds.form.fontsDarkMode" ></background-upload>
       </div>
     </div>
   </div>