Theming select menu and filters

[MattTheCuber]

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/

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]

Bump. I have also encountered this issue in the past

[m2a2x]

hi @MattTheCuber
there are some options for you:

1. For dropdown you can add to column level appendTo: 'class name'
2. filter panel is inside of the dom, can be colorized the way you described

By the way you can use vitepress components inside of the grid too, we've built a lot of applications this way.

[MattTheCuber]

Hello @m2a2x,

Thank you for the help. I tried adding the appendTo keyword to the column properties with a root div's class (appendTo: 'v-application'). This put the div nested inside of the cell instead of the root div, resulting in fixing the styling but positioning the dropdown in an undesired location.

Also, can you describe how the filter panel was updated to allow theming?

[m2a2x]

Hi @MattTheCuber

1. I think only in the latest version of dropdown is should work, also it should be a selector: '.v-application'
2. Panel is inside of the grid I suppose hence you can reach it same as grid. Also in the latest release this would be with black theme support.

[MattTheCuber]

That worked, thank you!

FYI, here is the CSS I used if anyone else wants to theme these components:

.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'] {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
    background-color: rgb(var(--v-theme-surface-light)) !important;
}

.revo-dropdown-list .dropdown-inner {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
    background-color: rgb(var(--v-theme-surface)) !important;
}

[m2a2x]

@MattTheCuber In the future there is a plan to provide revogrid with full theme support, just allow some vars and set them through js, but it's a long term plan

[MattTheCuber]

Great!

I didn't care too much about specific theming colors, I just wanted the drop downs and filter menu to match the RevoGrid theme (dark/light).

[MattTheCuber]

If anyone wants it, this is what I used for the date column type:

.duet-date,
.duet-date__select-label,
.duet-date__table,
.duet-date__day[aria-pressed='false']:not(:active) {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
}
.duet-date__input {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
    background: rgb(var(--v-theme-surface)) !important;
}
.duet-date__dialog-content {
    background: rgb(var(--v-theme-surface)) !important;
}
.duet-date select {
    background-color: rgb(var(--v-theme-surface)) !important;
}
.duet-date__toggle,
.duet-date__prev,
.duet-date__next {
    background: rgb(var(--v-theme-secondary)) !important;
}

Note: appendTo must be an element, not the selector class.