Vue JS Javascript changing theme does not work although code looks fine to me

here is my NavBar Component which is a Navbar and needs to change theme on click 

<template>
    <div class="app">
<nav id="navParent" class="navbar has-background-dark is-radius">
    <div id="nav-brand" class="navbar-brand">
        <figure class="image">
        <a class="navbar-item" href="/">
            <img class="is-rounded is-128x128"  src="../assets/logo.png" alt="Voteland" height="28" width="112"/>
            <strong class="has-text-info" id="navImg">{{ NavTitle }}</strong>
        </a>
    </figure>
    <a id="navBurger" role="button" @click="NotActive" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
    </div>
    <div class="navbar-menu">
            <router-link :to="{name:'Home'}" class="has-text-primary navbar-item">Home</router-link>
            <router-link :to="{name:'Vote'}" class="has-text-primary navbar-item">Vote</router-link>
            <a href="#" class="has-text-primary navbar-item">Create a Topic!</a>
        <div class="navbar-end">
            <a href="#" class="navbar-item"><i class="fa-brands fa-instagram fa-beat-fade" style="color: #8089ff;"></i></a>
            <a href="#" class="navbar-item"><i class="fa-brands fa-square-twitter fa-beat-fade" style="color: #00646f;"></i></a>
            <a href="#" class="navbar-item"><i class="fa-brands fa-github-alt fa-beat-fade" style="color: #000000;"></i></a>
            <a v-if="isLightActive" :class="{'navbar-item':true,'darkmod':isDarkActive,'lightmod':isLightActive }" @click="changeThemeDark"> <i class="fa-solid fa-moon" style="color: #408080;"></i></a>
            <a v-if="isDarkActive" :class="{'navbar-item':true, 'darkmod':isDarkActive, 'lightmod':isLightActive}" @click="changeLightTheme"><i class="fa-solid fa-sun" style="color: #f8df07;"></i></a>
        </div>
    </div>
</nav>
</div>
</template>


<script>

import {ref} from 'vue';
const  NavTitle = ref('Voteland');
const isDarkActive = ref(false);
const isLightActive = ref(true);
export default{
    components:{
    }, 
    data() {
        return {
            NavTitle,
            isDarkActive,
            isLightActive,
            
        }
    },
    methods:{
        NotActive () {
            const isActive = document.getElementById('navBurger');
            const isActiveNav = document.querySelector('.navbar-menu') 
            isActive.classList.toggle('is-active');
            isActiveNav.classList.toggle('is-active');
        },
        changeThemeDark(){
            this.isDarkActive = true;
            this.isLightActive = false;
            document.querySelector('body').classList.remove('light-theme');
            document.querySelector('body').classList.add('dark-theme');
            
        },
        changeLightTheme(){
            this.isLightActive= true;
            this.isDarkActive = false
            document.querySelector('body').classList.add('light-theme');
            document.querySelector('body').classList.remove('dark-theme');
        }
    }
}

</script>


<style scoped>

@media only screen and (min-width: 1024px) {
    #navImg{
    margin: 4px;
    font-family: 'Exo 2', sans-serif;
    margin-right: 520px;
}

#navbar-brand {
    border-radius: 12px;
}

#navbar-menu{
    border-radius: 12px;
}


} 


@media only screen and (min-width: 300px) {
    #NavImg{
        margin: 4px;
        font-family: 'Exo 2' sans-serif;
    }

}

@media only screen and (min-width: 480px) {
    #NavImg{
        margin: 4px;
        font-family: 'Exo 2' sans-serif;
    }

}

@media only screen and (min-width: 768px) {
    #NavImg{
        margin: 4px;
        font-family: 'Exo 2' sans-serif;
    }

}


.dark-theme{
    background: #1b2431;
}

.light-theme{
    background: white;
}
</style>

Asked AI s too and made research around people are doing similar way and their theme changes mine everything works but theme does not change thanks.

Your styles are scoped. The body styles need to be global.

:global(.dark-theme) {
  background: #1b2431;
}

:global(.light-theme) {
  background: white;
}

Or move them into a separate <style> element that is not scoped.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.