Skip to content

Commit 8a8653d

Browse files
rchiodorchiodo
authored
Rchiodo/allow default theme (#4770)
Allows user to always use the light theme in the Python Interactive Window For #4640 <!-- If an item below does not apply to you, then go ahead and check it off as "done" and strikethrough the text, e.g.: - [x] ~Has unit tests & system/integration tests~ --> - [x] Pull request represents a single change (i.e. not fixing disparate/unrelated things in a single PR) - [x] Title summarizes what is changing - [x] Has a [news entry](https://github.com/Microsoft/vscode-python/tree/master/news) file (remember to thank yourself!) - [ ] Has sufficient logging. - [ ] Has telemetry for enhancements. - [x] Unit tests & system/integration tests are added/updated - [ ] [Test plan](https://github.com/Microsoft/vscode-python/blob/master/.github/test_plan.md) is updated as appropriate - [ ] [`package-lock.json`](https://github.com/Microsoft/vscode-python/blob/master/package-lock.json) has been regenerated by running `npm install` (if dependencies have changed) - [ ] The wiki is updated with any design decisions/details.
1 parent 3e99ea1 commit 8a8653d

File tree

14 files changed

+117
-51
lines changed

14 files changed

+117
-51
lines changed

‎news/1 Enhancements/4640.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Add 'ignoreVscodeTheme' setting to allow a user to skip using the theme for VS Code in the Python Interactive Window.

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -1370,6 +1370,12 @@
13701370
"description": "Allow the Python Interactive window to be shared during a Live Share session",
13711371
"scope": "resource"
13721372
},
1373+
"python.dataScience.ignoreVscodeTheme": {
1374+
"type": "boolean",
1375+
"default": false,
1376+
"description": "Don't use the VS Code theme in the Python Interactive window (requires reload of VS Code). This forces the Python Interactive window to use 'Light +(default light)' and disables matplotlib defaults.",
1377+
"scope": "resource"
1378+
},
13731379
"python.disableInstallationCheck": {
13741380
"type": "boolean",
13751381
"default": false,

‎src/client/common/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,7 @@ export interface IDataScienceSettings {
301301
codeRegularExpression: string;
302302
allowLiveShare?: boolean;
303303
errorBackgroundColor: string;
304+
ignoreVscodeTheme?: boolean;
304305
}
305306

306307
export const IConfigurationService = Symbol('IConfigurationService');

‎src/client/datascience/codeCssGenerator.ts

+29-7
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,28 @@ import * as path from 'path';
88
import * as stripJsonComments from 'strip-json-comments';
99

1010
import { IWorkspaceService } from '../common/application/types';
11-
import { ILogger } from '../common/types';
11+
import { IConfigurationService, ILogger } from '../common/types';
1212
import { EXTENSION_ROOT_DIR } from '../constants';
13-
import { Identifiers } from './constants';
13+
import { DefaultTheme, Identifiers } from './constants';
1414
import { ICodeCssGenerator, IThemeFinder } from './types';
1515

1616
// tslint:disable:no-any
1717

18+
// These are based on the colors generated by 'Default Light+' and are only set when we
19+
// are ignoring themes.
20+
//tslint:disable-next-line:no-multiline-string
21+
const DefaultStyle = `
22+
:root {
23+
--override-widget-background: #f3f3f3;
24+
--override-foreground: #000000;
25+
--override-background: #FFFFFF;
26+
--override-selection-background: #add6ff;
27+
--override-watermark-color: #cccedb;
28+
--override-tabs-background: #f3f3f3;
29+
--override-progress-background: #0066bf;
30+
}
31+
`;
32+
1833
// This class generates css using the current theme in order to colorize code.
1934
//
2035
// NOTE: This is all a big hack. It's relying on the theme json files to have a certain format
@@ -26,14 +41,17 @@ export class CodeCssGenerator implements ICodeCssGenerator {
2641
constructor(
2742
@inject(IWorkspaceService) private workspaceService: IWorkspaceService,
2843
@inject(IThemeFinder) private themeFinder: IThemeFinder,
44+
@inject(IConfigurationService) private configService: IConfigurationService,
2945
@inject(ILogger) private logger: ILogger) {
3046
}
3147

3248
public generateThemeCss = async (): Promise<string> => {
49+
let css : string = '';
3350
try {
3451
// First compute our current theme.
3552
const workbench = this.workspaceService.getConfiguration('workbench');
36-
const theme = workbench.get<string>('colorTheme');
53+
const ignoreTheme = this.configService.getSettings().datascience.ignoreVscodeTheme ? true : false;
54+
const theme = ignoreTheme ? DefaultTheme : workbench.get<string>('colorTheme');
3755
const terminalCursor = workbench.get<string>('terminal.integrated.cursorStyle', 'block');
3856
const editor = this.workspaceService.getConfiguration('editor', undefined);
3957
const font = editor.get<string>('fontFamily');
@@ -47,15 +65,15 @@ export class CodeCssGenerator implements ICodeCssGenerator {
4765
// The tokens object then contains the necessary data to generate our css
4866
if (tokenColors && font && fontSize) {
4967
this.logger.logInformation('Using colors to generate CSS ...');
50-
return this.generateCss(theme, tokenColors, font, fontSize, terminalCursor);
68+
css = this.generateCss(theme, tokenColors, font, fontSize, terminalCursor, ignoreTheme);
5169
}
5270
}
5371
} catch (err) {
5472
// On error don't fail, just log
5573
this.logger.logError(err);
5674
}
5775

58-
return '';
76+
return css;
5977
}
6078

6179
private matchTokenColor(tokenColors: JSONArray, scope: string) : number {
@@ -96,7 +114,7 @@ export class CodeCssGenerator implements ICodeCssGenerator {
96114
}
97115

98116
// tslint:disable-next-line:max-func-body-length
99-
private generateCss(theme: string, tokenColors: JSONArray, fontFamily: string, fontSize: number, cursorType: string): string {
117+
private generateCss(theme: string, tokenColors: JSONArray, fontFamily: string, fontSize: number, cursorType: string, generateDefaults: boolean): string {
100118
const escapedThemeName = Identifiers.GeneratedThemeName;
101119

102120
// There's a set of values that need to be found
@@ -109,6 +127,7 @@ export class CodeCssGenerator implements ICodeCssGenerator {
109127
// const atomic = this.getScopeColor(tokenColors, 'atomic');
110128
const builtinStyle = this.getScopeStyle(tokenColors, 'support.function');
111129
const punctuationStyle = this.getScopeStyle(tokenColors, 'punctuation');
130+
const overrides = generateDefaults ? DefaultStyle : '';
112131

113132
const def = 'var(--vscode-editor-foreground)';
114133

@@ -123,8 +142,11 @@ export class CodeCssGenerator implements ICodeCssGenerator {
123142
:root {
124143
--code-comment-color: ${commentStyle.color};
125144
--code-font-family: ${fontFamily};
126-
--code-font-size:${fontSize}px;
145+
--code-font-size: ${fontSize}px;
127146
}
147+
148+
${overrides}
149+
128150
.cm-header, .cm-strong {font-weight: bold;}
129151
.cm-em {font-style: italic;}
130152
.cm-link {text-decoration: underline;}

‎src/client/datascience/constants.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55

66
import { IS_WINDOWS } from '../common/platform/constants';
77

8+
export const DefaultTheme = 'Default Light+';
9+
810
export namespace Commands {
911
export const RunAllCells = 'python.datascience.runallcells';
1012
export const RunAllCellsAbove = 'python.datascience.runallcellsabove';

‎src/client/datascience/historyProvider.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@ export class HistoryProvider implements IHistoryProvider, IAsyncDisposable {
8484
const workbench = this.workspaceService.getConfiguration('workbench');
8585
if (workbench) {
8686
const theme = workbench.get<string>('colorTheme');
87-
if (theme) {
87+
const ignoreTheme = this.configService.getSettings().datascience.ignoreVscodeTheme ? true : false;
88+
if (theme && !ignoreTheme) {
8889
darkTheme = await this.themeFinder.isThemeDark(theme);
8990
}
9091
}

‎src/datascience-ui/history-react/MainPanel.tsx

+22-19
Original file line numberDiff line numberDiff line change
@@ -76,36 +76,37 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
7676
this.renderCount = this.renderCount + 1;
7777
}
7878

79+
const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
7980
const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
8081

8182
return (
8283
<div className='main-panel'>
8384
<PostOffice messageHandlers={[this]} ref={this.updatePostOffice} />
84-
<MenuBar baseTheme={this.props.baseTheme} stylePosition='top-fixed'>
85+
<MenuBar baseTheme={baseTheme} stylePosition='top-fixed'>
8586
{this.renderExtraButtons()}
86-
<CellButton baseTheme={this.props.baseTheme} onClick={this.collapseAll} disabled={!this.canCollapseAll()} tooltip={getLocString('DataScience.collapseAll', 'Collapse all cell inputs')}>
87-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.CollapseAll}/>
87+
<CellButton baseTheme={baseTheme} onClick={this.collapseAll} disabled={!this.canCollapseAll()} tooltip={getLocString('DataScience.collapseAll', 'Collapse all cell inputs')}>
88+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.CollapseAll}/>
8889
</CellButton>
89-
<CellButton baseTheme={this.props.baseTheme} onClick={this.expandAll} disabled={!this.canExpandAll()} tooltip={getLocString('DataScience.expandAll', 'Expand all cell inputs')}>
90-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.ExpandAll}/>
90+
<CellButton baseTheme={baseTheme} onClick={this.expandAll} disabled={!this.canExpandAll()} tooltip={getLocString('DataScience.expandAll', 'Expand all cell inputs')}>
91+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.ExpandAll}/>
9192
</CellButton>
92-
<CellButton baseTheme={this.props.baseTheme} onClick={this.export} disabled={!this.canExport()} tooltip={getLocString('DataScience.export', 'Export as Jupyter Notebook')}>
93-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.SaveAs}/>
93+
<CellButton baseTheme={baseTheme} onClick={this.export} disabled={!this.canExport()} tooltip={getLocString('DataScience.export', 'Export as Jupyter Notebook')}>
94+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.SaveAs}/>
9495
</CellButton>
95-
<CellButton baseTheme={this.props.baseTheme} onClick={this.restartKernel} tooltip={getLocString('DataScience.restartServer', 'Restart iPython Kernel')}>
96-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Restart}/>
96+
<CellButton baseTheme={baseTheme} onClick={this.restartKernel} tooltip={getLocString('DataScience.restartServer', 'Restart iPython Kernel')}>
97+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Restart}/>
9798
</CellButton>
98-
<CellButton baseTheme={this.props.baseTheme} onClick={this.interruptKernel} tooltip={getLocString('DataScience.interruptKernel', 'Interrupt iPython Kernel')}>
99-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Interrupt}/>
99+
<CellButton baseTheme={baseTheme} onClick={this.interruptKernel} tooltip={getLocString('DataScience.interruptKernel', 'Interrupt iPython Kernel')}>
100+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Interrupt}/>
100101
</CellButton>
101-
<CellButton baseTheme={this.props.baseTheme} onClick={this.undo} disabled={!this.canUndo()} tooltip={getLocString('DataScience.undo', 'Undo')}>
102-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Undo}/>
102+
<CellButton baseTheme={baseTheme} onClick={this.undo} disabled={!this.canUndo()} tooltip={getLocString('DataScience.undo', 'Undo')}>
103+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Undo}/>
103104
</CellButton>
104-
<CellButton baseTheme={this.props.baseTheme} onClick={this.redo} disabled={!this.canRedo()} tooltip={getLocString('DataScience.redo', 'Redo')}>
105-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Redo}/>
105+
<CellButton baseTheme={baseTheme} onClick={this.redo} disabled={!this.canRedo()} tooltip={getLocString('DataScience.redo', 'Redo')}>
106+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Redo}/>
106107
</CellButton>
107-
<CellButton baseTheme={this.props.baseTheme} onClick={this.clearAll} tooltip={getLocString('DataScience.clearAll', 'Remove All Cells')}>
108-
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Cancel}/>
108+
<CellButton baseTheme={baseTheme} onClick={this.clearAll} tooltip={getLocString('DataScience.clearAll', 'Remove All Cells')}>
109+
<Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Cancel}/>
109110
</CellButton>
110111
</MenuBar>
111112
<div className='top-spacing'/>
@@ -214,7 +215,8 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
214215

