Skip to content

Commit 2392cf1

Browse files
4ian4ian
committed
Adapt in-game toolbar colors to the editor theme
1 parent fe98687 commit 2392cf1

File tree

4 files changed

+96
-48
lines changed

4 files changed

+96
-48
lines changed

‎GDJS/Runtime/InGameEditor/InGameEditor.tsx‎

Lines changed: 71 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,20 @@ namespace gdjs {
102102
export type InGameEditorSettings = {
103103
theme: {
104104
iconButtonSelectedBackgroundColor: string;
105+
iconButtonSelectedColor: string;
106+
toolbarBackgroundColor: string;
107+
toolbarSeparatorColor: string;
108+
textColorPrimary: string;
105109
};
106110
};
107111

108112
const defaultInGameEditorSettings: InGameEditorSettings = {
109113
theme: {
110-
iconButtonSelectedBackgroundColor: '#C9B6FC',
114+
iconButtonSelectedBackgroundColor: 'black',
115+
iconButtonSelectedColor: 'black',
116+
toolbarBackgroundColor: 'black',
117+
toolbarSeparatorColor: 'black',
118+
textColorPrimary: 'black',
111119
},
112120
};
113121

@@ -671,6 +679,22 @@ namespace gdjs {
671679
'--in-game-editor-theme-icon-button-selected-background-color',
672680
this._inGameEditorSettings.theme.iconButtonSelectedBackgroundColor
673681
);
682+
rootElement.style.setProperty(
683+
'--in-game-editor-theme-icon-button-selected-color',
684+
this._inGameEditorSettings.theme.iconButtonSelectedColor
685+
);
686+
rootElement.style.setProperty(
687+
'--in-game-editor-theme-toolbar-background-color',
688+
this._inGameEditorSettings.theme.toolbarBackgroundColor
689+
);
690+
rootElement.style.setProperty(
691+
'--in-game-editor-theme-toolbar-separator-color',
692+
this._inGameEditorSettings.theme.toolbarSeparatorColor
693+
);
694+
rootElement.style.setProperty(
695+
'--in-game-editor-theme-text-color-primary',
696+
this._inGameEditorSettings.theme.textColorPrimary
697+
);
674698
}
675699

