My Vuetify App now can correctly toggle to darkmode (hooray!) however, when a full page refresh occurs, the style colors do not change (my primary color is kept from the light mode)
I can toggle to light, then back to dark, and the colors shift correctly to the dark theme's colors.
net-net
what is going on? from what i am reading, all i need to do is set this.$vuetify.theme.dark = true in the app mounted method, but it doesn't work...
UPDATE
we are using a nuxt layout, and setting the dark = true on the vuetify theme:
mounted() {
console.log('darkMode:', this.darkMode);
this.$vuetify.theme.dark = this.darkMode;
},
Did some digging, found that this is a known issue with the darkmode vuetify meta data:
https://github.com/vuetifyjs/vuetify/issues/13378
Update:
the git hub issue was closed, but the expected workaround did not work for me.
I ended up throwing a half millisecond setTimeout to reset the this.$vuetify.theme.dark = true due to the meta code changing it again to false midway through the darkmode being applied.
Related
In my react-native app (using native-base as the component library). I have been trying to change the background color of the checkbox in the unchecked state but the default white background is not changing.
react-native: "0.68.5"
native-base: "3.0.3"
After spending some time and trying out multiple ways I was able to find the solution.
Add this piece of code to your theme file, change the color you want and you are good to go.
Checkbox: {
baseStyle: {
_checkbox: {
bg: "#faf3de",
},
},
},
I have a vue app which has a feature than can change the theme, for example, light/dark,
Initially, I've set in my localStorage.setItem['app_theme', 'light'],
I have my app theme changer function in the Header.vue component, and after clicking the theme changer toggle button, it also changes the localStorage['app_theme'] = 'dark'.
Now, in my other components, I have some computed values/variables/properties like this:
...
computed() {
app_card() {
return localStorage.getItem('app_theme') === 'dark' ? 'card-dark' : 'card-light'; //these are some classes with their respective theme css
},
app_text() {
return localStorage.getItem('app_theme') === 'dark' ? 'text-dark' : 'text-light'; //these are some classes with their respective theme css
}
}
...
I've thought about using polling to get the localStorage.getItem('app_theme') value every 2 secs, but I think this'll slow down my app.
Are there any other alternatives to listen for localstorage item change without polling?
This is exactly what the observer pattern is for.
You create an event "OnAppThemeChange". You can subscribe to that event with all your components.
Then whenever your App Theme changed you call your event, and all the components will refresh their App Theme.
This removes the need of Refreshing the theme every 2 seconds. It will only refresh when you actually change the theme.
Usefull links:
https://developer.mozilla.org/de/docs/Web/Guide/Events/Creating_and_triggering_events
https://refactoring.guru/design-patterns/observer
I can't find the solution to this anywhere.
I have this sample vue-vuex-electron app that I've created and I want to enable / disable some submenus of the app according to whether the vuex state 'isLogged' is true or false. I managed to apply that to the nav router-links (using v-if), but not yet to the menu items... 'cause I don't know how to access the actual Menu (already set and rendered at the main process).
For example, at my Home.vue, I'd like to import the Electron.Menu of the app and set the following:
created(){
if(this.$store.getters.isLogged){
mainMenu.getMenuItemById('login').enabled = false
mainMenu.getMenuItemById('logout').enabled = true
mainMenu.getMenuItemById('currentWeather').enabled = true
} else{
mainMenu.getMenuItemById('login').enabled = true
mainMenu.getMenuItemById('logout').enabled = false
mainMenu.getMenuItemById('currentWeather').enabled = false
}
}
But, when I try to import the Menu it's returned as undefined, not the menu already created and set to the app.
HOW CAN I HAVE ACCESS TO THE ACTUAL ELECTRON MENU FROM INSIDE A VUE INSTANCE IN ORDER TO CHANGE IT ?
The whole project is here:
https://github.com/danielpm1982/open-weather-client
Thanks in advance ! :D
Daniel Pinheirodanielpm1982.comBrazil
OK, nobody knew this one, so I managed to work around it myself... and I'm sharing the solution to help others.
I actually could not find a way to get or manage the Electron Menu at the renderer process, from within the Vue components, so I let it to be updated at the main process itself, where I have access to all Electron components easily.
ipcMain.on('setMenuToLoggedInState', (e:Event, isLogged:boolean) => {
const mainMenu: Menu = Menu.getApplicationMenu() as Menu
if(isLogged){
mainMenu.getMenuItemById('login').enabled = false
mainMenu.getMenuItemById('logout').enabled = true
mainMenu.getMenuItemById('currentWeather').enabled = true
} else{
mainMenu.getMenuItemById('login').enabled = true
mainMenu.getMenuItemById('logout').enabled = false
mainMenu.getMenuItemById('currentWeather').enabled = false
}
});
Then, at the renderer side, or at the Home.vue component view, I simply emmit an event to the main process to notify it when the Vuex 'isLogged' state changes, that is, when I want it to update the Menu.
computed: {
...mapGetters(['isLogged'])
},
created(){
if(this.isLogged){
ipcRenderer.send('setMenuToLoggedInState', true)
} else{
ipcRenderer.send('setMenuToLoggedInState', false)
}
}
As, in the case of this app, both the Login as the Logout routes redirect to the Home View, the Home Vue component will always be able to check the 'isLogged' state at the Vuex store, on its creation, and notify the main process to update the Menu or subMenus according to that state.
I don't know if there's a better way for this, but it works this way.
I was avoiding to use ipcMain and ipcRenderer as much as I could, for not coupling the Vue components code with the Electron API, but in this case I had to use it.
Now, my Menu submenus are activated and deactivated according to the user login state, as well as the router-links of the nav bar are generated or not according to that same state.
Thanks to all those who might have tried to answer that.
The whole project is here: https://github.com/danielpm1982/open-weather-client
Daniel Pinheiro
danielpm1982.com
Brazil
suppose that in a large project ( on Nuxt JS Framework ) with a number of pages and components, we want to implement the dark / light mode of the website template in an optimal and professional way with toggle a button.
In total, the template is about 8 to 10 colors for each mode, and a few other props, such as shadows and borders, are set to change in each mode. You can change the color of the template quickly and gently by pressing a button.
What do you think is the most optimal, most professional, fastest and easiest way to do this ???
The project is being developed on Nuxt Js framework.
Friends, please explain your suggestion and solution in detail so that it is useful and practical for others :)
Thanks for your comments and answers :)
Maybe you can give a try to the nuxt community module: https://github.com/nuxt-community/color-mode-module
Demo web site : https://color-mode.nuxtjs.app/
#Ifaruki How can this be used in Vue JS components? For example, suppose we want to change the value of the variables in the root by pressing a button in the header? How should we write this method? Suppose there are 10 variables in root and we want to change all 10 variables by pressing a button, how should we do that?
Basically, is this the right way to make dark / light, and does it work well? Is this method correct?
root.style.setProperty('--background', "green");
you can use this piece of code in your styles :
:root {
--color-primary: blue;
--color-secondary: black;
}
:root[data-mode="dark"] {
--color-primary: aqua;
--color-secondary: white;
}
and then set data-mode="dark" to your document root element (HTML) like this:
<script setup lang="ts">
onMounted(() => {
if (
!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
document.documentElement.setAttribute("data-mode", "dark");
}
if ("theme" in localStorage) {
document.documentElement.setAttribute("data-mode", localStorage.theme);
}
})
</script>
this lifecycle checks the user's localStorage or system and sets mode based on these two if the user didn't set the mode before it set mode based on the system
and can toggle mode with this function:
<script setup>
const changeMode = (mode) => {
document.documentElement.setAttribute("data-mode", mode);
localStorage.theme = mode
}
</script>
the mode can be dark or light.
I imported the code from https://github.com/nolimits4web/Swiper/blob/master/demos/23-thumbs-gallery.html
But the first problem I had was that the slider didn't show so I fixed that with adding min-height: 250px; to the div class .swiper-slide(this is the only thing I changed), my new problem is that the slider doesn't work.
When I resize the browser the slider suddenly works, I can't find what is causing the problem.
You can watch the slider at nielsvt.remvoo.com and then section portfolio, the slider will be visible at the bottom of the page
I had a similar issue. I simply fixed it by initializing the swiper once the page loads.
useEffect(()=> {
swiper.init()
}, [])
On the swiper section definition put the observer property true.
const swiper = new Swiper(swiperIdentifier, {
...
observer: true,
});