I'm working on a Vue.js project that uses PrimeVue attributes. I needed a dropdown menu and I used PrimeVue's . It works great, but when I select an option on the dropdown, the selected option text becomes white. Dropdown itself is also white, so I cannot see the chosen option. You should know that this issue doesn't happen when I use a light PrimeVue theme. But when I use a dark PrimeVue theme, this issue appears.
PrimeVue themes I am using:
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
Again, the dark one has the problem. So, I want to change the color of the text inside the Dropdown. I thought that if I make the text color black as a fixed color, the issue would be handled. Or any other suggestions?
I tried to assign a background-color to black but it did not solve my problem.
Related
I'm rendering a CommandButton with only an icon inside a container with a dark background with gradient and I have set the background color of the button to be transparent. (Note that it is transparent because the container's background color has a gradient.)
The problem I have is that since the default focus outline for the button is black and it's not visible against the dark background. How can I change this so that the focus outline becomes the invert color of the primary color?
I can always attach a custom CSS to change the outline color, but I'm looking for the correct way supported by the Fluent UI framework. I noticed that the Button component puts a white background color when the primary=true prop is specified. So, there seems to be a way to change the outline color, but I could not really figure out how. I also looked into the source code, and it takes a theme object and generates a class name, but this still did not tell me the full story.
There are sometimes ::after selectors in play with FluentUI focus behavior. The "Chrome version >= 86" portion of this answer shows how to put Chrome in a state that will yet you inspect your components without losing focus in the page when you navigate in DevTools.
When I encounter focus styling that I want to change in Fluent, I can find out what's applying the styles I wish to alter using this method and then override them.
Am already had a navbar and a tags tabs, all works good with my styling, now am trying to convert it to bootstrap-vue. non is working.
Start simple, i followed this question here [https://stackoverflow.com/questions/49105258/change-title-color-of-bootstrap-vue-tab-title][1]
but the styling does not change. what would be the right way, to change only the background color of titles for all tabs, and make it act as sticky menue?
After long search i got help. and all i wanted is to use
::v-deep {}
on my styling.
I have integrated Bootstrap Vue into my project and am having a hard time customizing it.
Specifically, I am talking about the Navbar component.
I have read the documentation and saw that I can apply a variant to the navbar that will define the color of the whole navbar.
Thing is, I didn't provide a variant to the navbar (and don't want to) and when it collapses, the collapsed menu icon (hamburger menu icon) is black and is not visible due to the background color of my website.
I have inspected the DOM of the website and used the following CSS rules and selectors:
.navbar-toggle
.navbar-toggler
.navbar-toggler-icon
With each of them I tried to apply the rule:
color: white !important;
but this had no result.
I have looked online and in SO, but found nothing that addresses this scenario.
Navbar open:
Navbar collapsed:
Obviously, I can change the background color of my website, but I prefer not to do that as I do not want to change the look and feel of the website just because of a minor issue (and I want to be able to know how to overcome this).
Link to code
Looking at your code - .navbar-toggle and .navbar-toggler are just plain div's, so color prop would affect only text color.
If you are trying to change icon color - it is an inline background svg. you can only override it with your own file.
I managed to solve this scenario by using the following selector:
.navbar-toggler > .navbar-toggler-icon {
background-color: white;
}
#Ivan Klochkov pointed me in the right direction, but I had to mess a bit with the correct selectors.
I have created an app starting from the Grid App template (C#/XAML) of Visual Studio 2012. I'm using the Light Theme and I have customized the GridViewItem brushes so that the color blue is used when I move the mouse over an item.
Now I would like to change the foreground color of the text that is shown in the GridView when the mouse is over the item, using white to make it more readable. Is it possible, considering that the layout of GridView items is defined in a DataTemplate?
Here is an blog post which demonstrates styling of GridViewItem.
anyone out there know how to make different hover and selected states for tabs within the same spry tabbed menu?
im having a lot of trouble....
if you mean their styles you can simply edit its related CSS file and make any style you need