Skip to content

Commit 4c4f155

Browse files
rchiodorchiodo
authored
Fix ignoreVscodeTheme to play along with dynamic theme updates (#5485)
* Fix ignoreVscodeTheme to play along with dynamic theme updates * Add more test items * Fix 5486 as well
1 parent bab781c commit 4c4f155

10 files changed

Lines changed: 47 additions & 30 deletions

File tree

‎.github/test_plan.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,9 @@ def test_failure():
413413
1. Switch back and forth between a 'light' and a 'dark' theme
414414
1. Check that the cell switches colors
415415
1. Check that the buttons on the top change to their appropriate 'light' or 'dark' versions
416+
1. Enable the 'ignoreVscodeTheme' setting
417+
1. Close the Python Interactive window and reopen it. The theme in just the 'Python Interactive' window should be light
418+
1. Switch to a dark theme. Make sure the interactive window remains in the light theme.
416419
- [ ] Verify code lenses
417420
1. Check that `Run Cell` `Run Above` and `Run Below` all do the correct thing
418421
- [ ] Verify context menu navigation commands

‎news/2 Fixes/5480.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Fix ignoreVscodeTheme to play along with dynamic theme updates. Also support setting in the variable explorer.

‎news/2 Fixes/5486.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Fix matplotlib updating for dark theme after restarting

‎src/client/datascience/codeCssGenerator.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const LightTheme = 'light';
2020
// are ignoring themes.
2121
//tslint:disable:no-multiline-string object-literal-key-quotes
2222
const DefaultCssVars: { [key: string] : string } = {
23-
LightTheme : `
23+
'light' : `
2424
:root {
2525
--override-widget-background: #f3f3f3;
2626
--override-foreground: #000000;
@@ -29,9 +29,11 @@ const DefaultCssVars: { [key: string] : string } = {
2929
--override-watermark-color: #cccedb;
3030
--override-tabs-background: #f3f3f3;
3131
--override-progress-background: #0066bf;
32+
--override-badge-background: #c4c4c4;
33+
--override-lineHighlightBorder: #eeeeee;
3234
}
3335
`,
34-
DarkTheme : `
36+
'dark' : `
3537
:root {
3638
--override-widget-background: #1e1e1e;
3739
--override-foreground: #d4d4d4;
@@ -40,6 +42,8 @@ const DefaultCssVars: { [key: string] : string } = {
4042
--override-watermark-color: #3f3f46;
4143
--override-tabs-background: #252526;
4244
--override-progress-background: #0066bf;
45+
--override-badge-background: #4d4d4d;
46+
--override-lineHighlightBorder: #282828;
4347
}
4448
`
4549
};

‎src/client/datascience/history/history.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,12 @@ export class History extends WebViewHost<IHistoryMapping> implements IHistory {
459459
if (this.jupyterServer) {
460460
await this.jupyterServer.restartKernel(this.generateDataScienceExtraSettings().jupyterInterruptTimeout);
461461
await this.addSysInfo(SysInfoReason.Restart);
462+
463+
// Compute if dark or not.
464+
const knownDark = await this.isDark();
465+
466+
// Before we run any cells, update the dark setting
467+
await this.jupyterServer.setMatplotLibStyle(knownDark);
462468
}
463469
} catch (exc) {
464470
// If we get a kernel promise failure, then restarting timed out. Just shutdown and restart the entire server

‎src/client/datascience/webViewHost.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,7 @@ export class WebViewHost<IMapping> implements IDisposable {
138138
const terminal = this.workspaceService.getConfiguration('terminal');
139139
const terminalCursor = terminal ? terminal.get<string>('integrated.cursorStyle', 'block') : 'block';
140140
const workbench = this.workspaceService.getConfiguration('workbench');
141-
const ignoreTheme = this.configService.getSettings().datascience.ignoreVscodeTheme ? true : false;
142-
const theme = ignoreTheme || !workbench ? DefaultTheme : workbench.get<string>('colorTheme', DefaultTheme);
141+
const theme = !workbench ? DefaultTheme : workbench.get<string>('colorTheme', DefaultTheme);
143142
return {
144143
...this.configService.getSettings().datascience,
145144
extraSettings: {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
}
2626

2727
.collapseInputLabel {
28-
background-color: var(--vscode-editor-background);
29-
color: var(--vscode-editor-foreground);
28+
background-color: var(--override-background, var(--vscode-editor-background));
29+
color: var(--override-foreground, var(--vscode-editor-foreground));
3030
font-family: var(--vscode-editor-font-family);
3131
font-weight: var(--vscode-editor-font-weight);
3232
margin: 3px;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.variable-explorer {
22
margin: 5px;
3-
background-color: var(--vscode-editor-background);
3+
background: var(--override-background, var(--vscode-editor-background));
4+
color: var(--override-foreground, var(--vscode-editor-foreground));
45
}
56

67
#variable-explorer-data-grid {

‎src/datascience-ui/history-react/variableExplorerGrid.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,65 @@
1414

1515
#variable-explorer-data-grid .react-grid-Main {
1616
font-family: var(--code-font-family);
17-
background-color: var(--vscode-editor-background);
18-
color: var(--vscode-editor-foreground);
17+
background-color: var(--override-background, var(--vscode-editor-background));
18+
color: var(--override-foreground, var(--vscode-editor-foreground));
1919
outline: none;
2020
}
2121

2222
#variable-explorer-data-grid .react-grid-Grid {
23-
background-color: var(--vscode-editor-background);
24-
color: var(--vscode-editor-foreground);
23+
background-color: var(--override-background, var(--vscode-editor-background));
24+
color: var(--override-foreground, var(--vscode-editor-foreground));
2525
border-style: none;
2626
}
2727

2828
#variable-explorer-data-grid .react-grid-Canvas {
29-
background-color: var(--vscode-editor-background);
30-
color: var(--vscode-editor-foreground);
29+
background-color: var(--override-background, var(--vscode-editor-background));
30+
color: var(--override-foreground, var(--vscode-editor-foreground));
3131
}
3232

3333
#variable-explorer-data-grid .react-grid-Header {
34-
background-color: var(--vscode-notifications-background);
34+
background-color: var(--override-tabs-background, var(--vscode-notifications-background));
3535
}
3636

3737
#variable-explorer-data-grid .react-grid-HeaderCell {
38-
background-color: var(--vscode-editor-lineHighlightBorder);
39-
color: var(--vscode-editor-foreground);
38+
background-color: var(--override-lineHighlightBorder, var(--vscode-editor-lineHighlightBorder));
39+
color: var(--override-foreground, var(--vscode-editor-foreground));
4040
border-style: solid;
41-
border-color: var(--vscode-badge-background);
41+
border-color: var(--override-badge-background, var(--vscode-badge-background));
4242
padding: 2px;
4343
}
4444

4545

4646
#variable-explorer-data-grid .react-grid-Row--even {
47-
background-color: var(--vscode-editor-background);
48-
color: var(--vscode-editor-foreground);
49-
border-right-color: var(--vscode-badge-background);
50-
border-bottom-color: var(--vscode-badge-background);
47+
background-color: var(--override-background, var(--vscode-editor-background));
48+
color: var(--override-foreground, var(--vscode-editor-foreground));
49+
border-right-color: var(--override-badge-background, var(--vscode-badge-background));
50+
border-bottom-color: var(--override-badge-background, var(--vscode-badge-background));
5151
}
5252

