dark mode

1 year ago · 62453745f3
parent d6c76ce48b
commit 62453745f3
3 changed files with 9 additions and 4 deletions
--- a/science-quest/index.html
+++ b/science-quest/index.html
@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Science Quest</title>
  </head>
-  <body>
+  <body data-bs-theme="dark">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
--- a/science-quest/src/components/Titre.vue
+++ b/science-quest/src/components/Titre.vue
@ -7,6 +7,11 @@ export default{
            nomApp:NOM_APP

        }
+    },
+    methods:{
+      changerDarkMode: function(){
+        document.body.dataset.bsTheme!="dark" ? document.body.dataset.bsTheme="dark" : document.body.dataset.bsTheme="light"
+      }
    }
 }
 </script>
@ -15,7 +20,7 @@ export default{
        <!-- logo temporaire
        <img alt="Vue logo" src="../assets/logo.png" />
        -->
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#/">{{ nomApp }}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -43,7 +48,7 @@ export default{
        </li>
      </ul>
    </div>
-
+    <button id="boutondarkmode" v-on:click="changerDarkMode">💡</button>
    <!-- TODO : l'afficher que si on n'est pas connecté, sinon afficher l'username (qui sera surement dans le localstorage)-->
    <a class="nav-link" href="#/login">Se connecter</a>
  </div>
--- a/science-quest/src/components/jeux/kahoot/Kahoot.vue
+++ b/science-quest/src/components/jeux/kahoot/Kahoot.vue
@ -52,7 +52,7 @@ export default {
            </button>
            <form @submit.prevent>
                <label for="Kahoot-Code">Code</label>
-                <input class="form-control" type="text" id="Kahoot-Code" name="Kahoot-Code" v-model="codeKahoot" minlength="6" maxlength="10">
+                <input class="form-control bg-light" type="text" id="Kahoot-Code" name="Kahoot-Code" v-model="codeKahoot" minlength="6" maxlength="10">
                <button class="btn btn-light" v-on:click="rejoindrePartie">Rejoindre</button>
            </form>
        </div>