Port all dark themes to the modern theme design

newIDE/app/.storybook/preview.js

@@ -11,7 +11,7 @@ export const globalTypes = {
     toolbar: {
       icon: 'circlehollow',
       // See theme names in ThemeRegistry.js
-      items: ['GDevelop default Dark', 'GDevelop default',  'Dark', 'Nord', 'Solarized Dark', 'One Dark'],
+      items: ['GDevelop default Dark', 'GDevelop default', 'Blue Dark', 'Nord', 'Solarized Dark', 'One Dark'],
       showName: true,
     },
   },

newIDE/app/src/UI/Theme/BlueDarkTheme/index.js

@@ -5,6 +5,7 @@ import './DarkThemeVariables.css';
 
 export default createGdevelopTheme({
   styles,
+  isModern: true,
   rootClassNameIdentifier: 'DarkTheme',
   paletteType: 'dark',
 });

newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json

@@ -2,18 +2,20 @@
   "theme": {
     "primary": {
       "color": {
-        "value": "{gdevelop.color.blue.value}"
+        "value": "#6BAFFF",
+        "comment": "Palette/Blue/40"
       },
       "text-contrast-color": {
-        "value": "#fff"
+        "value": "#FFFFFF"
       }
     },
     "secondary": {
       "color": {
-        "value": "#EEE"
+        "value": "#006DEE",
+        "comment": "Palette/Blue/60"
       },
       "text-contrast-color": {
-        "value": "#000"
+        "value": "#FFFFFF"
       }
     },
     "surface": {
@@ -193,7 +195,7 @@
   },
   "tabs": {
     "background-color": {
-      "value": "#3c4698"
+      "value": "#4C5361"
     }
   },
   "event-sheet": {

newIDE/app/src/UI/Theme/DefaultTheme/index.js

@@ -4,6 +4,7 @@ import './DefaultThemeVariables.css';
 
 export default createGdevelopTheme({
   styles,
+  isModern: false,
   rootClassNameIdentifier: 'DefaultTheme',
   paletteType: 'light',
 });

newIDE/app/src/UI/Theme/NordTheme/index.js

@@ -5,6 +5,7 @@ import './NordThemeVariables.css';
 
 export default createGdevelopTheme({
   styles,
+  isModern: true,
   rootClassNameIdentifier: 'NordTheme',
   paletteType: 'dark',
   gdevelopIconsCSSFilter: 'hue-rotate(-15deg) saturate(57%) brightness(120%)',

newIDE/app/src/UI/Theme/NordTheme/theme.json

@@ -10,10 +10,10 @@
     },
     "secondary": {
       "color": {
-        "value": "#EEE"
+        "value": "#5E81AC"
       },
       "text-contrast-color": {
-        "value": "#000"
+        "value": "#fff"
       }
     },
     "surface": {
@@ -193,7 +193,7 @@
   },
   "tabs": {
     "background-color": {
-      "value": "#81A1C1"
+      "value": "#4C566A"
     }
   },
   "event-sheet": {

newIDE/app/src/UI/Theme/OneDarkTheme/index.js

@@ -5,6 +5,7 @@ import './OneDarkThemeVariables.css';
 
 export default createGdevelopTheme({
   styles,
+  isModern: true,
   rootClassNameIdentifier: 'OneDarkTheme',
   paletteType: 'dark',
   gdevelopIconsCSSFilter: 'hue-rotate(-10deg) saturate(50%)',

newIDE/app/src/UI/Theme/SolarizedDarkTheme/index.js

@@ -5,6 +5,7 @@ import './SolarizedDarkThemeVariables.css';
 
 export default createGdevelopTheme({
   styles,
+  isModern: true,
   rootClassNameIdentifier: 'SolarizedDarkTheme',
   paletteType: 'dark',
   gdevelopIconsCSSFilter: 'hue-rotate(-15deg) saturate(70%) brightness(90%)',

newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json

@@ -2,7 +2,7 @@
   "theme": {
     "primary": {
       "color": {
-        "value": "#047AA6"
+        "value": "#2799b9"
       },
       "text-contrast-color": {
         "value": "#fff"
@@ -10,10 +10,10 @@
     },
     "secondary": {
       "color": {
-        "value": "#EEE"
+        "value": "#047AA6"
       },
       "text-contrast-color": {
-        "value": "#000"
+        "value": "#fff"
       }
     },
     "surface": {
@@ -193,7 +193,7 @@
   },
   "tabs": {
     "background-color": {
-      "value": "#047AA6"
+      "value": "#586e75"
     }
   },
   "event-sheet": {

newIDE/app/src/UI/Theme/ThemeRegistry.js

@@ -1,6 +1,6 @@
 // This file is generated by create-new-theme.js script
 import DefaultTheme from './DefaultTheme';
-import DarkTheme from './DarkTheme';
+import BlueDarkTheme from './BlueDarkTheme';
 import NordTheme from './NordTheme';
 import SolarizedDarkTheme from './SolarizedDarkTheme';
 import OneDarkTheme from './OneDarkTheme';
@@ -10,10 +10,10 @@ import DefaultDarkTheme from './DefaultDarkTheme';
 export const themes = {
   // "Modern" themes:
   ['GDevelop default Dark']: DefaultDarkTheme,
-  // Old themes still based on the "old" components:
-  ['GDevelop default']: DefaultTheme,
-  ['Dark']: DarkTheme,
+  ['Blue Dark']: BlueDarkTheme,
   ['Nord']: NordTheme,
   ['Solarized Dark']: SolarizedDarkTheme,
   ['One Dark']: OneDarkTheme,
+  // Old themes still based on the "old" components:
+  ['GDevelop default']: DefaultTheme,
 };