Skip to content

Commit cbe603a

Browse files
jbickerAkos Kitta
jbicker
authored and
Akos Kitta
committed
Updated Arduino App to new theming system
Signed-off-by: Jan Bicker <jan.bicker@typefox.io>
1 parent b220ce4 commit cbe603a

18 files changed

+527
-616
lines changed

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

Lines changed: 188 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,189 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
577579
return undefined;
578580
}
579581

582+
registerColors(colors: ColorRegistry): void {
583+
colors.register(
584+
{
585+
id: 'arduino.base',
586+
defaults: {
587+
dark: '#616161',
588+
light: '#616161',
589+
hc: '#FFFFFF'
590+
},
591+
description: 'Base layout color.'
592+
},
593+
{
594+
id: 'arduino.toolbarTooltip',
595+
defaults: {
596+
dark: '#616161',
597+
light: '#616161',
598+
hc: '#FFFFFF'
599+
},
600+
description: 'The color of the toolbar tooltip (shown next to the buttons).'
601+
},
602+
{
603+
id: 'arduino.editorMargin',
604+
defaults: {
605+
dark: '#2e2e2e',
606+
light: '#EEEEEE',
607+
hc: 'contrastBorder'
608+
},
609+
description: 'The color of the border which separates line numbers from code area.'
610+
},
611+
{
612+
id: 'arduino.dialogTitle',
613+
defaults: {
614+
dark: 'foreground',
615+
light: 'foreground',
616+
hc: 'contrastBorder'
617+
},
618+
description: 'The color of a dialog title (e.g. in board selector dialog).'
619+
},
620+
{
621+
id: 'arduino.select',
622+
defaults: {
623+
624+
},
625+
description: 'Color of background and border of select component (in serial monitor).'
626+
},
627+
{
628+
id: 'arduino.selectItemHoverBackground',
629+
defaults: {
630+
light: '#d7eaf8',
631+
dark: '#24455e'
632+
},
633+
description: 'Color of background of hovered Item in select component (in serial monitor).'
634+
},
635+
{
636+
id: 'arduino.dialogSecondaryTitle',
637+
defaults: {
638+
dark: '#7f8c8d',
639+
light: '#7f8c8d'
640+
},
641+
description: 'Color of secondary titles in Arduino Dialogs.'
642+
},
643+
{
644+
id: 'arduino.secondaryButtonShadow',
645+
defaults: {
646+
dark: '#95a5a6',
647+
light: '#95a5a6'
648+
},
649+
description: 'Color of secondary button shadow.'
650+
},
651+
{
652+
id: 'arduino.buttonShadow',
653+
defaults: {
654+
dark: '#006468',
655+
light: '#006468'
656+
},
657+
description: 'Color of button shadow.'
658+
},
659+
{
660+
id: 'arduino.toolbarItemForeground',
661+
defaults: {
662+
dark: 'button.foreground',
663+
light: 'button.foreground'
664+
},
665+
description: 'Foreground color of toolbar items.'
666+
},
667+
{
668+
id: 'arduino.boardSelectorBackground',
669+
defaults: {
670+
dark: 'editorWidget.background',
671+
light: 'editorWidget.background',
672+
hc: 'editorWidget.background'
673+
},
674+
description: 'Background color of board selector toolbar item.'
675+
},
676+
{
677+
id: 'arduino.boardSelectorHoverBackground',
678+
defaults: {
679+
dark: '#383838',
680+
light: '#dae2e4'
681+
},
682+
description: 'Background color of board selector toolbar item.'
683+
},
684+
{
685+
id: 'arduino.boardSelectorBorder',
686+
defaults: {
687+
dark: '#757575',
688+
light: '#e0e0e0'
689+
},
690+
description: 'Border color of board selector toolbar item.'
691+
},
692+
{
693+
id: 'arduino.boardSelectorCheck',
694+
defaults: {
695+
dark: '#259fd8',
696+
light: '#2b75c0'
697+
},
698+
description: 'Color of board selector toolbar check item.'
699+
},
700+
{
701+
id: 'arduino.listOddItem',
702+
defaults: {
703+
dark: '#1d1d1d',
704+
light: '#ffffff'
705+
},
706+
description: 'Backgroundcolor of item with odd number in list widget'
707+
},
708+
{
709+
id: 'arduino.listEvenItem',
710+
defaults: {
711+
dark: '#252526',
712+
light: '#f7f9f9'
713+
},
714+
description: 'Backgroundcolor of item with even number in list widget'
715+
},
716+
{
717+
id: 'arduino.listItemHoverBackground',
718+
defaults: {
719+
dark: '#333333',
720+
light: '#ececec'
721+
},
722+
description: 'Backgroundcolor of hovered item in list widget'
723+
},
724+
{
725+
id: 'arduino.listItemSecondaryForeground',
726+
defaults: {
727+
dark: '#9e9e9e',
728+
light: '#9e9e9e'
729+
},
730+
description: 'Backgroundcolor of hovered item in list widget'
731+
},
732+
{
733+
id: 'arduino.listItemInstalledBadge',
734+
defaults: {
735+
dark: '#259fd8',
736+
light: '#2b75c0'
737+
},
738+
description: 'Color of badge for installed list items.'
739+
},
740+
{
741+
id: 'arduino.listItemInfoLinkForeground',
742+
defaults: {
743+
dark: '#2196f3',
744+
light: '#2196f3'
745+
},
746+
description: 'Color of info link in list items.'
747+
},
748+
{
749+
id: 'arduino.bottomPanelTabBackground',
750+
defaults: {
751+
dark: 'editorGroupHeader.tabsBackground',
752+
light: 'editorGroupHeader.tabsBackground'
753+
},
754+
description: 'Color of info link in list items.'
755+
},
756+
{
757+
id: 'arduino.toolbarToggleBackground',
758+
defaults: {
759+
dark: '#757575',
760+
light: '#9e9e9e'
761+
},
762+
description: 'Color of active toggles (as in serial monitor toolbar).'
763+
}
764+
);
765+
}
766+
580767
}