5353
#variable-explorer-data-grid .react-grid-Row--odd {
54-
background-color: var(--vscode-editor-lineHighlightBorder);
55-
color: var(--vscode-editor-foreground);
56-
border-right-color: var(--vscode-badge-background);
57-
border-bottom-color: var(--vscode-badge-background);
54+
background-color: var(--override-lineHighlightBorder, var(--vscode-editor-lineHighlightBorder));
55+
color: var(--override-foreground, var(--vscode-editor-foreground));
56+
border-right-color: var(--override-badge-background, var(--vscode-badge-background));
57+
border-bottom-color: var(--override-badge-background, var(--vscode-badge-background));
5858
}
5959

6060
#variable-explorer-data-grid .react-grid-Cell {
6161
background-color: transparent;
62-
color: var(--vscode-editor-foreground);
62+
color: var(--override-foreground, var(--vscode-editor-foreground));
6363
border-style: none;
6464
}
6565

6666
#variable-explorer-data-grid .react-grid-Cell:hover {
67-
background-color: var(--vscode-editor-selectionBackground);
67+
background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
6868
}
6969

7070
#variable-explorer-data-grid .react-grid-Row:hover {
71-
background-color: var(--vscode-editor-selectionBackground);
71+
background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
7272
}
7373

7474
#variable-explorer-data-grid .react-grid-Row:hover .react-grid-Cell {
75-
background-color: var(--vscode-editor-selectionBackground);
75+
background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
7676
}
7777

7878
#variable-explorer-data-grid .rdg-selected {

‎src/datascience-ui/react-common/styleInjector.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import * as React from 'react';
66
import { CssMessages, IGetCssResponse, SharedMessages } from '../../client/datascience/constants';
77
import { IDataScienceExtraSettings } from '../../client/datascience/types';
88
import { IMessageHandler, PostOffice } from './postOffice';
9+
import { getSettings } from './settingsReactSide';
910
import { detectBaseTheme } from './themeDetector';
1011

1112
export interface IStyleInjectorProps {
@@ -112,7 +113,8 @@ export class StyleInjector extends React.Component<IStyleInjectorProps, IStyleIn
112113
}
113114

114115
private computeKnownDark() : boolean {
115-
const baseTheme = detectBaseTheme();
116+
const ignore = getSettings && getSettings().ignoreVscodeTheme ? true : false;
117+
const baseTheme = ignore ? 'vscode-light' : detectBaseTheme();
116118
return baseTheme !== 'vscode-light';
117119
}
118120
}

0 commit comments

Comments
 (0)