Skip to content

Commit ef74b04

Browse files
kittaakoskittaakos
authored
Merge pull request #98 from bcmi-labs/theme-update-vol2
Theme update vol2
2 parents 1d98e79 + 4b859c2 commit ef74b04

25 files changed

+1778
-1741
lines changed

‎.gitignore

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ downloads/
66
build/
77
!electron/build/
88
src-gen/
9-
browser-app/webpack.config.js
10-
electron-app/webpack.config.js
9+
*webpack.config.js
10+
.DS_Store
1111
/workspace/static
1212
.DS_Store
1313
# switching from `electron` to `browser` in dev mode.

‎arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
4242
import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
4343
import { FileNavigatorCommands } from '@theia/navigator/lib/browser/navigator-contribution';
4444
import { EditorMode } from './editor-mode';
45+
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
46+
import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
4547

4648
export namespace ArduinoMenus {
4749
export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
@@ -57,7 +59,7 @@ export namespace ArduinoToolbarContextMenu {
5759

5860
@injectable()
5961
export class ArduinoFrontendContribution implements FrontendApplicationContribution,
60-
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution {
62+
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution, ColorContribution {
6163

6264
@inject(MessageService)
6365
protected readonly messageService: MessageService;
@@ -577,4 +579,34 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
577579
return undefined;
578580
}
579581

582+
registerColors(colors: ColorRegistry): void {
583+
colors.register(
584+
{
585+
id: 'arduino.branding.primary',
586+
defaults: {
587+
dark: 'statusBar.background',
588+
light: 'statusBar.background'
589+
},
590+
description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
591+
},
592+
{
593+
id: 'arduino.branding.secondary',
594+
defaults: {
595+
dark: 'statusBar.background',
596+
light: 'statusBar.background'
597+
},
598+
description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
599+
},
600+
{
601+
id: 'arduino.foreground',
602+
defaults: {
603+
dark: 'editorWidget.background',
604+
light: 'editorWidget.background',
605+
hc: 'editorWidget.background'
606+
},
607+
description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
608+
}
609+
);
610+
}
611+
580612
}

‎arduino-ide-extension/src/browser/arduino-frontend-module.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@ import { ToolOutputServiceClientImpl } from './tool-output/client-service-impl';
2626
import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
2727
import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
2828
import { ArduinoWorkspaceService } from './arduino-workspace-service';
29-
import { ThemeService } from '@theia/core/lib/browser/theming';
30-
import { ArduinoTheme } from './arduino-theme';
3129
import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
3230
import { ArduinoOutlineViewContribution } from './customization/arduino-outline-contribution';
3331
import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
@@ -71,9 +69,18 @@ import { ArduinoAboutDialog } from './customization/arduino-about-dialog';
7169
import { ArduinoShellLayoutRestorer } from './shell/arduino-shell-layout-restorer';
7270
import { EditorMode } from './editor-mode';
7371
import { ListItemRenderer } from './components/component-list/list-item-renderer';
72+
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
73+
import { MonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
7474

7575
const ElementQueries = require('css-element-queries/src/ElementQueries');
7676

77+
MonacoThemingService.register({
78+
id: 'arduinoTheme',
79+
label: 'Light (Arduino)',
80+
uiTheme: 'vs',
81+
json: require('../../src/browser/data/arduino.color-theme.json')
82+
});
83+
7784
export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
7885
ElementQueries.listen();
7986
ElementQueries.init();
@@ -85,6 +92,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
8592
bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
8693
bind(KeybindingContribution).toService(ArduinoFrontendContribution);
8794
bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
95+
bind(ColorContribution).toService(ArduinoFrontendContribution);
8896

8997
bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
9098
bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
@@ -200,9 +208,6 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
200208
bind(ArduinoWorkspaceService).toSelf().inSingletonScope();
201209
rebind(WorkspaceService).toService(ArduinoWorkspaceService);
202210

203-
const themeService = ThemeService.get();
204-
themeService.register(...ArduinoTheme.themes);
205-
206211
// Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
207212
bind(EditorMode).toSelf().inSingletonScope();
208213
bind(FrontendApplicationContribution).toService(EditorMode);

‎arduino-ide-extension/src/browser/arduino-theme.ts

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎arduino-ide-extension/src/browser/boards/boards-config.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ export class BoardsConfig extends React.Component<BoardsConfig.Props, BoardsConf
207207

208208
return <React.Fragment>
209209
<div className='search'>
210-
<input type='search' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
210+
<input type='search' className='theia-input' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
211211
<i className='fa fa-search'></i>
212212
</div>
213213
<div className='boards list'>

‎arduino-ide-extension/src/browser/components/arduino-select.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class ArduinoSelect<T> extends Select<T> {
1616
control: styles => ({
1717
...styles,
1818
minWidth: 120,
19-
color: 'var(--theia-ui-font-color1)'
19+
color: 'var(--theia-foreground)'
2020
}),
2121
dropdownIndicator: styles => ({
2222
...styles,
@@ -45,7 +45,7 @@ export class ArduinoSelect<T> extends Select<T> {
4545
// `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
4646
// color when selecting an option in the select by clicking and then not releasing the button.
4747
// https://react-select.com/styles#overriding-the-theme
48-
primary50: 'var(--theia-accent-color4)',
48+
primary50: 'var(--theia-list-activeSelectionBackground)',
4949
}
5050
});
5151
const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;

‎arduino-ide-extension/src/browser/components/component-list/list-item-renderer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
5151
const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>;
5252
const onClickInstall = () => install(item);
5353
const installButton = item.installable &&
54-
<button className='install' onClick={onClickInstall}>INSTALL</button>;
54+
<button className='theia-button install' onClick={onClickInstall}>INSTALL</button>;
5555

5656
const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
5757
const version = event.target.value;
@@ -68,6 +68,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
6868
return <label>{availableVersions[0]}</label>
6969
} else {
7070
return <select
71+
className='theia-select'
7172
value={input.selectedVersion}
7273
onChange={onSelectChange}>
7374
{

‎arduino-ide-extension/src/browser/components/component-list/search-bar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export class SearchBar extends React.Component<SearchBar.Props> {
1010
render(): React.ReactNode {
1111
return <input
1212
ref={this.setRef}
13-
className={SearchBar.Styles.SEARCH_BAR_CLASS}
13+
className={`theia-input ${SearchBar.Styles.SEARCH_BAR_CLASS}`}
1414
type='text'
1515
placeholder='Filter your search...'
1616
size={1}

‎arduino-ide-extension/src/browser/data/arduino.color-theme.json

Lines changed: 114 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,115 @@
11
{
2-
"tokenColors": [
3-
{
4-
"settings": {
5-
"foreground": "#434f54"
6-
}
7-
},
8-
{
9-
"name": "Comments",
10-
"scope": "comment",
11-
"settings": {
12-
"foreground": "#95a5a6cc"
13-
}
14-
},
15-
{
16-
"name": "Keywords Attributes",
17-
"scope": [
18-
"storage",
19-
"support",
20-
"string.quoted.single.c"
21-
],
22-
"settings": {
23-
"foreground": "#00979D"
24-
}
25-
},
26-
{
27-
"name": "literal",
28-
"scope": [
29-
"meta.function.c",
30-
"entity.name.function",
31-
"meta.function-call.c"
32-
],
33-
"settings": {
34-
"foreground": "#D35400"
35-
}
36-
},
37-
{
38-
"name": "punctuation",
39-
"scope": [
40-
"punctuation.section",
41-
"meta.function-call.c",
42-
"meta.block.c",
43-
"meta.function.c",
44-
"entity.name.function.preprocessor.c",
45-
"meta.preprocessor.macro.c"
46-
],
47-
"settings": {
48-
"foreground": "#434f54"
49-
}
50-
},
51-
{
52-
"name": "strings",
53-
"scope": [
54-
"string.quoted.double"
55-
],
56-
"settings": {
57-
"foreground": "#005C5F"
58-
}
59-
},
60-
{
61-
"name": "meta keywords",
62-
"scope": [
63-
"keyword.control",
64-
"meta.preprocessor.c"
65-
],
66-
"settings": {
67-
"foreground": "#728E00"
68-
}
69-
},
70-
{
71-
"name": "numeric preprocessor",
72-
"scope": [
73-
"meta.preprocessor.macro.c",
74-
"constant.numeric.preprocessor.c",
75-
"meta.preprocessor.c"
76-
],
77-
"settings": {
78-
"foreground": "#434f54"
79-
}
80-
}
81-
],
82-
"colors": {
83-
"editor.background": "#FFFFFF",
84-
"editorCursor.foreground": "#434f54",
85-
"editor.foreground": "#434f54",
86-
"editorWhitespace.foreground": "#BFBFBF",
87-
"editor.lineHighlightBackground": "#434f5410",
88-
"editor.selectionBackground": "#ffcb00"
89-
},
90-
"name": "Arduino"
91-
}
2+
"tokenColors": [
3+
{
4+
"settings": {
5+
"foreground": "#434f54"
6+
}
7+
},
8+
{
9+
"name": "Comments",
10+
"scope": "comment",
11+
"settings": {
12+
"foreground": "#95a5a6cc"
13+
}
14+
},
15+
{
16+
"name": "Keywords Attributes",
17+
"scope": [
18+
"storage",
19+
"support",
20+
"string.quoted.single.c"
21+
],
22+
"settings": {
23+
"foreground": "#00979D"
24+
}
25+
},
26+
{
27+
"name": "literal",
28+
"scope": [
29+
"meta.function.c",
30+
"entity.name.function",
31+
"meta.function-call.c"
32+
],
33+
"settings": {
34+
"foreground": "#D35400"
35+
}
36+
},
37+
{
38+
"name": "punctuation",
39+
"scope": [
40+
"punctuation.section",
41+
"meta.function-call.c",
42+
"meta.block.c",
43+
"meta.function.c",
44+
"entity.name.function.preprocessor.c",
45+
"meta.preprocessor.macro.c"
46+
],
47+
"settings": {
48+
"foreground": "#434f54"
49+
}
50+
},
51+
{
52+
"name": "strings",
53+
"scope": [
54+
"string.quoted.double"
55+
],
56+
"settings": {
57+
"foreground": "#005C5F"
58+
}
59+
},
60+
{
61+
"name": "meta keywords",
62+
"scope": [
63+
"keyword.control",
64+
"meta.preprocessor.c"
65+
],
66+
"settings": {
67+
"foreground": "#728E00"
68+
}
69+
},
70+
{
71+
"name": "numeric preprocessor",
72+
"scope": [
73+
"meta.preprocessor.macro.c",
74+
"constant.numeric.preprocessor.c",
75+
"meta.preprocessor.c"
76+
],
77+
"settings": {
78+
"foreground": "#434f54"
79+
}
80+
}
81+
],
82+
"colors": {
83+
"list.highlightForeground": "#006468",
84+
"list.activeSelectionBackground": "#006468",
85+
"editor.background": "#ffffff",
86+
"editorCursor.foreground": "#434f54",
87+
"editor.foreground": "#434f54",
88+
"editorWhitespace.foreground": "#bfbfbf",
89+
"editor.lineHighlightBackground": "#434f5410",
90+
"editor.selectionBackground": "#ffcb00",
91+
"focusBorder": "#4db7bb99",
92+
"menubar.selectionBackground": "#ffffff",
93+
"menubar.selectionForeground": "#212121",
94+
"menu.selectionBackground": "#dae3e3",
95+
"menu.selectionForeground": "#212121",
96+
"editorGroupHeader.tabsBackground": "#f7f9f9",
97+
"button.background": "#4db7bb",
98+
"titleBar.activeBackground": "#006468",
99+
"titleBar.activeForeground": "#ffffff",
100+
"terminal.background": "#000000",
101+
"terminal.foreground": "#e0e0e0",
102+
"dropdown.border": "#ececec",
103+
"dropdown.background": "#ececec",
104+
"activityBar.background": "#ececec",
105+
"activityBar.foreground": "#616161",
106+
"statusBar.background": "#006468",
107+
"secondaryButton.background": "#b5c8c9",
108+
"secondaryButton.hoverBackground": "#dae3e3",
109+
"arduino.branding.primary": "#00979d",
110+
"arduino.branding.secondary": "#b5c8c9",
111+
"arduino.foreground": "#edf1f1"
112+
},
113+
"type": "light",
114+
"name": "Arduino"
115+
}

0 commit comments

Comments
 (0)