microsoft · rchiodo · Mar 18, 2019 · Mar 15, 2019 · Mar 15, 2019
diff --git a/news/1 Enhancements/4640.md b/news/1 Enhancements/4640.md
@@ -0,0 +1 @@
+Add 'ignoreVscodeTheme' setting to allow a user to skip using the theme for VS Code in the Python Interactive Window.
diff --git a/package.json b/package.json
@@ -1370,6 +1370,12 @@
                     "description": "Allow the Python Interactive window to be shared during a Live Share session",
                     "scope": "resource"
                 },
+                "python.dataScience.ignoreVscodeTheme": {
+                    "type": "boolean",
+                    "default": false,
+                    "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.",
+                    "scope": "resource"
+                },
                 "python.disableInstallationCheck": {
                     "type": "boolean",
                     "default": false,

diff --git a/src/client/common/types.ts b/src/client/common/types.ts
@@ -300,6 +300,7 @@ export interface IDataScienceSettings {
     codeRegularExpression: string;
     allowLiveShare? : boolean;
     errorBackgroundColor: string;
+    ignoreVscodeTheme?: boolean;
 }
 
 export const IConfigurationService = Symbol('IConfigurationService');

diff --git a/src/client/datascience/codeCssGenerator.ts b/src/client/datascience/codeCssGenerator.ts
@@ -8,13 +8,28 @@ import * as path from 'path';
 import * as stripJsonComments from 'strip-json-comments';
 
 import { IWorkspaceService } from '../common/application/types';
-import { ILogger } from '../common/types';
+import { IConfigurationService, ILogger } from '../common/types';
 import { EXTENSION_ROOT_DIR } from '../constants';
-import { Identifiers } from './constants';
+import { DefaultTheme, Identifiers } from './constants';
 import { ICodeCssGenerator, IThemeFinder } from './types';
 
 // tslint:disable:no-any
 
+// These are based on the colors generated by 'Default Light+' and are only set when we
+// are ignoring themes.
+//tslint:disable-next-line:no-multiline-string
+const DefaultStyle = `
+    :root {
+        --override-widget-background: #f3f3f3;
+        --override-foreground: #000000;
+        --override-background: #FFFFFF;
+        --override-selection-background: #add6ff;
+        --override-watermark-color: #cccedb;
+        --override-tabs-background: #f3f3f3;
+        --override-progress-background: #0066bf;
+    }
+`;
+
 // This class generates css using the current theme in order to colorize code.
 //
 // 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 {
     constructor(
         @inject(IWorkspaceService) private workspaceService: IWorkspaceService,
         @inject(IThemeFinder) private themeFinder: IThemeFinder,
+        @inject(IConfigurationService) private configService: IConfigurationService,
         @inject(ILogger) private logger: ILogger) {
     }
 
     public generateThemeCss = async (): Promise<string> => {
+        let css : string = '';
         try {
             // First compute our current theme.
             const workbench = this.workspaceService.getConfiguration('workbench');
-            const theme = workbench.get<string>('colorTheme');
+            const ignoreTheme = this.configService.getSettings().datascience.ignoreVscodeTheme ? true : false;
+            const theme = ignoreTheme ? DefaultTheme : workbench.get<string>('colorTheme');
             const terminalCursor = workbench.get<string>('terminal.integrated.cursorStyle', 'block');
             const editor = this.workspaceService.getConfiguration('editor', undefined);
             const font = editor.get<string>('fontFamily');
@@ -47,15 +65,15 @@ export class CodeCssGenerator implements ICodeCssGenerator {
                 // The tokens object then contains the necessary data to generate our css
                 if (tokenColors && font && fontSize) {
                     this.logger.logInformation('Using colors to generate CSS ...');
-                    return this.generateCss(theme, tokenColors, font, fontSize, terminalCursor);
+                    css = this.generateCss(theme, tokenColors, font, fontSize, terminalCursor, ignoreTheme);
                 }
             }
         } catch (err) {
             // On error don't fail, just log
             this.logger.logError(err);
         }
 
-        return '';
+        return css;
     }
 
     private matchTokenColor(tokenColors: JSONArray, scope: string) : number {
@@ -96,7 +114,7 @@ export class CodeCssGenerator implements ICodeCssGenerator {
     }
 
     // tslint:disable-next-line:max-func-body-length
-    private generateCss(theme: string, tokenColors: JSONArray, fontFamily: string, fontSize: number, cursorType: string): string {
+    private generateCss(theme: string, tokenColors: JSONArray, fontFamily: string, fontSize: number, cursorType: string, generateDefaults: boolean): string {
         const escapedThemeName = Identifiers.GeneratedThemeName;
 
         // There's a set of values that need to be found
@@ -109,6 +127,7 @@ export class CodeCssGenerator implements ICodeCssGenerator {
         // const atomic = this.getScopeColor(tokenColors, 'atomic');
         const builtinStyle = this.getScopeStyle(tokenColors, 'support.function');
         const punctuationStyle = this.getScopeStyle(tokenColors, 'punctuation');
+        const overrides = generateDefaults ? DefaultStyle : '';
 
         const def = 'var(--vscode-editor-foreground)';
 
@@ -123,8 +142,11 @@ export class CodeCssGenerator implements ICodeCssGenerator {
         :root {
             --code-comment-color: ${commentStyle.color};
             --code-font-family: ${fontFamily};
-            --code-font-size:${fontSize}px;
+            --code-font-size: ${fontSize}px;
         }
+
+        ${overrides}
+
         .cm-header, .cm-strong {font-weight: bold;}
         .cm-em {font-style: italic;}
         .cm-link {text-decoration: underline;}

diff --git a/src/client/datascience/constants.ts b/src/client/datascience/constants.ts
@@ -5,6 +5,8 @@
 
 import { IS_WINDOWS } from '../common/platform/constants';
 
+export const DefaultTheme = 'Default Light+';
+
 export namespace Commands {
     export const RunAllCells = 'python.datascience.runallcells';
     export const RunAllCellsAbove = 'python.datascience.runallcellsabove';

diff --git a/src/client/datascience/historyProvider.ts b/src/client/datascience/historyProvider.ts
@@ -77,7 +77,8 @@ export class HistoryProvider implements IHistoryProvider, IAsyncDisposable {
         const workbench = this.workspaceService.getConfiguration('workbench');
         if (workbench) {
             const theme = workbench.get<string>('colorTheme');
-            if (theme) {
+            const ignoreTheme = this.configService.getSettings().datascience.ignoreVscodeTheme ? true : false;
+            if (theme && !ignoreTheme) {
                 darkTheme = await this.themeFinder.isThemeDark(theme);
             }
         }

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
@@ -76,36 +76,37 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             this.renderCount = this.renderCount + 1;
         }
 
+        const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
 
         return (
             <div className='main-panel'>
                 <PostOffice messageHandlers={[this]} ref={this.updatePostOffice} />
-                <MenuBar baseTheme={this.props.baseTheme} stylePosition='top-fixed'>
+                <MenuBar baseTheme={baseTheme} stylePosition='top-fixed'>
                     {this.renderExtraButtons()}
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.collapseAll} disabled={!this.canCollapseAll()} tooltip={getLocString('DataScience.collapseAll', 'Collapse all cell inputs')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.CollapseAll}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.collapseAll} disabled={!this.canCollapseAll()} tooltip={getLocString('DataScience.collapseAll', 'Collapse all cell inputs')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.CollapseAll}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.expandAll} disabled={!this.canExpandAll()} tooltip={getLocString('DataScience.expandAll', 'Expand all cell inputs')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.ExpandAll}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.expandAll} disabled={!this.canExpandAll()} tooltip={getLocString('DataScience.expandAll', 'Expand all cell inputs')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.ExpandAll}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.export} disabled={!this.canExport()} tooltip={getLocString('DataScience.export', 'Export as Jupyter Notebook')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.SaveAs}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.export} disabled={!this.canExport()} tooltip={getLocString('DataScience.export', 'Export as Jupyter Notebook')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.SaveAs}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.restartKernel} tooltip={getLocString('DataScience.restartServer', 'Restart iPython Kernel')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Restart}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.restartKernel} tooltip={getLocString('DataScience.restartServer', 'Restart iPython Kernel')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Restart}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.interruptKernel} tooltip={getLocString('DataScience.interruptKernel', 'Interrupt iPython Kernel')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Interrupt}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.interruptKernel} tooltip={getLocString('DataScience.interruptKernel', 'Interrupt iPython Kernel')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Interrupt}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.undo} disabled={!this.canUndo()} tooltip={getLocString('DataScience.undo', 'Undo')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Undo}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.undo} disabled={!this.canUndo()} tooltip={getLocString('DataScience.undo', 'Undo')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Undo}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.redo} disabled={!this.canRedo()} tooltip={getLocString('DataScience.redo', 'Redo')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Redo}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.redo} disabled={!this.canRedo()} tooltip={getLocString('DataScience.redo', 'Redo')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Redo}/>
                     </CellButton>
