Style override - some Vue elements not visible in DB2

[nygma2004]

@hotNipi helped me to create a style change as the v-menu was using the wrong background color. I found two similar case, but I can't really figure out myself how to create a style to fix the colors properly:

Case 1: icons in v-btn in the v-toolbar appear white and not visible. Check this example in DB2: Button component — Vuetify
I fixed this by adding color="black" for each v-btn in the template node.

Case 2: column headers in the v-data-table disappear when on hover. This only works if the column is enabled for sorting, but that is the default behaviour.
Check out this simple example:

<template>
  <v-data-table :items="items"></v-data-table>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                items : [
                    {
                    name: 'African Elephant',
                    species: 'Loxodonta africana',
                    diet: 'Herbivore',
                    habitat: 'Savanna, Forests',
                    }
                    // ... more items
                    ]
            }
        }
    }
</script>

[hotNipi]

Tried briefly. Nothing to report. It may take to have same setup and CSS you have and maybe some custom styles affect cos not targeted properly so yeah... Not easy to say anything.

[nygma2004]

Interesting. I am not really using anything custom. I copied the LED gauge examples from the main DB2 discussion. I think that has a few special styles. Let me delete those and try again

[hotNipi]

v-toolbar

Do you see same or similar?

[nygma2004]

Yes, the same. Looks better in black

[hotNipi]

Problem is that not all root variables are handled to have colors to stand out. I'd call it a bug. But it's kind of Royal size.
See that v-toolbar uses --v-theme-on-surface-variant: 238,238,238; for background.

If you change dashboard group background colors this is not changed. Thus it can't be visible in every condition.

Such things will happen if root variables not adjusted as theme but one by one. That bug should be reported but as dashboard doesn't provide all possible vuetify elements - who knows what to test against what kind of widget --- well, currently it's a mess.
61 colors to manage ...

Of course you can override those for now.

.v-toolbar{
background: ...
color: ...
}

[nygma2004]

As you said there always be some like this. There are too many Vuetify components to handle all of them.

When I tried to figure this out, I was looking at the button, not the toolbar and I did not realize the toolbar needed change.

<style>
    .v-toolbar{
        color: black
    }
</style>

I was ok with the background color, but which this at least I don't need to add the color to each button to be visible.

[hotNipi]

color: black

And if you ever decide to have consistent text color all over the dashboard, and it will be something else than black - this is a thing to adjust.
But good enough for experimental state or so..

[nygma2004]

You mean create a variable for this color and specify it on a UI scoped template node, right?