yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add [data-theme=dark] CSS overrides for CRUD/tabular/card/input components

Browse Source 
Sage shell defaults to dark theme but bricks.css had no dark rules,
causing light-gray text (#8a8a8a) on light backgrounds (#fafafa/#efefef)
in CRUD tables — unreadable against the dark shell.

Added comprehensive [data-theme=dark] overrides:
- body: #CBD5E1 text on #0F172A bg
- .card/.tabular/.tabular-row: dark slate backgrounds
- .inputbox/.popup/.modal/.toolbar: dark variants
- .accordion/.tabpanel/.message: dark variants
This commit is contained in:
yumoqing 2026-05-28 11:37:50 +08:00
parent 565699bd6b
commit 447a3d91bc
1 changed files with 177 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
bricks/css/bricks.css
View File

@ -645,3 +645,180 @@ hr {
.inputbox:focus {
border-color: #007bff;
}
/* ========== Dark Theme (Sage Shell) ========== */
[data-theme="dark"] body,
[data-theme="dark"] {
color: #CBD5E1;
background-color: #0F172A;
}
[data-theme="dark"] .card {
background-color: #1E293B;
border: 1px solid #334155;
color: #E2E8F0;
}
[data-theme="dark"] .card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
border: 2px solid #60A5FA;
}
[data-theme="dark"] .subcard {
background-color: #1a2436;
}
[data-theme="dark"] .tabular {
background-color: #1E293B;
border: 1px solid #334155;
color: #CBD5E1;
}
[data-theme="dark"] .tabular-header-row {
background-color: #334155;
color: #F1F5F9;
}
[data-theme="dark"] .tabular-row:nth-child(odd) {
background-color: #1E293B;
}
[data-theme="dark"] .tabular-row:nth-child(even) {
background-color: #172033;
}
[data-theme="dark"] .tabular-row-selected {
color: #F87171;
}
[data-theme="dark"] .tabular-cell {
border: 1px solid #334155;
color: #CBD5E1;
}
[data-theme="dark"] .curpos {
background-color: #1E293B;
}
[data-theme="dark"] .inputbox {
background-color: #1E293B;
color: #E2E8F0;
border: 1px solid #475569;
}
[data-theme="dark"] .inputbox:focus {
border-color: #3B82F6;
}
[data-theme="dark"] .popup {
background-color: #1E293B;
color: #E2E8F0;
border: 1px solid #475569;
}
[data-theme="dark"] .modal {
background-color: #1E293B;
color: #E2E8F0;
border: 1px solid #475569;
}
[data-theme="dark"] .modal>.title {
background-color: #334155;
color: #F1F5F9;
}
[data-theme="dark"] .message {
background-color: #1E293B;
color: #E2E8F0;
border: 1px solid #475569;
}
[data-theme="dark"] .vtoolbar,
[data-theme="dark"] .htoolbar {
background-color: #1E293B;
border: 1px solid #334155;
}
[data-theme="dark"] .toolbar-button {
border: 1px solid #475569;
color: #CBD5E1;
}
[data-theme="dark"] .toolbar-button-active {
background-color: #334155;
}
[data-theme="dark"] .tabpanel {
background-color: #1E293B;
border: 3px solid #475569;
}
[data-theme="dark"] .tabpanel-content {
background-color: #172033;
border: 2px solid #475569;
}
[data-theme="dark"] .selected {
background-color: #334155;
}
[data-theme="dark"] .accordion-item {
border: 1px solid #334155;
}
[data-theme="dark"] .accordion-item:nth-child(odd) {
background-color: #1E293B;
}
[data-theme="dark"] .accordion-item:nth-child(even) {
background-color: #172033;
}
[data-theme="dark"] .accordion-item-header {
background-color: #334155;
}
[data-theme="dark"] .accordion-item-info {
background-color: #1E293B;
}
[data-theme="dark"] .accordion-item-info-selected {
background-color: #334155;
}
[data-theme="dark"] .titlebar {
background-color: #334155;
}
[data-theme="dark"] .droparea {
border: 2px dashed #475569;
color: #94A3B8;
}
[data-theme="dark"] .droparea:hover {
border-color: #60A5FA;
color: #60A5FA;
background: #172033;
}
[data-theme="dark"] pre {
background-color: #1E293B;
color: #E2E8F0;
}
[data-theme="dark"] hr {
background-color: #475569;
}
[data-theme="dark"] .auto-textarea {
background-color: #1E293B;
color: #E2E8F0;
border: 1px solid #475569;
}
[data-theme="dark"] .thinking-content {
background-color: #1a2436;
}
[data-theme="dark"] .resp-content {
background-color: #1a2436;
}
[data-theme="dark"] .resp-error {
background-color: #7F1D1D;
}
[data-theme="dark"] .llm_msg {
background-color: #334155;
color: #E2E8F0;
}
[data-theme="dark"] .user_msg {
background-color: #1E3A5F;
color: #E2E8F0;
}
[data-theme="dark"] .llm_title {
background-color: #1E293B;
}