//Add the switch of colors for the footer of the playground

Playground/css/index.css

@@ -421,9 +421,15 @@ body {
     cursor: pointer;
     background-color: white;
 }
-.button:hover span {
+
+.button.languageJS:hover span {
     color: #3f3461;
 }
+
+.button.languageTS:hover span {
+    color: #bb464b;
+}
+
 .languageJS .button:hover img {
     filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
 }
@@ -640,7 +646,7 @@ body {
     height:35px;
     width:100%;
     line-height:35px;
-    background-color: #201936;
+
 }
 
 .navbarBottom #statusBar {
@@ -650,6 +656,10 @@ body {
     padding-left:20px;
 }
 
+.navbarBottom.languageTS #statusBar {
+    color: #3f3461;
+}
+
 .navbarBottom .links {
     position:absolute;
     right: 0;
@@ -661,11 +671,13 @@ body {
     display: inline-block;
     line-height: 35px;
     font-size: 16px;
-    color: white;
 }
+
 .navbarBottom .links .link:hover {
-    background-color:#3F3461;
+    background-color:white;
+    color: #3f3461;
 }
+
 .navbarBottom .links .link a {
     text-decoration: none;
     line-height: 35px;
@@ -674,6 +686,16 @@ body {
     color: white;
 }
 
+.navbarBottom.languageJS .links .link a:hover {
+    background-color:white;
+    color: #3f3461;
+}
+
+.navbarBottom.languageTS .links .link a:hover {
+    background-color:white;
+    color: #bb464b;
+}
+
 /* Save form & co */
 .save-layer {
     display: none;

Playground/js/settingsPG.js

@@ -17,7 +17,10 @@ class SettingsPG {
             '.navbar .select .toDisplay .subSelect .toDisplaySub',
             '#fpsLabel',
             '.save-form',
-            '#switchWrapper'
+            '#switchWrapper',
+            '.navbarBottom',
+            '.navbarBottom .links .link a',
+            '.button'
         ];
         // The elements that will color with theme
         this.elementToTheme = [