Skip to content

Commit 31fbdf5

Browse files
shuoweilshuoweil
committed
style: fix the color theme for dark mode
1 parent 01c3534 commit 31fbdf5

File tree

3 files changed

+105
-139
lines changed

3 files changed

+105
-139
lines changed

‎bigframes/display/html.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ def render_html(
4949
) -> str:
5050
"""Render a pandas DataFrame to HTML with specific styling."""
5151
orderable_columns = orderable_columns or []
52-
classes = "dataframe table table-striped table-hover"
52+
classes = "dataframe table"
5353
table_html_parts = [f'<table border="1" class="{classes}" id="{table_id}">']
5454
table_html_parts.append(_render_table_header(dataframe, orderable_columns))
5555
table_html_parts.append(_render_table_body(dataframe))

‎bigframes/display/table_widget.css‎

Lines changed: 95 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,80 @@
1515
*/
1616

1717
.bigframes-widget {
18+
/* Default Light Mode Variables */
19+
--bf-bg: white;
20+
--bf-fg: black;
21+
--bf-header-bg: #f5f5f5;
22+
--bf-row-odd-bg: white;
23+
--bf-row-even-bg: #f5f5f5;
24+
--bf-border-color: #ccc;
25+
--bf-null-fg: gray;
26+
--bf-error-bg: #fbe;
27+
--bf-error-border: red;
28+
--bf-error-fg: black;
29+
1830
display: flex;
1931
flex-direction: column;
32+
/* Double class to increase specificity + !important to override framework styles */
33+
background-color: var(--bf-bg) !important;
34+
color: var(--bf-fg) !important;
35+
font-family:
36+
"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
37+
padding: 0 !important;
38+
margin: 0 !important;
39+
box-sizing: border-box;
40+
}
41+
42+
.bigframes-widget * {
43+
box-sizing: border-box;
44+
}
45+
46+
/* Dark Mode Overrides via Media Query */
47+
@media (prefers-color-scheme: dark) {
48+
.bigframes-widget {
49+
--bf-bg: var(--vscode-editor-background, #202124);
50+
--bf-fg: white;
51+
--bf-header-bg: var(--vscode-editor-background, black);
52+
--bf-row-odd-bg: #383838;
53+
--bf-row-even-bg: #202124;
54+
--bf-border-color: #444;
55+
--bf-null-fg: #aaa;
56+
--bf-error-bg: #511;
57+
--bf-error-border: #f88;
58+
--bf-error-fg: #fcc;
59+
}
60+
}
61+
62+
/* Dark Mode Overrides via Explicit Class */
63+
.bigframes-widget.bigframes-dark-mode.bigframes-dark-mode {
64+
--bf-bg: var(--vscode-editor-background, #202124);
65+
--bf-fg: white;
66+
--bf-header-bg: var(--vscode-editor-background, black);
67+
--bf-row-odd-bg: #383838;
68+
--bf-row-even-bg: #202124;
69+
--bf-border-color: #444;
70+
--bf-null-fg: #aaa;
71+
--bf-error-bg: #511;
72+
--bf-error-border: #f88;
73+
--bf-error-fg: #fcc;
2074
}
2175

2276
.bigframes-widget .table-container {
2377
max-height: 620px;
2478
overflow: auto;
79+
background-color: var(--bf-bg);
80+
padding: 0;
81+
margin: 0;
2582
}
2683

2784
.bigframes-widget .footer {
2885
align-items: center;
29-
color: var(
30-
--colab-primary-text-color,
31-
var(--jp-ui-font-color0, var(--vscode-editor-foreground, black))
32-
);
3386
display: flex;
34-
font-family:
35-
"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
3687
font-size: 0.8rem;
3788
justify-content: space-between;
3889
padding: 8px;
90+
background-color: var(--bf-bg);
91+
color: var(--bf-fg);
3992
}
4093

4194
.bigframes-widget .footer > * {
@@ -71,49 +124,50 @@
71124
margin-right: 8px;
72125
}
73126

74-
.bigframes-widget table {
75-
border-collapse: collapse;
76-
color: var(
77-
--colab-primary-text-color,
78-
var(--jp-ui-font-color0, var(--vscode-editor-foreground, black))
79-
);
80-
background-color: var(
81-
--colab-primary-surface-color,
82-
var(--jp-layout-color0, var(--vscode-editor-background, white))
83-
);
127+
.bigframes-widget table,
128+
.bigframes-widget table.dataframe {
129+
border-collapse: collapse !important;
130+
border-spacing: 0 !important;
84131
text-align: left;
132+
width: auto !important; /* Fix stretching */
133+
background-color: var(--bf-bg) !important;
134+
color: var(--bf-fg) !important;
135+
/* Explicitly override border="1" defaults */
136+
border: 1px solid var(--bf-border-color) !important;
137+
box-shadow: none !important;
138+
outline: none !important;
139+
margin: 0 !important;
140+
}
141+
142+
.bigframes-widget tr {
143+
border: none !important;
85144
}
86145

87-
/* Light Mode Header: Light Gray */
88146
.bigframes-widget th {
89-
background-color: var(
90-
--colab-primary-surface-color,
91-
var(--jp-layout-color0, var(--vscode-editor-background, #f5f5f5))
92-
);
147+
background-color: var(--bf-header-bg) !important;
148+
color: var(--bf-fg) !important;
93149
padding: 0;
94150
position: sticky;
95151
text-align: left;
96152
top: 0;
97153
z-index: 1;
154+
border: 1px solid var(--bf-border-color) !important;
98155
}
99156

100157
.bigframes-widget td {
101158
padding: 0.5em;
159+
border: 1px solid var(--bf-border-color) !important;
160+
color: var(--bf-fg) !important;
102161
}
103162

104-
/* Light Mode Stripes: Odd = White, Even = Light Gray */
163+
.bigframes-widget table tbody tr:nth-child(odd),
105164
.bigframes-widget table tbody tr:nth-child(odd) td {
106-
background-color: var(
107-
--colab-primary-surface-color,
108-
var(--jp-layout-color0, var(--vscode-editor-background, white))
109-
);
165+
background-color: var(--bf-row-odd-bg) !important;
110166
}
111167

168+
.bigframes-widget table tbody tr:nth-child(even),
112169
.bigframes-widget table tbody tr:nth-child(even) td {
113-
background-color: var(
114-
--colab-primary-surface-color,
115-
var(--jp-layout-color0, var(--vscode-editor-background, #f5f5f5))
116-
);
170+
background-color: var(--bf-row-even-bg) !important;
117171
}
118172

119173
.bigframes-widget .bf-header-content {
@@ -141,6 +195,11 @@
141195
text-decoration: none;
142196
user-select: none;
143197
vertical-align: middle;
198+
color: inherit;
199+
background-color: transparent;
200+
border: 1px solid currentColor;
201+
border-radius: 4px;
202+
padding: 2px 8px;
144203
}
145204

146205
.bigframes-widget button:disabled {
@@ -149,11 +208,10 @@
149208
}
150209

151210
.bigframes-widget .bigframes-error-message {
152-
background-color: #fbe;
153-
border: 1px solid red;
211+
background-color: var(--bf-error-bg);
212+
border: 1px solid var(--bf-error-border);
213+
color: var(--bf-error-fg);
154214
border-radius: 4px;
155-
font-family:
156-
"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
157215
font-size: 14px;
158216
margin-bottom: 8px;
159217
padding: 8px;
@@ -168,101 +226,9 @@
168226
}
169227

170228
.bigframes-widget .null-value {
171-
color: gray;
172-
}
173-
174-
/*
175-
Dark Mode Styles
176-
Applied via @media query OR .bigframes-dark-mode class (detected via JS)
177-
*/
178-
179-
@media (prefers-color-scheme: dark) {
180-
.bigframes-widget .footer,
181-
.bigframes-widget table {
182-
color: var(
183-
--colab-primary-text-color,
184-
var(--jp-ui-font-color0, var(--vscode-editor-foreground, white))
185-
);
186-
background-color: var(
187-
--colab-primary-surface-color,
188-
var(--jp-layout-color0, var(--vscode-editor-background, #202124))
189-
);
190-
}
191-
192-
/* Dark Mode Header: Black or Theme Background */
193-
.bigframes-widget th {
194-
background-color: var(
195-
--colab-primary-surface-color,
196-
var(--jp-layout-color0, var(--vscode-editor-background, black))
197-
);
198-
}
199-
200-
/* Dark Mode Stripes: Odd = Charcoal (#383838), Even = Dark Gray (#202124) */
201-
.bigframes-widget table tbody tr:nth-child(odd) td {
202-
background-color: var(
203-
--colab-primary-surface-color,
204-
var(--jp-layout-color0, var(--vscode-editor-background, #383838))
205-
);
206-
}
207-
208-
.bigframes-widget table tbody tr:nth-child(even) td {
209-
background-color: var(
210-
--colab-primary-surface-color,
211-
var(--jp-layout-color0, var(--vscode-editor-background, #202124))
212-
);
213-
}
214-
215-
.bigframes-widget .bigframes-error-message {
216-
background-color: #511;
217-
border: 1px solid #f88;
218-
color: #fcc;
219-
}
220-
221-
.bigframes-widget .null-value {
222-
color: #aaa;
223-
}
224-
}
225-
226-
/* Duplicated Dark Mode rules for explicit class detection */
227-
.bigframes-widget.bigframes-dark-mode .footer,
228-
.bigframes-widget.bigframes-dark-mode table {
229-
color: var(
230-
--colab-primary-text-color,
231-
var(--jp-ui-font-color0, var(--vscode-editor-foreground, white))
232-
);
233-
background-color: var(
234-
--colab-primary-surface-color,
235-
var(--jp-layout-color0, var(--vscode-editor-background, #202124))
236-
);
237-
}
238-
239-
.bigframes-widget.bigframes-dark-mode th {
240-
background-color: var(
241-
--colab-primary-surface-color,
242-
var(--jp-layout-color0, var(--vscode-editor-background, black))
243-
);
244-
}
245-
246-
.bigframes-widget.bigframes-dark-mode table tbody tr:nth-child(odd) td {
247-
background-color: var(
248-
--colab-primary-surface-color,
249-
var(--jp-layout-color0, var(--vscode-editor-background, #383838))
250-
);
251-
}
252-
253-
.bigframes-widget.bigframes-dark-mode table tbody tr:nth-child(even) td {
254-
background-color: var(
255-
--colab-primary-surface-color,
256-
var(--jp-layout-color0, var(--vscode-editor-background, #202124))
257-
);
258-
}
259-
260-
.bigframes-widget.bigframes-dark-mode .bigframes-error-message {
261-
background-color: #511;
262-
border: 1px solid #f88;
263-
color: #fcc;
229+
color: var(--bf-null-fg);
264230
}
265231

266-
.bigframes-widget.bigframes-dark-mode .null-value {
267-
color: #aaa;
232+
.bigframes-widget .debug-info {
233+
border-top: 1px solid var(--bf-border-color) !important;
268234
}

‎bigframes/display/table_widget.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@ function render({ model, el }) {
3939
// Main container with a unique class for CSS scoping
4040
el.classList.add("bigframes-widget");
4141

42+
// Add error message container at the top
43+
const errorContainer = document.createElement("div");
44+
errorContainer.classList.add("error-message");
45+
46+
const tableContainer = document.createElement("div");
47+
tableContainer.classList.add("table-container");
48+
const footer = document.createElement("footer");
49+
footer.classList.add("footer");
50+
4251
// Theme detection logic
4352
function updateTheme() {
4453
const body = document.body;
@@ -66,15 +75,6 @@ function render({ model, el }) {
6675
attributeFilter: ["class", "data-theme", "data-vscode-theme-kind"],
6776
});
6877

69-
// Add error message container at the top
70-
const errorContainer = document.createElement("div");
71-
errorContainer.classList.add("error-message");
72-
73-
const tableContainer = document.createElement("div");
74-
tableContainer.classList.add("table-container");
75-
const footer = document.createElement("footer");
76-
footer.classList.add("footer");
77-
7878
// Pagination controls
7979
const paginationContainer = document.createElement("div");
8080
paginationContainer.classList.add("pagination");

0 commit comments

Comments
 (0)