I want do a dark mode button that when I click the Icon change(like this
)
But I don't find how to do this(only slide buttons). Btw I enable tailwind dark mode in tailwind.js with darkMode: 'class'. Soo what I should do for make this in Vue and Tailwind?
Related
Using vuetify and have a layout like:
<v-app id="inspire">
<v-system-bar app>
<v-spacer></v-spacer>
<Clock/>
</v-system-bar>
<v-navigation-drawer
v-model="drawer" app
>
...
</v-navigation-drawer>
...
Using vue 2, with router and no vuex yet.
My problem is that when my browser window gets narrow the drawer hides but there is no hamburger icon to click to get it back.
How do I make it so that it toggles on smaller screens, instead of just disappearing altogether?
The navigation drawer is nothing more then the sidebar itself. You could add a prop disable-resize-watcher to disable this functionality.
When you want to trigger the state of the navigation drawer you can use v-model to open and close the navigation drawer for example add v-model="menuIsOpen" to your navigation drawer and add #click="menuIsOpen = !menuIsOpen" to a button to make that trigger the navigation drawer.
I have svg icons that are conditionally rendered on vue component. The idea is to change the colour of the icon when the mouse hover over the icon, the icons are exactly the same except for colour.
I have built vue3 SPA project with cli, both svg icons are stored in assets folder of the src file.
Here is the code for conditionally rendering icons.
<div
class="icons"
v-on:mouseover="hoverMenu = true"
v-on:mouseout="hoverMenu = false"
>
<img
v-if="!hoverMenu"
title="Menu"
src="../assets/help_outline_24px.svg"
alt="icon"
/>
<img
v-else-if="hoverMenu"
title="Menu"
src="../assets/help_24px.svg"
alt="icon"
/>
</div>
Data binding
export default {
data: function () {
return {
hoverMenu: null,
}
},
}
The code runs and the icons change when hover over icons however the are two issues.
The first time user hover over the icon it takes longer to load the icon, there is a split or few seconds before the icon changes, by that time it is substituted by alt element text.
Sometimes the icons don't change when the mouse hover over icons repeatedly, e.g when mouse hover over icon it changes then it does't change back when mouse is out of icon as if the condition has not changed at all.
Please assist with the issues above, I'm still new to front-end and vue.
Thanks in advance.
I have a component that when scrolling a button remains at the same height as the header, that header has headerBackTitleVisible: true, and when pressing those buttons in that position, they do not work.
I have tried with headerMode to float or to screen but I still can't find the solution
I'm using nuxt.js and have installed Vuetify and have added a dark theme to one of my layout pages. So I have two layout pages (Light and Dark). I have mounted this to my layout to switch out the theme, so I can either use a dark theme page or a light one.
mounted(){
setTimeout(() => this.$vuetify.theme.dark = false, 0);
}
When the theme switches to dark it goes a grey colour by default. I want to change this grey colour to a dark blue colour. How can I change the variables to change the base black-gray colour to a base dark blue color?
I don't want to create a "Dark theme" in the nuxt.config.js file. This is not what I want to do because I then have to add, color="primary" to my dark theme everywhere.
I want to do is set my base colour to dark-blue instead of black-grey and then all colours in my theme will change. How can I do this?
Have you checked the docs for information about customizing the theme color palette.
The docs say that you can define this way the color definitions with colors of your choice.
This is an example plugin of the docs:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/lib/util/colors'
const vuetify = new Vuetify({
theme: {
themes: {
dark: {
primary: colors.blue.lighten3,
},
},
},
})
Listener onBlur works when i click on header of any tab, but event doesn't fire when I click on icon of another sidebar extension or when I close sidebar
opr.sidebarAction.onBlur.addListener(function(w) {
console.log('on blur event');
});
Seems like doubtful feature in Opera extensions API...
Listener onBlur must be on background page of the extension.