fix(UI): Dataframe widget does not use consistent text color (#1257)

Especially in in dark mode. It now looks like: ![Screenshot 2025-01-29 at 19 03 35](https://github.com/user-attachments/assets/4924e6af-57da-4938-bb0f-55cda7e0922a)
probabl-ai · Jan 30, 2025 · 2503fbd · 2503fbd
1 parent 0884b30
commit 2503fbd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/skore-ui/src/components/DataFrameWidget.vue b/skore-ui/src/components/DataFrameWidget.vue
@@ -206,6 +206,7 @@ watch(
       & tr {
         position: relative;
         padding: var(--spacing-4);
+        color: var(--color-text-secondary);
 
         & td {
           padding: var(--spacing-4);

diff --git a/skore-ui/src/components/TextInput.vue b/skore-ui/src/components/TextInput.vue
@@ -53,18 +53,23 @@ onMounted(() => {
 
   .icon {
     margin: 0 var(--spacing-10);
+    color: var(--color-text-primary);
   }
 
   input {
     width: 100%;
     min-width: 0;
     border: none;
     background-color: transparent;
-    color: inherit;
+    color: var(--color-text-primary);
 
     &:focus {
       outline: none;
     }
+
+    &::placeholder {
+      color: var(--color-text-secondary);
+    }
   }
 
   &:has(input:focus) {