Skip to content

Commit 2f65d19

Browse files
claudeclaude
committed
fix: add dark mode styles to all remaining components
Components missing dark mode coverage: command palette, search, knowledge graph, database views, git/repo picker, and breadcrumbs. Also imports git-styles.css in globals.css. https://claude.ai/code/session_01QddASAFJgFoPPTDS88nkq2
1 parent 290cfc9 commit 2f65d19

7 files changed

Lines changed: 225 additions & 0 deletions

File tree

‎packages/ui/src/components/command-palette/command-palette-styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,14 @@
8383
color: #9ca3af;
8484
font-size: 0.875rem;
8585
}
86+
87+
/* Dark mode */
88+
.dark .cept-command-overlay { background: rgba(0, 0, 0, 0.5); }
89+
.dark .cept-command-palette { background: #262626; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); }
90+
.dark .cept-command-input { border-bottom-color: #404040; color: #e5e5e5; }
91+
.dark .cept-command-input::placeholder { color: #71717a; }
92+
.dark .cept-command-category { color: #71717a; }
93+
.dark .cept-command-item { color: #d4d4d8; }
94+
.dark .cept-command-item:hover,
95+
.dark .cept-command-item.is-selected { background-color: rgba(255, 255, 255, 0.06); }
96+
.dark .cept-command-empty { color: #71717a; }

‎packages/ui/src/components/database/database-styles.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1141,3 +1141,145 @@
11411141
.cept-prop-editor-readonly-value {
11421142
color: #6b7280;
11431143
}
1144+
1145+
/* Dark mode */
1146+
/* Schema editor */
1147+
.dark .cept-schema-title { color: #d4d4d8; }
1148+
.dark .cept-schema-add-btn { color: #818cf8; }
1149+
.dark .cept-schema-add-btn:hover { background: #312e81; }
1150+
.dark .cept-schema-property-view:hover { background: rgba(255, 255, 255, 0.03); }
1151+
.dark .cept-schema-drag-handle { color: #525252; }
1152+
.dark .cept-schema-property-name { color: #d4d4d8; }
1153+
.dark .cept-schema-property-type { color: #a1a1aa; background: #333; }
1154+
.dark .cept-schema-input { border-color: #404040; background: #333; color: #e5e5e5; }
1155+
.dark .cept-schema-input:focus { border-color: #6366f1; }
1156+
.dark .cept-schema-select { border-color: #404040; background: #333; color: #e5e5e5; }
1157+
.dark .cept-schema-select:focus { border-color: #6366f1; }
1158+
.dark .cept-schema-btn { color: #a1a1aa; }
1159+
.dark .cept-schema-btn:hover { background: rgba(255, 255, 255, 0.06); }
1160+
.dark .cept-schema-btn--save { color: #818cf8; }
1161+
.dark .cept-schema-btn--save:hover { background: #312e81; }
1162+
.dark .cept-schema-btn--danger { color: #ef4444; }
1163+
.dark .cept-schema-btn--danger:hover { background: rgba(239, 68, 68, 0.1); }
1164+
.dark .cept-schema-add-form { background: #1e1e1e; border-color: #404040; }
1165+
1166+
/* Table view */
1167+
.dark .cept-table-toolbar { border-bottom-color: #404040; }
1168+
.dark .cept-table-toolbar-btn { border-color: #404040; background: #262626; color: #a1a1aa; }
1169+
.dark .cept-table-toolbar-btn:hover { background: #333; }
1170+
.dark .cept-table-active-filter { color: #a5b4fc; background: #312e81; }
1171+
.dark .cept-table-clear-filter { color: #a1a1aa; }
1172+
.dark .cept-table-row-count { color: #71717a; }
1173+
.dark .cept-table-filter-form { border-bottom-color: #404040; background: #1e1e1e; }
1174+
.dark .cept-table-filter-form select,
1175+
.dark .cept-table-filter-form input { border-color: #404040; background: #333; color: #e5e5e5; }
1176+
.dark .cept-table-header { color: #a1a1aa; border-bottom-color: #404040; }
1177+
.dark .cept-table-header:hover { background: #1e1e1e; }
1178+
.dark .cept-table-row:hover { background: #1e1e1e; }
1179+
.dark .cept-table-cell { color: #d4d4d8; border-bottom-color: #333; }
1180+
.dark .cept-table-add-row { color: #71717a; }
1181+
.dark .cept-table-add-row:hover { background: #1e1e1e; color: #a1a1aa; }
1182+
1183+
/* Board view */
1184+
.dark .cept-board-column { background: #1e1e1e; }
1185+
.dark .cept-board-column.is-drag-over { background: #312e81; }
1186+
.dark .cept-board-column-title { color: #d4d4d8; }
1187+
.dark .cept-board-column-count { color: #71717a; }
1188+
.dark .cept-board-card { background: #262626; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
1189+
.dark .cept-board-card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
1190+
.dark .cept-board-card-title { color: #e5e5e5; }
1191+
.dark .cept-board-card-property-name { color: #71717a; }
1192+
.dark .cept-board-card-property-value { color: #a1a1aa; }
1193+
.dark .cept-board-add-card { color: #71717a; }
1194+
.dark .cept-board-add-card:hover { color: #a1a1aa; }
1195+
1196+
/* Calendar view */
1197+
.dark .cept-calendar-toolbar { border-bottom-color: #404040; }
1198+
.dark .cept-calendar-nav-btn { border-color: #404040; background: #262626; color: #a1a1aa; }
1199+
.dark .cept-calendar-nav-btn:hover { background: #333; }
1200+
.dark .cept-calendar-title { color: #d4d4d8; }
1201+
.dark .cept-calendar-today-btn { border-color: #404040; background: #262626; color: #a1a1aa; }
1202+
.dark .cept-calendar-today-btn:hover { background: #333; }
1203+
.dark .cept-calendar-weekdays { border-bottom-color: #404040; }
1204+
.dark .cept-calendar-weekday { color: #71717a; }
1205+
.dark .cept-calendar-day { border-right-color: #333; border-bottom-color: #333; }
1206+
.dark .cept-calendar-day.is-other-month { background: #1a1a1a; }
1207+
.dark .cept-calendar-day.is-other-month .cept-calendar-day-number { color: #404040; }
1208+
.dark .cept-calendar-day-number { color: #a1a1aa; }
1209+
.dark .cept-calendar-event { background: #312e81; color: #a5b4fc; }
1210+
.dark .cept-calendar-event:hover { background: #3730a3; }
1211+
.dark .cept-calendar-add-event { color: #404040; }
1212+
.dark .cept-calendar-day:hover .cept-calendar-add-event { color: #71717a; }
1213+
1214+
/* Map view */
1215+
.dark .cept-map-placeholder { background: #1e1e1e; color: #71717a; }
1216+
.dark .cept-map-marker-list { border-top-color: #404040; }
1217+
.dark .cept-map-marker-item { border-bottom-color: #333; }
1218+
.dark .cept-map-marker-item:hover { background: #1e1e1e; }
1219+
.dark .cept-map-marker-title { color: #d4d4d8; }
1220+
.dark .cept-map-marker-coords { color: #71717a; }
1221+
1222+
/* Gallery view */
1223+
.dark .cept-gallery-card { border-color: #404040; }
1224+
.dark .cept-gallery-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
1225+
.dark .cept-gallery-cover { background: #1e1e1e; }
1226+
.dark .cept-gallery-cover-empty { background: #1e1e1e; }
1227+
.dark .cept-gallery-card-title { color: #e5e5e5; }
1228+
.dark .cept-gallery-card-property-name { color: #71717a; }
1229+
.dark .cept-gallery-card-property-value { color: #a1a1aa; }
1230+
.dark .cept-gallery-add { border-color: #404040; color: #71717a; }
1231+
.dark .cept-gallery-add:hover { border-color: #525252; color: #a1a1aa; }
1232+
1233+
/* List view */
1234+
.dark .cept-list-item { border-bottom-color: #333; }
1235+
.dark .cept-list-item.is-expanded { background: #1e1e1e; }
1236+
.dark .cept-list-item-header:hover { background: rgba(255, 255, 255, 0.03); }
1237+
.dark .cept-list-item-toggle { color: #71717a; }
1238+
.dark .cept-list-item-title { color: #d4d4d8; }
1239+
.dark .cept-list-item-title:hover { color: #e5e5e5; }
1240+
.dark .cept-list-item-property-name { color: #71717a; }
1241+
.dark .cept-list-item-property-value { color: #a1a1aa; }
1242+
.dark .cept-list-add { color: #71717a; }
1243+
.dark .cept-list-add:hover { background: #1e1e1e; color: #a1a1aa; }
1244+
1245+
/* Linked database */
1246+
.dark .cept-linked-db { border-color: #404040; }
1247+
.dark .cept-linked-db-header { border-bottom-color: #333; }
1248+
.dark .cept-linked-db-icon { color: #818cf8; }
1249+
.dark .cept-linked-db-name { color: #d4d4d8; }
1250+
.dark .cept-linked-db-name:hover { color: #e5e5e5; }
1251+
.dark .cept-linked-db-name-input { border-color: #404040; background: #333; color: #e5e5e5; }
1252+
.dark .cept-linked-db-name-input:focus { border-color: #6366f1; }
1253+
.dark .cept-linked-db-source { color: #71717a; }
1254+
.dark .cept-linked-db-toolbar { border-bottom-color: #404040; }
1255+
.dark .cept-linked-db-tab { color: #a1a1aa; }
1256+
.dark .cept-linked-db-tab:hover { color: #d4d4d8; }
1257+
.dark .cept-linked-db-tab.is-active { color: #818cf8; border-bottom-color: #818cf8; }
1258+
.dark .cept-linked-db-placeholder { color: #71717a; }
1259+
1260+
/* Select / Multi-select */
1261+
.dark .cept-select-trigger,
1262+
.dark .cept-multiselect-trigger { border-color: #404040; }
1263+
.dark .cept-select-trigger:hover,
1264+
.dark .cept-multiselect-trigger:hover { border-color: #525252; }
1265+
.dark .cept-select-placeholder { color: #71717a; }
1266+
.dark .cept-select-tag { background: #333; color: #d4d4d8; }
1267+
.dark .cept-select-clear { color: #71717a; }
1268+
.dark .cept-select-clear:hover { color: #a1a1aa; }
1269+
.dark .cept-select-dropdown { background: #262626; border-color: #404040; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
1270+
.dark .cept-select-search { border-bottom-color: #333; color: #e5e5e5; }
1271+
.dark .cept-select-option { color: #d4d4d8; }
1272+
.dark .cept-select-option:hover { background: #333; }
1273+
.dark .cept-select-option.is-selected { background: #312e81; }
1274+
.dark .cept-select-check { color: #818cf8; }
1275+
.dark .cept-select-create { color: #818cf8; }
1276+
.dark .cept-select-create:hover { background: #312e81; }
1277+
.dark .cept-select-empty { color: #71717a; }
1278+
1279+
/* Property editors */
1280+
.dark .cept-prop-editor-input { border-color: #404040; background: #333; color: #e5e5e5; }
1281+
.dark .cept-prop-editor-input:focus { border-color: #6366f1; }
1282+
.dark .cept-prop-editor-url-link { color: #818cf8; }
1283+
.dark .cept-prop-editor-readonly { background: #1e1e1e; }
1284+
.dark .cept-prop-editor-readonly-label { color: #71717a; }
1285+
.dark .cept-prop-editor-readonly-value { color: #a1a1aa; }

‎packages/ui/src/components/git/git-styles.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,3 +240,29 @@
240240
opacity: 0.5;
241241
cursor: not-allowed;
242242
}
243+
244+
/* Dark mode */
245+
.dark .cept-repo-picker-message { color: #a1a1aa; }
246+
.dark .cept-repo-picker-signin { background: #404040; }
247+
.dark .cept-repo-picker-signin:hover { background: #525252; }
248+
.dark .cept-repo-picker-username { color: #e5e5e5; }
249+
.dark .cept-repo-picker-signout { border-color: #404040; color: #a1a1aa; }
250+
.dark .cept-repo-picker-search { border-color: #404040; background: #333; color: #e5e5e5; }
251+
.dark .cept-repo-picker-filter { border-color: #404040; color: #a1a1aa; }
252+
.dark .cept-repo-picker-filter.is-active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
253+
.dark .cept-repo-picker-refresh,
254+
.dark .cept-repo-picker-back { border-color: #404040; color: #a1a1aa; }
255+
.dark .cept-repo-picker-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
256+
.dark .cept-repo-picker-list { border-color: #404040; }
257+
.dark .cept-repo-picker-item { border-bottom-color: #333; }
258+
.dark .cept-repo-picker-item:hover { background: #333; }
259+
.dark .cept-repo-picker-item-name { color: #e5e5e5; }
260+
.dark .cept-repo-picker-badge { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
261+
.dark .cept-repo-picker-item-desc { color: #a1a1aa; }
262+
.dark .cept-repo-picker-item-meta { color: #71717a; }
263+
.dark .cept-repo-picker-loading,
264+
.dark .cept-repo-picker-empty { color: #a1a1aa; }
265+
.dark .cept-repo-picker-create { border-color: #404040; }
266+
.dark .cept-repo-picker-label { color: #d4d4d8; }
267+
.dark .cept-repo-picker-input { border-color: #404040; background: #333; color: #e5e5e5; }
268+
.dark .cept-repo-picker-checkbox-label { color: #d4d4d8; }

‎packages/ui/src/components/knowledge-graph/knowledge-graph-styles.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,3 +257,25 @@
257257
color: #9ca3af;
258258
font-size: 0.875rem;
259259
}
260+
261+
/* Dark mode */
262+
.dark .cept-knowledge-graph { background: #1e1e1e; }
263+
.dark .cept-graph-control-btn { background: #262626; border-color: #404040; color: #d4d4d8; }
264+
.dark .cept-graph-control-btn:hover { background: #333; }
265+
.dark .cept-graph-depth-slider { background: #262626; border-color: #404040; color: #d4d4d8; }
266+
.dark .cept-graph-filter-chip { background: #262626; border-color: #404040; color: #d4d4d8; }
267+
.dark .cept-graph-filter-chip.is-active { border-color: #6366f1; background: #312e81; color: #a5b4fc; }
268+
.dark .cept-graph-toolbar { border-bottom-color: #404040; background: #262626; }
269+
.dark .cept-graph-mode-btn { border-color: #404040; background: #262626; color: #a1a1aa; }
270+
.dark .cept-graph-mode-btn:hover:not(:disabled) { background: #333; }
271+
.dark .cept-graph-mode-btn.is-active { background: #312e81; border-color: #6366f1; color: #a5b4fc; }
272+
.dark .cept-graph-toggle-label { color: #a1a1aa; }
273+
.dark .cept-graph-separator { background: #404040; }
274+
.dark .cept-graph-focus-label { color: #d4d4d8; }
275+
.dark .cept-graph-depth-control { color: #a1a1aa; }
276+
.dark .cept-graph-filter-bar { border-bottom-color: #404040; background: #1e1e1e; }
277+
.dark .cept-graph-filter-label { color: #71717a; }
278+
.dark .cept-graph-animation-controls { border-bottom-color: #404040; background: #262626; }
279+
.dark .cept-graph-animation-time { color: #d4d4d8; }
280+
.dark .cept-graph-animation-counter { color: #71717a; }
281+
.dark .cept-graph-animation-empty { color: #71717a; }

‎packages/ui/src/components/search/search-styles.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,19 @@
114114
color: #9ca3af;
115115
font-size: 0.875rem;
116116
}
117+
118+
/* Dark mode */
119+
.dark .cept-search-overlay { background: rgba(0, 0, 0, 0.5); }
120+
.dark .cept-search-panel { background: #262626; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); }
121+
.dark .cept-search-input-wrapper { border-bottom-color: #404040; }
122+
.dark .cept-search-input-icon { color: #71717a; }
123+
.dark .cept-search-input { color: #e5e5e5; }
124+
.dark .cept-search-input::placeholder { color: #71717a; }
125+
.dark .cept-search-result:hover,
126+
.dark .cept-search-result.is-selected { background-color: rgba(255, 255, 255, 0.06); }
127+
.dark .cept-search-result-title { color: #e5e5e5; }
128+
.dark .cept-search-result-snippet { color: #a1a1aa; }
129+
.dark .cept-search-result-meta { color: #71717a; }
130+
.dark .cept-search-result-type { background: #333; color: #a1a1aa; }
131+
.dark .cept-search-loading,
132+
.dark .cept-search-empty { color: #71717a; }

‎packages/ui/src/components/topbar/topbar-styles.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,10 @@
5757
font-size: 0.875rem;
5858
flex-shrink: 0;
5959
}
60+
61+
/* Dark mode */
62+
.dark .cept-breadcrumbs { color: #a1a1aa; }
63+
.dark .cept-breadcrumb-separator { color: #525252; }
64+
.dark .cept-breadcrumb-link { color: #a1a1aa; }
65+
.dark .cept-breadcrumb-link:hover { background-color: rgba(255, 255, 255, 0.06); color: #d4d4d8; }
66+
.dark .cept-breadcrumb-current { color: #e5e5e5; }

‎packages/ui/src/styles/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@
1212
@import '../components/app-menu/app-menu-styles.css';
1313
@import '../components/settings/settings-styles.css';
1414
@import '../components/shared/toast-styles.css';
15+
@import '../components/git/git-styles.css';

0 commit comments

Comments
 (0)
⚡