‎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: 'Arduino Light Theme',
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).to(ArduinoWorkspaceService).inSingletonScope();
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-arduino-selectItemHoverBackground)',
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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,42 @@
8585
"editor.foreground": "#434f54",
8686
"editorWhitespace.foreground": "#BFBFBF",
8787
"editor.lineHighlightBackground": "#434f5410",
88-
"editor.selectionBackground": "#ffcb00"
88+
"editor.selectionBackground": "#ffcb00",
89+
"focusBorder": "#4db7bb99",
90+
"menubar.selectionBackground": "#ffffff",
91+
"menubar.selectionForeground": "#212121",
92+
"menu.selectionBackground": "#dae3e3",
93+
"menu.selectionForeground": "#212121",
94+
"editorGroupHeader.tabsBackground": "#f7f9f9",
95+
"button.background": "#4db7bb",
96+
"titleBar.activeBackground": "#006468",
97+
"titleBar.activeForeground": "#ffffff",
98+
"secondaryButton.background": "#b5c8c9",
99+
"secondaryButton.hoverBackground": "#dae3e3",
100+
"terminal.background": "#000000",
101+
"terminal.foreground": "#e0e0e0",
102+
"dropdown.border": "#ececec",
103+
"dropdown.background": "#ececec",
104+
"warningForeground": "#434f54",
105+
"activityBar.background": "#ececec",
106+
"activityBar.foreground": "#616161",
107+
"statusBar.background": "#006468",
108+
"arduino.base": "#006468",
109+
"arduino.dialogTitle": "#00979d",
110+
"arduino.select": "#ececec",
111+
"arduino.selectItemHoverBackground": "#4db7bb66",
112+
"list.hoverBackground": "#ececec",
113+
"arduino.secondaryButtonShadow": "#95a5a6",
114+
"arduino.buttonShadow": "#006468",
115+
"arduino.boardSelectorCheck": "#4db7bb",
116+
"arduino.listItemInstalledBadge": "#4db7bb",
117+
"inputValidation.warningBackground": "#ffb300",
118+
"arduino.listItemInfoLinkForeground": "#17a1a5",
119+
"arduino.toolbarItemForeground": "#006468",
120+
"arduino.toolbarTooltip": "#e0e0e0",
121+
"arduino.bottomPanelTabBackground": "#ffffff",
122+
"arduino.toolbarToggleBackground": "#b5c8c9"
89123
},
124+
"type": "light",
90125
"name": "Arduino"
91126
}

‎arduino-ide-extension/src/browser/monitor/monitor-widget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export class SerialMonitorSendInput extends React.Component<SerialMonitorSendInp
209209
return <input
210210
ref={this.setRef}
211211
type='text'
212-
className={this.props.monitorConfig ? '' : 'warning'}
212+
className={`theia-input ${this.props.monitorConfig ? '' : 'warning'}`}
213213
placeholder={this.placeholder}
214214
value={this.state.text}
215215
onChange={this.onChange}

0 commit comments

Comments
 (0)