modes light/dark étendus sur tout le site

5 years ago · f4998ba996
parent 09f881adba
commit f4998ba996
8 changed files with 136 additions and 113 deletions
--- a/code/game.css
+++ b/code/game.css
@ -13,6 +13,14 @@

 }

+.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+.lightButton {
+  position: absolute;
+  right: 0px;
+}
+
 .flex-container {
    /* We first create a flex layout context */
    display : flex;
--- a/code/game.html
+++ b/code/game.html
@ -7,6 +7,7 @@
    <script>var tutoMode=false;</script>
 </head>
 <body>
+    <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
    <ul id="all-container" class="all-container"> 
        
        <ul class="stats">
@ -51,6 +52,7 @@
    <script src="chrono.js"></script>
    <script src="timer.js"></script>
    <script src="vitraux.js"></script>
+    <script src="themeSwitcher.js"></script>
 </body>

 </html>
--- a/code/highscores.css
+++ b/code/highscores.css
@ -92,3 +92,11 @@
    text-decoration: none;
    cursor: pointer;
  }
+
+  .lightButton {
+    position: absolute;
+    right: 0px;
+  }
+
+  .day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
--- a/code/highscores.php
+++ b/code/highscores.php
@ -1,7 +1,9 @@
 <head>
 <link rel="stylesheet" type="text/css" href="highscores.css"/>
 </head>
+<body>
    
+    <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
    <form action="highscores.php" method="post">
    <div id="modeSelection">
        <ul id="modes">
@ -76,6 +78,7 @@ Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarde

    <script src="bakery.js"></script>
    <script src="highscore_button_displayer.js"></script>
+    <script src="themeSwitcher.js"></script>
    <?php

    $database = new SQLite3("data.db");
@ -111,3 +114,6 @@ if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]
        echo "<h1 id='aya'>".$phrase."</h1>";
    }
    ?>
+    <script src="bakery.js"></script>
+    <script src="themeSwitcher.js"></script>
+</body>
--- a/code/index.css
+++ b/code/index.css
@ -12,16 +12,6 @@
 .day   { background: #eee; color: black; }
 .night { background: #333; color: white; }

-@media (prefers-color-scheme: dark) {
-  .day.dark-scheme   { background:  #333; color: white; }
-  .night.dark-scheme { background: black; color:  #ddd; }
-}
-
-@media (prefers-color-scheme: light) {
-  .day.light-scheme   { background: white; color:  #555; }
-  .night.light-scheme { background:  #eee; color: black; }
-}
-
 .button {
    padding: 2px;
 }
--- a/code/index.php
+++ b/code/index.php
@ -5,7 +5,7 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> <!-- 'monolith' theme -->
 <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
 </head>
-<body class="night">
+<body>
 <div>
    <div class="logo">
        <img src="ress/logo_dark.png" id="logo"/>
--- a/code/score.php
+++ b/code/score.php
@ -1,8 +1,10 @@
 <html>
 <head>

+<link rel="stylesheet" type="text/css" href="index.css"/>
 </head>
 <body>
+        <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>

 <script src="selecteur.js"></script>
 Votre score est : <h1 id="points"></h1>
@ -91,5 +93,8 @@ function index()
    window.location.replace("./");
 }
 </script>
+
+<script src="bakery.js"></script>
+<script src="themeSwitcher.js"></script>
 </body>
 </html>
--- a/code/themeSwitcher.js
+++ b/code/themeSwitcher.js
@ -13,7 +13,11 @@ function switchLight() {
 function applyLight(li) {
    console.log("app li "+li);
    document.getElementById("light").src="ress/"+(li=="true" ? "light" : "dark")+".png";
+    if(document.getElementById("logo")!=null)
+    {
        document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png";
+    }
+    
    document.getElementsByTagName("body")[0].classList.add((li=="true" ? "day" : "night"));
    document.getElementsByTagName("body")[0].classList.remove((li=="true" ? "night" : "day"));
 }