refactor(anywidget): Simplify dark mode implementation

Author: shuoweil

bigframes/display/anywidget.py

@@ -68,7 +68,6 @@ class TableWidget(_WIDGET_BASE):
     page_size = traitlets.Int(0).tag(sync=True)
     row_count = traitlets.Int(allow_none=True, default_value=None).tag(sync=True)
     table_html = traitlets.Unicode("").tag(sync=True)
-    css_styles = traitlets.Unicode("").tag(sync=True)
     sort_context = traitlets.List(traitlets.Dict(), default_value=[]).tag(sync=True)
     orderable_columns = traitlets.List(traitlets.Unicode(), []).tag(sync=True)
     _initial_load_complete = traitlets.Bool(False).tag(sync=True)
@@ -119,9 +118,6 @@ def __init__(self, dataframe: bigframes.dataframe.DataFrame):
         else:
             self.orderable_columns = []
 
-        # Load CSS manually to ensure it's available for JS injection if needed
-        self.css_styles = self._css
-
         self._initial_load()
 
         # Signals to the frontend that the initial data load is complete.

bigframes/display/table_widget.js

@@ -22,7 +22,6 @@ const ModelProperty = {
 	ROW_COUNT: "row_count",
 	SORT_CONTEXT: "sort_context",
 	TABLE_HTML: "table_html",
-	CSS_STYLES: "css_styles",
 };
 
 const Event = {
@@ -38,14 +37,6 @@ const Event = {
 function render({ model, el }) {
 	el.classList.add("bigframes-widget");
 
-	// Inject CSS styles passed from the backend.
-	const cssStyles = model.get(ModelProperty.CSS_STYLES);
-	if (cssStyles) {
-		const style = document.createElement("style");
-		style.textContent = cssStyles;
-		el.appendChild(style);
-	}
-
 	const errorContainer = document.createElement("div");
 	errorContainer.classList.add("error-message");
 
@@ -54,44 +45,6 @@ function render({ model, el }) {
 	const footer = document.createElement("footer");
 	footer.classList.add("footer");
 
-	/**
-	 * Adjusts container styles to prevent white frames in dark mode environments.
-	 * @param {boolean} isDark - Whether dark mode is active.
-	 */
-	function setContainerStyles(isDark) {
-		const body = document.body;
-		if (isDark) {
-			// Clear background of ancestors to remove "white frame" from containers.
-			let parent = el.parentElement;
-			while (parent && parent !== document.body) {
-				parent.style.setProperty(
-					"background-color",
-					"transparent",
-					"important",
-				);
-				parent.style.setProperty("padding", "0", "important");
-				parent = parent.parentElement;
-			}
-
-			if (body) {
-				body.style.setProperty("background-color", "#202124", "important");
-				body.style.setProperty("margin", "0", "important");
-				document.documentElement.style.setProperty(
-					"background-color",
-					"#202124",
-					"important",
-				);
-			}
-		} else {
-			// Cleanup styles when switching back to light mode
-			if (body) {
-				body.style.removeProperty("background-color");
-				body.style.removeProperty("margin");
-				document.documentElement.style.removeProperty("background-color");
-			}
-		}
-	}
-
 	/** Detects theme and applies necessary style overrides. */
 	function updateTheme() {
 		const body = document.body;
@@ -103,12 +56,8 @@ function render({ model, el }) {
 
 		if (isDark) {
 			el.classList.add("bigframes-dark-mode");
-			el.style.colorScheme = "dark";
-			setContainerStyles(true);
 		} else {
 			el.classList.remove("bigframes-dark-mode");
-			el.style.colorScheme = "light";
-			setContainerStyles(false);
 		}
 	}
 

tests/unit/display/test_anywidget.py

@@ -80,48 +80,6 @@ def handler(signum, frame):
             signal.alarm(0)
 
 
-def test_css_contains_dark_mode_media_query():
-    from bigframes.display.anywidget import TableWidget
-
-    mock_df = mock.create_autospec(bigframes.dataframe.DataFrame, instance=True)
-    # mock_df.columns and mock_df.dtypes are needed for __init__
-    mock_df.columns = ["col1"]
-    mock_df.dtypes = {"col1": "object"}
-
-    # Mock _block to avoid AttributeError during _set_table_html
-    mock_block = mock.Mock()
-    mock_block.has_index = False
-    mock_df._block = mock_block
-
-    with mock.patch.object(TableWidget, "_initial_load"):
-        widget = TableWidget(mock_df)
-        assert "@media (prefers-color-scheme: dark)" in widget._css
-
-
-def test_css_styles_traitlet_is_populated():
-    """Verify that css_styles traitlet is populated from the external CSS file."""
-    from bigframes.display.anywidget import TableWidget
-
-    # Mock the dataframe and its block
-    mock_df = mock.create_autospec(bigframes.dataframe.DataFrame, instance=True)
-    mock_df.columns = ["col1"]
-    mock_df.dtypes = {"col1": "object"}
-    mock_block = mock.Mock()
-    mock_block.has_index = False
-    mock_df._block = mock_block
-
-    # Mock _initial_load to avoid side effects
-    with mock.patch.object(TableWidget, "_initial_load"):
-        widget = TableWidget(mock_df)
-
-        # Check that css_styles is not empty
-        assert widget.css_styles
-
-        # Check that it contains expected CSS content (e.g. dark mode query)
-        assert "@media (prefers-color-scheme: dark)" in widget.css_styles
-        assert ".bigframes-widget" in widget.css_styles
-
-
 @pytest.fixture
 def mock_df():
     df = mock.create_autospec(bigframes.dataframe.DataFrame, instance=True)