From fe8c2b3833d95bc0079db7a5c05465841e4d92ff Mon Sep 17 00:00:00 2001
From: Rich Chiodo <rchiodo@microsoft.com>
Date: Thu, 9 Apr 2020 15:30:49 -0700
Subject: [PATCH] Fix background (again) for ipywidgets

---
 news/2 Fixes/11060.md                          |  1 +
 .../interactive-common/cellOutput.tsx          |  7 +++++--
 .../datascience/dataScienceIocContainer.ts     | 18 +++++++++---------
 3 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 news/2 Fixes/11060.md

diff --git a/news/2 Fixes/11060.md b/news/2 Fixes/11060.md
new file mode 100644
index 000000000000..8459f2a194ac
--- /dev/null
+++ b/news/2 Fixes/11060.md	
@@ -0,0 +1 @@
+Make sure ipywidgets have a white background so they display in dark themes.
\ No newline at end of file
diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx
index 6a871f324287..3cab23d89fa8 100644
--- a/src/datascience-ui/interactive-common/cellOutput.tsx
+++ b/src/datascience-ui/interactive-common/cellOutput.tsx
@@ -129,10 +129,13 @@ export class CellOutput extends React.Component<ICellOutputProps> {
                 ? `cell-output cell-output-${this.props.baseTheme}`
                 : 'markdown-cell-output-container';
 
-            // Then combine them inside a div
+            // Then combine them inside a div. IPyWidget ref has to be separate so we don't end up
+            // with a div in the way. If we try setting all div's background colors, we break
+            // some widgets
             return (
-                <div className={outputClassNames} ref={this.ipyWidgetRef}>
+                <div className={outputClassNames}>
                     {this.renderResults()}
+                    <div className="cell-output-ipywidget-background" ref={this.ipyWidgetRef}></div>
                 </div>
             );
         }
diff --git a/src/test/datascience/dataScienceIocContainer.ts b/src/test/datascience/dataScienceIocContainer.ts
index 8a1e854e240b..bfeaf2b1bef5 100644
--- a/src/test/datascience/dataScienceIocContainer.ts
+++ b/src/test/datascience/dataScienceIocContainer.ts
@@ -565,15 +565,6 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
         this.serviceManager.addSingleton<ICodeCssGenerator>(ICodeCssGenerator, CodeCssGenerator);
         this.serviceManager.addSingleton<IStatusProvider>(IStatusProvider, StatusProvider);
         this.serviceManager.addSingleton<IInterpreterPathService>(IInterpreterPathService, InterpreterPathService);
-        this.serviceManager.addSingleton<IInterpreterSecurityService>(
-            IInterpreterSecurityService,
-            InterpreterSecurityService
-        );
-        this.serviceManager.addSingleton<IInterpreterSecurityStorage>(
-            IInterpreterSecurityStorage,
-            InterpreterSecurityStorage
-        );
-        this.serviceManager.addSingleton<IInterpreterEvaluation>(IInterpreterEvaluation, InterpreterEvaluation);
         this.serviceManager.addSingleton<IBrowserService>(IBrowserService, BrowserService);
         this.serviceManager.addSingletonInstance<IAsyncDisposableRegistry>(
             IAsyncDisposableRegistry,
@@ -944,6 +935,15 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
                 InterpeterHashProviderFactory,
                 InterpeterHashProviderFactory
             );
+            this.serviceManager.addSingleton<IInterpreterSecurityService>(
+                IInterpreterSecurityService,
+                InterpreterSecurityService
+            );
+            this.serviceManager.addSingleton<IInterpreterSecurityStorage>(
+                IInterpreterSecurityStorage,
+                InterpreterSecurityStorage
+            );
+            this.serviceManager.addSingleton<IInterpreterEvaluation>(IInterpreterEvaluation, InterpreterEvaluation);
             this.serviceManager.addSingleton<WindowsStoreInterpreter>(WindowsStoreInterpreter, WindowsStoreInterpreter);
             this.serviceManager.addSingleton<InterpreterHashProvider>(InterpreterHashProvider, InterpreterHashProvider);
             this.serviceManager.addSingleton<InterpreterFilter>(InterpreterFilter, InterpreterFilter);