Merge pull request #1664 from AnnMarieW/devtools-dark-theme

alexcjohnson · web-flow · commit e5583bdf0eec · 2021-06-08T10:35:20.000-04:00
fix: make devtools text visible with dark themes
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#1611](https://github.com/plotly/dash/pull/1611) Package dash-renderer artifacts and dependencies with Dash, and source renderer resources from within Dash.
 
 ### Fixed
+- [#1664](https://github.com/plotly/dash/pull/1664) Fix [#1649](https://github.com/plotly/dash/issues/1649), makes the devtools readable with a dark theme.
 - [#1640](https://github.com/plotly/dash/pull/1640) Fix [#1475](https://github.com/plotly/dash/issues/1475), missing `timing_information` after certain modifications to Flask behavior
 
 ## [1.20.0] - 2021-04-08
diff --git a/dash/dash-renderer/src/components/error/GlobalErrorOverlay.css b/dash/dash-renderer/src/components/error/GlobalErrorOverlay.css
@@ -5,6 +5,7 @@
     font-family: monospace;
     font-size: 14px;
     font-variant-ligatures: common-ligatures;
+    color: rgb(50, 50, 50);
 }
 
 .dash-error-card {
diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.css b/dash/dash-renderer/src/components/error/menu/DebugMenu.css
@@ -163,6 +163,7 @@
     border-radius: 32px;
     background-color: white;
     padding: 4px;
+    color: rgb(50, 50, 50);
 }
 
 .dash-debug-error-count {
diff --git a/tests/integration/devtools/test_devtools_error_handling.py b/tests/integration/devtools/test_devtools_error_handling.py
@@ -7,7 +7,10 @@
 
 
 def app_with_errors():
-    app = dash.Dash(__name__)
+    darkly = (
+        "https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css"
+    )
+    app = dash.Dash(__name__, external_stylesheets=[darkly])
 
     app.layout = html.Div(
         [

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`font-family: monospace;`
`6`	`6`	`font-size: 14px;`
`7`	`7`	`font-variant-ligatures: common-ligatures;`
	`8`	`+ color: rgb(50, 50, 50);`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`.dash-error-card {`
Original file line number	Diff line number	Diff line change
`@@ -163,6 +163,7 @@`
`163`	`163`	`border-radius: 32px;`
`164`	`164`	`background-color: white;`
`165`	`165`	`padding: 4px;`
	`166`	`+ color: rgb(50, 50, 50);`
`166`	`167`	`}`
`167`	`168`
`168`	`169`	`.dash-debug-error-count {`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,10 @@`
`7`	`7`
`8`	`8`
`9`	`9`	`def app_with_errors():`
`10`		`- app = dash.Dash(__name__)`
	`10`	`+ darkly = (`
	`11`	`+ "https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css"`
	`12`	`+ )`
	`13`	`+ app = dash.Dash(__name__, external_stylesheets=[darkly])`
`11`	`14`
`12`	`15`	`app.layout = html.Div(`
`13`	`16`	`[`