-                    <CellButton baseTheme={this.props.baseTheme} onClick={this.clearAll} tooltip={getLocString('DataScience.clearAll', 'Remove All Cells')}>
-                        <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Cancel}/>
+                    <CellButton baseTheme={baseTheme} onClick={this.clearAll} tooltip={getLocString('DataScience.clearAll', 'Remove All Cells')}>
+                        <Image baseTheme={baseTheme} class='cell-button-image' image={ImageName.Cancel}/>
                     </CellButton>
                 </MenuBar>
                 <div className='top-spacing'/>
@@ -214,7 +215,8 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
 
     private renderExtraButtons = () => {
         if (!this.props.skipDefault) {
-            return <CellButton baseTheme={this.props.baseTheme} onClick={this.addMarkdown} tooltip='Add Markdown Test'>M</CellButton>;
+            const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
+            return <CellButton baseTheme={baseTheme} onClick={this.addMarkdown} tooltip='Add Markdown Test'>M</CellButton>;
         }
 
         return null;
@@ -225,6 +227,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         const errorBackgroundColor = getSettings().errorBackgroundColor;
         const actualErrorBackgroundColor = errorBackgroundColor ? errorBackgroundColor : '#FFFFFF';
         const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
+        const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
         return this.state.cellVMs.map((cellVM: ICellViewModel, index: number) =>
             <ErrorBoundary key={index}>
                 <Cell
@@ -234,7 +237,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                     testMode={this.props.testMode}
                     cellVM={cellVM}
                     submitNewCode={this.submitInput}
-                    baseTheme={this.props.baseTheme}
+                    baseTheme={baseTheme}
                     codeTheme={this.props.codeTheme}
                     showWatermark={!this.state.submittedText}
                     errorBackgroundColor={actualErrorBackgroundColor}

diff --git a/src/datascience-ui/history-react/cell.css b/src/datascience-ui/history-react/cell.css
@@ -2,7 +2,7 @@
     margin: 0px;
     padding: 2px;
     display: block;
-    border-bottom-color: var(--vscode-editorGroupHeader-tabsBackground);
+    border-bottom-color: var(--override-widget-background, var(--vscode-editorGroupHeader-tabsBackground));
     border-bottom-style: solid;
     border-bottom-width: 1px;
 }
@@ -57,7 +57,7 @@
 
 .cell-output {
     margin-top: 5px;
-    background: var(--vscode-notifications-background);
+    background: var(--override-widget-background, var(--vscode-notifications-background));
     white-space: pre-wrap;
     font-family: monospace;
 }
@@ -77,7 +77,7 @@
 }
 
 .cell-output thead {
-    border-bottom-color: var(--vscode-editor-foreground);
+    border-bottom-color: var(--override-foreground, var(--vscode-editor-foreground));
     border-bottom-style: solid;
     border-bottom-width: 1px;
     vertical-align: bottom;
@@ -98,10 +98,10 @@
   font-weight: bold;
 }
 .cell-output tbody tr:nth-child(even) {
-  background: var(--vscode-editor-background); /* Force to white because the default color for output is gray */
+  background: var(--override-background, var(--vscode-editor-background)); /* Force to white because the default color for output is gray */
 }
 .cell-output tbody tr:hover {
-  background: var(--vscode-editor-selectionBackground);
+  background: var(--override-selection-background, var(--vscode-editor-selectionBackground));
 }
 .cell-output * + table {
   margin-top: 1em;

diff --git a/src/datascience-ui/history-react/code.css b/src/datascience-ui/history-react/code.css
@@ -1,15 +1,15 @@
 .CodeMirror {
     text-align: left!important;
-    background-color: var(--vscode-editor-background);
-    color: var(--vscode-editor-foreground);
+    background-color: var(--override-background, var(--vscode-editor-background));
+    color: var(--override-foreground, var(--vscode-editor-foreground));
     font-family: var(--vscode-editor-font-family);
     font-weight: var(--vscode-editor-font-weight);
     font-size: var(--vscode-editor-font-size);
 }
 
 .cm-s-default {
-    background-color: var(--vscode-editor-background);
-    color: var(--vscode-editor-foreground);
+    background-color: var(--override-background, var(--vscode-editor-background));
+    color: var(--override-foreground, var(--vscode-editor-foreground));
     font-family: var(--code-font-family);
     font-weight: var(--vscode-editor-font-weight);
     font-size: var(--code-font-size);
@@ -43,7 +43,7 @@
     left: 30px;
     z-index: 500;
     font-style: italic;
-    color: var(--vscode-pickerGroup-border);
+    color: var(--override-watermark-color, var(--vscode-pickerGroup-border));
 }
 
 .hide {

diff --git a/src/datascience-ui/history-react/cursor.css b/src/datascience-ui/history-react/cursor.css
@@ -6,28 +6,25 @@
 }
 
 .cursor-block {
-    border: .05px solid var(--vscode-editor-foreground);
+    border: .05px solid var(--override-foreground, var(--vscode-editor-foreground));
     min-width: 5px;
     margin-left: -1px;
     margin-right: -1px;
 }
 
 .cursor-line {
-    border-left: 1px solid var(--vscode-editor-foreground);
+    border-left: 1px solid var(--override-foreground, var(--vscode-editor-foreground));
 }
 
 .cursor-underline {
-    border-bottom: 1px solid var(--vscode-editor-foreground);
+    border-bottom: 1px solid var(--override-foreground, var(--vscode-editor-foreground));
     min-width: 5px;
 }
 
 .cursor-measure {
     visibility: hidden;
 }
 
-.cursor-text {
-}
-
 .cursor-line-overlay {
     border-left-width: 1px;
     border-left-style: solid;
@@ -53,15 +50,15 @@
 
 @keyframes blinkCursorLine {
     0%, 49%    {border-left-color: transparent;}
-    50%, 100% {border-left-color: var(--vscode-editor-foreground);}
+    50%, 100% {border-left-color: var(--override-foreground, var(--vscode-editor-foreground));}
 }
 
 @keyframes blinkCursorUnderline {
     0%, 49%    {border-bottom-color: transparent;}
-    50%, 100% {border-bottom-color: var(--vscode-editor-foreground); }
+    50%, 100% {border-bottom-color: var(--override-foreground, var(--vscode-editor-foreground)); }
 }
 
 @keyframes blinkCursorBlock {
     0%, 49%   {background-color: transparent; color: transparent;}
-    50%, 100%  {background-color: var(--vscode-editor-foreground); color: var(--vscode-editor-background);}
+    50%, 100%  {background-color: var(--override-foreground, var(--vscode-editor-foreground)); color: var(--override-background, var(--vscode-editor-background));}
 }
diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css
@@ -10,3 +10,8 @@
 .cell-table-body {
     display: table-row-group;
 }
+
+.main-panel {
+    background: var(--override-background, var(--vscode-editor-background));
+    color: var(--override-foreground, var(--vscode-editor-foreground));
+}
diff --git a/src/datascience-ui/history-react/menuBar.css b/src/datascience-ui/history-react/menuBar.css
@@ -44,8 +44,8 @@
     border-left-width: 0px;
     margin-bottom: 1px;
     border-style:solid;
-    background-color: var(--vscode-editor-background);
-    border-color: var(--vscode-editorGroupHeader-tabsBackground);
+    background-color: var(--override-background, var(--vscode-editor-background));
+    border-color: var(--override-tabs-background, var(--vscode-editorGroupHeader-tabsBackground));
 }
 
 .menuBar-top-fixed:after{

diff --git a/src/datascience-ui/history-react/sysInfo.css b/src/datascience-ui/history-react/sysInfo.css
@@ -2,13 +2,13 @@
     margin: 10px;
     padding: 2px;
     display: block;
-    border-bottom-color: var(--vscode-editorGroupHeader-tabsBackground);
+    border-bottom-color: var(--override-tabs-background, var(--vscode-editorGroupHeader-tabsBackground));
     border-bottom-style: solid;
     border-bottom-width: 1px;
 }
 
 .sysinfo-outer {
-    background: var(--vscode-notifications-background);
+    background: var(--override-widget-background, var(--vscode-notifications-background));
     white-space: pre-wrap;
     font-family: monospace;
     width: 100%;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add 'ignoreVscodeTheme' setting to allow a user to skip using the theme for VS Code in the Python Interactive Window.