Question 161008 in Html Question posted in
Some basic documentation can be found here.

Why isn’t HTML navbar theme switching working as expected?

The navbar theme change is not working.

When I click on the dark mode button it changes theme for 1 second and goes back to light.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <nav :class="[`navbar-${theme}`, `bg-${theme}`, 'navbar', 'navbar-expand-lg']">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li v-for="(page, index) in pages" class="nav-item" :key="index">
                <a 
                    class="nav-link"
                    :class="{active: activePage == index}"
                    :href="page.link.url" 
                    v-on:click.prevent="activePage = index"
                >{{ page.link.text }}</a>
              </li>
            </ul>
            <form action="" class="d-flex">
                <button class="btn btn-primary" v-on:click="changeTheme()">dark mode</button>
            </form>
          </div>
        </div>
      </nav>
      <div id="content" class="container">
        <h1>{{ pages[activePage].pageTitle }}</h1>
        <p>{{ pages[activePage].content }}</p>
      </div>
      <script>
        Vue.createApp({
            data(){
                return { 
                    activePage: 0,
                    theme: 'light',
                    pages:[
                        {
                            link: {text: "Home", url: "index.html"},
                            pageTitle: "Home Page",
                            content: "This is the home content"
                        },
                        {
                            link: {text: "About", url: "about.html"},
                            pageTitle: "About Page",
                            content: "This is the about content"
                        },
                        {
                            link: {text: "Contact", url: "contact.html"},
                            pageTitle: "Contact Page",
                            content: "This is the contact content"
                        },
                    ]
                }
            },
          methods: {
            changeTheme() {
              let theme = 'light';

              if(this.theme == 'light') {
                theme = 'dark';
              }

              this.theme = theme;
            }
          },
        }).mount("body")
      </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>
</html>

I tried to find what was wrong but I couldn’t.

I wanted the button to change themes when I pressed the "dark mode" button

But the result that he switches themes for 1 second and goes back to normal

Tags:

2

Answers


  1. 0

    Since the button does not have a type attribute and is inside a form, it triggers a reload of the page when you click it, reloading the page with light theme.

    Add a type="button" attribute to fix the issue:

    <button type="button" class="btn btn-primary" @click="changeTheme()">dark mode</button>
    Login or Signup to reply.
  2. 0

    The problem is the default button behavior is submit, so you can use v-on:click.prevent="changeTheme()" to prevent the default behavior or add type="button"

        <nav :class="[`navbar-${theme}`, `bg-${theme}`, 'navbar', 'navbar-expand-lg']">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar {{theme}}</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li v-for="(page, index) in pages" class="nav-item" :key="index">
                        <a class="nav-link" :class="{active: activePage == index}" :href="page.link.url" v-on:click.prevent="activePage = index">{{ page.link.text }}</a>
                    </li>
                </ul>
                <form action="" class="d-flex">
                    <button class="btn btn-primary" v-on:click.prevent="changeTheme()">dark mode</button>
                </form>
            </div>
        </div>
    </nav>

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search