revolist / revogrid

Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋
https://rv-grid.com
MIT License
2.78k stars 175 forks source link

Theming select menu and filters #627

Open MattTheCuber opened 6 hours ago

MattTheCuber commented 6 hours ago

This issue is for https://github.com/revolist/revogrid-column-select and this repo.

Currently, in dark theme, select menus and filtering look quite poor. You can see this by going to the official demo: https://rv-grid.com/demo/

image

Is there a easy way to style these depending on the theme? Currently we are using Vuetify and using the theme variables like this:

revogr-filter-panel {
    background-color: rgb(var(--v-theme-surface-light)) !important;
}
revogr-filter-panel > label {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
.select-css {
    background-color: rgb(var(--v-theme-surface));
    background-image: none;
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
.select-css:focus {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
revogr-filter-panel input[type='text'] {
    background-color: rgb(var(--v-theme-surface)) !important;
}
#revo-button-reset {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.and-or-button {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
}

However, we are unable to themed styles the dropdown because it is stuck in the root body and not instead of any Vuetify containers.

ConnorNoddin commented 6 hours ago

Bump. I have also encountered this issue in the past