allow keyboard navigation in themepicker

src/app/components/shared/footer/footer.component.html

@@ -49,19 +49,14 @@
       </span>
     </button>
 
-    <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
-      <button
-        *ngFor="let theme of themes"
-        (click)="changeTheme(theme);"
-        matRipple [matRippleColor]="'rgba(0,0,0,0.1)'"
-        title="{{theme.toString(getLanguage())}}"
-        aria-label="test">
+    <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false" cdkTrapFocus>
+      <button *ngFor="let theme of themes" mat-menu-item style="height:50px;" (click)="changeTheme(theme)">
         <div class="btnContent">
           <div class="btnColorIcon" [ngStyle]="{
-                  'background-color':theme.getPreviewColor()}">
+'background-color':theme.getPreviewColor()}">
             <div class="checked" [ngClass]="{
-                        'checked_true':theme.key===themeClass,
-                        'checked_false':theme.key!==themeClass}">
+'checked_true':theme.key===themeClass,
+'checked_false':theme.key!==themeClass}">
               <mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
                 checked
               </mat-icon>

src/app/components/shared/footer/footer.component.scss

@@ -167,8 +167,7 @@ mat-icon {
   width:calc( 100% - 50px );
   float:right;
   position:relative;
-  top:50%;
-  transform:translateY(-50%);
+  top:-10px;
 }
 
 .btnContent>.btnAppend>.title{