215216
private renderExtraButtons = () => {
216217
if (!this.props.skipDefault) {
217-
return <CellButton baseTheme={this.props.baseTheme} onClick={this.addMarkdown} tooltip='Add Markdown Test'>M</CellButton>;
218+
const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
219+
return <CellButton baseTheme={baseTheme} onClick={this.addMarkdown} tooltip='Add Markdown Test'>M</CellButton>;
218220
}
219221

220222
return null;
@@ -225,6 +227,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
225227
const errorBackgroundColor = getSettings().errorBackgroundColor;
226228
const actualErrorBackgroundColor = errorBackgroundColor ? errorBackgroundColor : '#FFFFFF';
227229
const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
230+
const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
228231
return this.state.cellVMs.map((cellVM: ICellViewModel, index: number) =>
229232
<ErrorBoundary key={index}>
230233
<Cell
@@ -234,7 +237,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
234237
testMode={this.props.testMode}
235238
cellVM={cellVM}
236239
submitNewCode={this.submitInput}
237-
baseTheme={this.props.baseTheme}
240+
baseTheme={baseTheme}
238241
codeTheme={this.props.codeTheme}
239242
showWatermark={!this.state.submittedText}
240243
errorBackgroundColor={actualErrorBackgroundColor}

‎src/datascience-ui/history-react/cell.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
margin: 0px;
33
padding: 2px;
44
display: block;
5-
border-bottom-color: var(--vscode-editorGroupHeader-tabsBackground);
5+
border-bottom-color: var(--override-widget-background, var(--vscode-editorGroupHeader-tabsBackground));
66
border-bottom-style: solid;
77
border-bottom-width: 1px;
88
}
@@ -57,7 +57,7 @@
5757

5858
.cell-output {
5959
margin-top: 5px;
60-
background: var(--vscode-notifications-background);
60+
background: var(--override-widget-background, var(--vscode-notifications-background));
6161
white-space: pre-wrap;
6262
font-family: monospace;
6363
}
@@ -77,7 +77,7 @@
7777
}
7878

