Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings
This repository was archived by the owner on May 7, 2026. It is now read-only.

Commit 2763b41

Browse filesBrowse files
shuoweilshuoweil
authored
feat: Add dark mode to anywidget mode (#2365)
The table now automatically adapts to dark and light themes in environments like Colab and VS Code for anywidget mode. Verified at: 1. vs code notebook: - light mode: screen/5ne2xKyq6JGR5VQ - dark mode: screen/8cq6y3ugbs5wN3T 2. colab notebook: - light mode: screen/92W8xCdjGtfkQgo - dark mode: screen/4uYykxKA7wTuhot Fixes #<460861328> 🦕
1 parent 0f593c2 commit 2763b41
Copy full SHA for 2763b41

4 files changed

+713-603Lines changed: 713 additions & 603 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎bigframes/display/table_widget.css‎

Copy file name to clipboardExpand all lines: bigframes/display/table_widget.css
+109-23Lines changed: 109 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,83 @@
1414
* limitations under the License.
1515
*/
1616

17-
.bigframes-widget {
17+
/* Increase specificity to override framework styles without !important */
18+
.bigframes-widget.bigframes-widget {
19+
/* Default Light Mode Variables */
20+
--bf-bg: white;
21+
--bf-border-color: #ccc;
22+
--bf-error-bg: #fbe;
23+
--bf-error-border: red;
24+
--bf-error-fg: black;
25+
--bf-fg: black;
26+
--bf-header-bg: #f5f5f5;
27+
--bf-null-fg: gray;
28+
--bf-row-even-bg: #f5f5f5;
29+
--bf-row-odd-bg: white;
30+
31+
background-color: var(--bf-bg);
32+
box-sizing: border-box;
33+
color: var(--bf-fg);
1834
display: flex;
1935
flex-direction: column;
36+
font-family:
37+
'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;
38+
margin: 0;
39+
padding: 0;
40+
}
41+
42+
.bigframes-widget * {
43+
box-sizing: border-box;
44+
}
45+
46+
/* Dark Mode Overrides:
47+
* 1. @media (prefers-color-scheme: dark) - System-wide dark mode
48+
* 2. .bigframes-dark-mode - Explicit class for VSCode theme detection
49+
* 3. html[theme="dark"], body[data-theme="dark"] - Colab/Pantheon manual override
50+
*/
51+
@media (prefers-color-scheme: dark) {
52+
.bigframes-widget.bigframes-widget {
53+
--bf-bg: var(--vscode-editor-background, #202124);
54+
--bf-border-color: #444;
55+
--bf-error-bg: #511;
56+
--bf-error-border: #f88;
57+
--bf-error-fg: #fcc;
58+
--bf-fg: white;
59+
--bf-header-bg: var(--vscode-editor-background, black);
60+
--bf-null-fg: #aaa;
61+
--bf-row-even-bg: #202124;
62+
--bf-row-odd-bg: #383838;
63+
}
64+
}
65+
66+
.bigframes-widget.bigframes-dark-mode.bigframes-dark-mode,
67+
html[theme='dark'] .bigframes-widget.bigframes-widget,
68+
body[data-theme='dark'] .bigframes-widget.bigframes-widget {
69+
--bf-bg: var(--vscode-editor-background, #202124);
70+
--bf-border-color: #444;
71+
--bf-error-bg: #511;
72+
--bf-error-border: #f88;
73+
--bf-error-fg: #fcc;
74+
--bf-fg: white;
75+
--bf-header-bg: var(--vscode-editor-background, black);
76+
--bf-null-fg: #aaa;
77+
--bf-row-even-bg: #202124;
78+
--bf-row-odd-bg: #383838;
2079
}
2180

2281
.bigframes-widget .table-container {
82+
background-color: var(--bf-bg);
83+
margin: 0;
2384
max-height: 620px;
2485
overflow: auto;
86+
padding: 0;
2587
}
2688

2789
.bigframes-widget .footer {
2890
align-items: center;
29-
/* TODO(b/460861328): We will support dark mode in a media selector once we
30-
* determine how to override the background colors as well. */
31-
color: black;
91+
background-color: var(--bf-bg);
92+
color: var(--bf-fg);
3293
display: flex;
33-
font-family:
34-
"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
3594
font-size: 0.8rem;
3695
justify-content: space-between;
3796
padding: 8px;
@@ -70,23 +129,51 @@
70129
margin-right: 8px;
71130
}
72131

73-
.bigframes-widget table {
132+
.bigframes-widget table.bigframes-widget-table,
133+
.bigframes-widget table.dataframe {
134+
background-color: var(--bf-bg);
135+
border: 1px solid var(--bf-border-color);
74136
border-collapse: collapse;
75-
/* TODO(b/460861328): We will support dark mode in a media selector once we
76-
* determine how to override the background colors as well. */
77-
color: black;
137+
border-spacing: 0;
138+
box-shadow: none;
139+
color: var(--bf-fg);
140+
margin: 0;
141+
outline: none;
78142
text-align: left;
143+
width: auto; /* Fix stretching */
144+
}
145+
146+
.bigframes-widget tr {
147+
border: none;
79148
}
80149

81150
.bigframes-widget th {
82-
background-color: var(--colab-primary-surface-color, var(--jp-layout-color0));
151+
background-color: var(--bf-header-bg);
152+
border: 1px solid var(--bf-border-color);
153+
color: var(--bf-fg);
83154
padding: 0;
84155
position: sticky;
85156
text-align: left;
86157
top: 0;
87158
z-index: 1;
88159
}
89160

161+
.bigframes-widget td {
162+
border: 1px solid var(--bf-border-color);
163+
color: var(--bf-fg);
164+
padding: 0.5em;
165+
}
166+
167+
.bigframes-widget table tbody tr:nth-child(odd),
168+
.bigframes-widget table tbody tr:nth-child(odd) td {
169+
background-color: var(--bf-row-odd-bg);
170+
}
171+
172+
.bigframes-widget table tbody tr:nth-child(even),
173+
.bigframes-widget table tbody tr:nth-child(even) td {
174+
background-color: var(--bf-row-even-bg);
175+
}
176+
90177
.bigframes-widget .bf-header-content {
91178
box-sizing: border-box;
92179
height: 100%;
@@ -106,8 +193,13 @@
106193
}
107194

108195
.bigframes-widget button {
196+
background-color: transparent;
197+
border: 1px solid currentColor;
198+
border-radius: 4px;
199+
color: inherit;
109200
cursor: pointer;
110201
display: inline-block;
202+
padding: 2px 8px;
111203
text-align: center;
112204
text-decoration: none;
113205
user-select: none;
@@ -120,11 +212,10 @@
120212
}
121213

122214
.bigframes-widget .bigframes-error-message {
123-
background-color: #fbe;
124-
border: 1px solid red;
215+
background-color: var(--bf-error-bg);
216+
border: 1px solid var(--bf-error-border);
125217
border-radius: 4px;
126-
font-family:
127-
"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
218+
color: var(--bf-error-fg);
128219
font-size: 14px;
129220
margin-bottom: 8px;
130221
padding: 8px;
@@ -139,14 +230,9 @@
139230
}
140231

141232
.bigframes-widget .null-value {
142-
color: gray;
143-
}
144-
145-
.bigframes-widget td {
146-
padding: 0.5em;
233+
color: var(--bf-null-fg);
147234
}
148235

149-
.bigframes-widget tr:hover td,
150-
.bigframes-widget td.row-hover {
151-
background-color: var(--colab-hover-surface-color, var(--jp-layout-color2));
236+
.bigframes-widget .debug-info {
237+
border-top: 1px solid var(--bf-border-color);
152238
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.