676700
setInGameEditorSettings(inGameEditorSettings: InGameEditorSettings) {
@@ -3222,7 +3246,8 @@ namespace gdjs {
32223246
top: 2px;
32233247
left: 50%;
32243248
transform: translateX(-50%);
3225-
background-color: rgba(0, 0, 0, 0.4);
3249+
background-color: var(--in-game-editor-theme-toolbar-background-color); /* Fallback for old Safari. */
3250+
background-color: color-mix(in srgb, var(--in-game-editor-theme-toolbar-background-color), transparent 30%);
32263251
border-radius: 3px;
32273252
padding: 4px;
32283253
gap: 6px;
@@ -3232,34 +3257,33 @@ namespace gdjs {
32323257
height: 24px;
32333258
border-radius: 4px;
32343259
border: none;
3235-
color: white;
32363260
padding: 0;
3237-
background-color: transparent;
32383261
border-width: 0;
32393262
display: flex;
32403263
align-items: center;
32413264
justify-content: center;
3265+
3266+
background-color: transparent;
32423267
}
3243-
.InGameEditor-Toolbar-Button img {
3268+
.InGameEditor-Toolbar-Button-Icon {
32443269
width: 20px;
32453270
height: 20px;
3271+
display:inline-block;
3272+
background-color: var(--in-game-editor-theme-text-color-primary);
32463273
}
32473274
.InGameEditor-Toolbar-Button:hover:not(.InGameEditor-Toolbar-Button-Active):not(.InGameEditor-Toolbar-Button-Disabled) {
32483275
background-color: rgba(255, 255, 255, 0.08);
32493276
}
32503277
.InGameEditor-Toolbar-Button-Active {
32513278
background-color: var(--in-game-editor-theme-icon-button-selected-background-color);
32523279
}
3253-
.InGameEditor-Toolbar-Button-Active img {
3254-
filter: invert(1);
3255-
}
3256-
.InGameEditor-Toolbar-ButtonIcon {
3257-
color: white;
3280+
.InGameEditor-Toolbar-Button-Active .InGameEditor-Toolbar-Button-Icon {
3281+
background-color: var(--in-game-editor-theme-icon-button-selected-color);
32583282
}
32593283
.InGameEditor-Toolbar-Divider {
32603284
width: 1px;
32613285
height: 24px;
3262-
background-color: rgb(62, 68, 82, 0.2);
3286+
background-color: var(--in-game-editor-theme-toolbar-separator-color);
32633287
}
32643288
`;
32653289
}
@@ -3313,23 +3337,25 @@ namespace gdjs {
33133337
onClick={this._switchToFreeCamera}
33143338
title="Free camera mode"
33153339
>
3316-
<img
3317-
src={this._getSvgIconUrl('InGameEditor-FreeCameraIcon')}
3318-
class="InGameEditor-Toolbar-ButtonIcon"
3319-
alt="Free camera"
3320-
/>
3340+
<span
3341+
class="InGameEditor-Toolbar-Button-Icon"
3342+
style={{
3343+
mask: `url('${this._getSvgIconUrl('InGameEditor-FreeCameraIcon')}') center/contain no-repeat`,
3344+
}}
3345+
></span>
33213346
</button>
33223347
<button
33233348
class="InGameEditor-Toolbar-Button"
33243349
id="orbit-camera-button"
33253350
onClick={this._switchToOrbitCamera}
33263351
title="Orbit camera mode"
33273352
>
3328-
<img
3329-
src={this._getSvgIconUrl('InGameEditor-OrbitCameraIcon')}
3330-
class="InGameEditor-Toolbar-ButtonIcon"
3331-
alt="Free camera"
3332-
/>
3353+
<span
3354+
class="InGameEditor-Toolbar-Button-Icon"
3355+
style={{
3356+
mask: `url('${this._getSvgIconUrl('InGameEditor-OrbitCameraIcon')}') center/contain no-repeat`,
3357+
}}
3358+
></span>
33333359
</button>
33343360
<div class="InGameEditor-Toolbar-Divider" />
33353361
<button
@@ -3338,35 +3364,38 @@ namespace gdjs {
33383364
onClick={() => this._setTransformControlsMode('translate')}
33393365
title="Move (translate) selection"
33403366
>
3341-
<img
3342-
src={this._getSvgIconUrl('InGameEditor-MoveIcon')}
3343-
class="InGameEditor-Toolbar-ButtonIcon"
3344-
alt="Move"
3345-
/>
3367+
<span
3368+
class="InGameEditor-Toolbar-Button-Icon"
3369+
style={{
3370+
mask: `url('${this._getSvgIconUrl('InGameEditor-MoveIcon')}') center/contain no-repeat`,
3371+
}}
3372+
></span>
33463373
</button>
33473374
<button
33483375
class="InGameEditor-Toolbar-Button"
33493376
id="rotate-button"
33503377
onClick={() => this._setTransformControlsMode('rotate')}
33513378
title="Rotate selection"
33523379
>
3353-
<img
3354-
src={this._getSvgIconUrl('InGameEditor-RotateIcon')}
3355-
class="InGameEditor-Toolbar-ButtonIcon"
3356-
alt="Rotate"
3357-
/>
3380+
<span
3381+
class="InGameEditor-Toolbar-Button-Icon"
3382+
style={{
3383+
mask: `url('${this._getSvgIconUrl('InGameEditor-RotateIcon')}') center/contain no-repeat`,
3384+
}}
3385+
></span>
33583386
</button>
33593387
<button
33603388
class="InGameEditor-Toolbar-Button"
33613389
id="scale-button"
33623390
onClick={() => this._setTransformControlsMode('scale')}
33633391
title="Resize selection"
33643392
>
3365-
<img
3366-
src={this._getSvgIconUrl('InGameEditor-ResizeIcon')}
3367-
class="InGameEditor-Toolbar-ButtonIcon"
3368-
alt="Resize"
3369-
/>
3393+
<span
3394+
class="InGameEditor-Toolbar-Button-Icon"
3395+
style={{
3396+
mask: `url('${this._getSvgIconUrl('InGameEditor-ResizeIcon')}') center/contain no-repeat`,
3397+
}}
3398+
></span>
33703399
</button>
33713400
<div class="InGameEditor-Toolbar-Divider" />
33723401
<button
@@ -3375,11 +3404,12 @@ namespace gdjs {
33753404
onClick={this._focusOnSelection}
33763405
title="Focus on selection (F)"
33773406
>
3378-
<img
3379-
src={this._getSvgIconUrl('InGameEditor-FocusIcon')}
3380-
class="InGameEditor-Toolbar-ButtonIcon"
3381-
alt="Focus"
3382-
/>
3407+
<span
3408+
class="InGameEditor-Toolbar-Button-Icon"
3409+
style={{
3410+
mask: `url('${this._getSvgIconUrl('InGameEditor-FocusIcon')}') center/contain no-repeat`,
3411+
}}
3412+
></span>
33833413
</button>
33843414
</div>
33853415
);

‎newIDE/app/src/EmbeddedGame/InGameEditorSettings.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
55
export type InGameEditorSettings = {
66
theme: {
77
iconButtonSelectedBackgroundColor: string,
8+
iconButtonSelectedColor: string,
9+
toolbarBackgroundColor: string,
10+
toolbarSeparatorColor: string,
11+
textColorPrimary: string,
812
},
913
};
1014

@@ -16,14 +20,28 @@ export const useInGameEditorSettings = (): InGameEditorSettings => {
1620
const gdevelopTheme = React.useContext(GDevelopThemeContext);
1721
const iconButtonSelectedBackgroundColor =
1822
gdevelopTheme.iconButton.selectedBackgroundColor;
23+
const iconButtonSelectedColor = gdevelopTheme.iconButton.selectedColor;
24+
const toolbarBackgroundColor = gdevelopTheme.toolbar.backgroundColor;
25+
const toolbarSeparatorColor = gdevelopTheme.toolbar.separatorColor;
26+
const textColorPrimary = gdevelopTheme.text.color.primary;
1927

2028
const inGameEditorSettings = React.useMemo<InGameEditorSettings>(
2129
() => ({
2230
theme: {
2331
iconButtonSelectedBackgroundColor,
32+
iconButtonSelectedColor,
33+
toolbarBackgroundColor,
34+
toolbarSeparatorColor,
35+
textColorPrimary,
2436
},
2537
}),
26-
[iconButtonSelectedBackgroundColor]
38+
[
39+
iconButtonSelectedBackgroundColor,
40+
iconButtonSelectedColor,
41+
toolbarBackgroundColor,
42+
toolbarSeparatorColor,
43+
textColorPrimary,
44+
]
2745
);
2846

2947
return inGameEditorSettings;

‎newIDE/app/src/UI/Theme/RosePineTheme/theme.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,10 @@
146146
}
147147
},
148148
"icon-button": {
149-
"color": {
150-
"value": "#1f1d2e"
151-
},
152149
"selected": {
150+
"color": {
151+
"value": "#1f1d2e"
152+
},
153153
"background-color": {
154154
"value": "#ebbcba"
155155
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,10 @@
147147
}
148148
},
149149
"icon-button": {
150-
"color": {
151-
"value": "#002B36"
152-
},
153150
"selected": {
151+
"color": {
152+
"value": "#002B36"
153+
},
154154
"background-color": {
155155
"value": "#2799b9"
156156
}

0 commit comments

Comments
 (0)