7979
.cell-output thead {
80-
border-bottom-color: var(--vscode-editor-foreground);
80+
border-bottom-color: var(--override-foreground, var(--vscode-editor-foreground));
8181
border-bottom-style: solid;
8282
border-bottom-width: 1px;
8383
vertical-align: bottom;
@@ -98,10 +98,10 @@
9898
font-weight: bold;
9999
}
100100
.cell-output tbody tr:nth-child(even) {
101-
background: var(--vscode-editor-background); /* Force to white because the default color for output is gray */
101+
background: var(--override-background, var(--vscode-editor-background)); /* Force to white because the default color for output is gray */
102102
}
103103
.cell-output tbody tr:hover {
104-
background: var(--vscode-editor-selectionBackground);
104+
background: var(--override-selection-background, var(--vscode-editor-selectionBackground));
105105
}
106106
.cell-output * + table {
107107
margin-top: 1em;

‎src/datascience-ui/history-react/code.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
.CodeMirror {
22
text-align: left!important;
3-
background-color: var(--vscode-editor-background);
4-
color: var(--vscode-editor-foreground);
3+
background-color: var(--override-background, var(--vscode-editor-background));
4+
color: var(--override-foreground, var(--vscode-editor-foreground));
55
font-family: var(--vscode-editor-font-family);
66
font-weight: var(--vscode-editor-font-weight);
77
font-size: var(--vscode-editor-font-size);
88
}
99

1010
.cm-s-default {
11-
background-color: var(--vscode-editor-background);
12-
color: var(--vscode-editor-foreground);
11+
background-color: var(--override-background, var(--vscode-editor-background));
12+
color: var(--override-foreground, var(--vscode-editor-foreground));
1313
font-family: var(--code-font-family);
1414
font-weight: var(--vscode-editor-font-weight);
1515
font-size: var(--code-font-size);
@@ -43,7 +43,7 @@
4343
left: 30px;
4444
z-index: 500;
4545
font-style: italic;
46-
color: var(--vscode-pickerGroup-border);
46+
color: var(--override-watermark-color, var(--vscode-pickerGroup-border));
4747
}
4848

4949
.hide {

‎src/datascience-ui/history-react/cursor.css

+6-9
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,25 @@
66
}
77

88
.cursor-block {
9-
border: .05px solid var(--vscode-editor-foreground);
9+
border: .05px solid var(--override-foreground, var(--vscode-editor-foreground));
1010
min-width: 5px;
1111
margin-left: -1px;
1212
margin-right: -1px;
1313
}
1414

1515
.cursor-line {
16-
border-left: 1px solid var(--vscode-editor-foreground);
16+
border-left: 1px solid var(--override-foreground, var(--vscode-editor-foreground));
1717
}
1818

1919
.cursor-underline {
20-
border-bottom: 1px solid var(--vscode-editor-foreground);
20+
border-bottom: 1px solid var(--override-foreground, var(--vscode-editor-foreground));
2121
min-width: 5px;
2222
}
2323

2424
.cursor-measure {
2525
visibility: hidden;
2626
}
2727

28-
.cursor-text {
29-
}
30-
3128
.cursor-line-overlay {
3229
border-left-width: 1px;
3330
border-left-style: solid;
@@ -53,15 +50,15 @@
5350

5451
@keyframes blinkCursorLine {
5552
0%, 49% {border-left-color: transparent;}
56-
50%, 100% {border-left-color: var(--vscode-editor-foreground);}
53+
50%, 100% {border-left-color: var(--override-foreground, var(--vscode-editor-foreground));}
5754
}
5855

5956
@keyframes blinkCursorUnderline {
6057
0%, 49% {border-bottom-color: transparent;}
61-
50%, 100% {border-bottom-color: var(--vscode-editor-foreground); }
58+
50%, 100% {border-bottom-color: var(--override-foreground, var(--vscode-editor-foreground)); }
6259
}
6360

6461
@keyframes blinkCursorBlock {
6562
0%, 49% {background-color: transparent; color: transparent;}
66-
50%, 100% {background-color: var(--vscode-editor-foreground); color: var(--vscode-editor-background);}
63+
50%, 100% {background-color: var(--override-foreground, var(--vscode-editor-foreground)); color: var(--override-background, var(--vscode-editor-background));}
6764
}

‎src/datascience-ui/history-react/mainPanel.css

+5
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,8 @@
1010
.cell-table-body {
1111
display: table-row-group;
1212
}
13+
14+
.main-panel {
15+
background: var(--override-background, var(--vscode-editor-background));
16+
color: var(--override-foreground, var(--vscode-editor-foreground));
17+
}

‎src/datascience-ui/history-react/menuBar.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@
4444
border-left-width: 0px;
4545
margin-bottom: 1px;
4646
border-style:solid;
47-
background-color: var(--vscode-editor-background);
48-
border-color: var(--vscode-editorGroupHeader-tabsBackground);
47+
background-color: var(--override-background, var(--vscode-editor-background));
48+
border-color: var(--override-tabs-background, var(--vscode-editorGroupHeader-tabsBackground));
4949
}
5050

5151
.menuBar-top-fixed:after{

‎src/datascience-ui/history-react/sysInfo.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
margin: 10px;
33
padding: 2px;
44
display: block;
5-
border-bottom-color: var(--vscode-editorGroupHeader-tabsBackground);
5+
border-bottom-color: var(--override-tabs-background, var(--vscode-editorGroupHeader-tabsBackground));
66
border-bottom-style: solid;
77
border-bottom-width: 1px;
88
}
99

1010
.sysinfo-outer {
11-
background: var(--vscode-notifications-background);
11+
background: var(--override-widget-background, var(--vscode-notifications-background));
1212
white-space: pre-wrap;
1313
font-family: monospace;
1414
width: 100%;

0 commit comments

Comments
 (0)