Ajout du mode sombre !

_sass/dark-theme.scss

@@ -0,0 +1,53 @@
+/**
+    Dark Theme
+**/
+@media (prefers-color-scheme: dark) {
+    .dark-theme-only{
+        display:inline;
+    }
+    .hero{  
+        background-color:darken(#5c9ead,35%)!important;
+        color:#ffffff;
+    }
+
+    #photosAndButtons .card-content{
+        background-color:darken(#5c9ead,40%)!important;
+    }
+
+    p.title,
+    span.title{
+        color:#ffffff;
+    }
+
+    p.subtitle{
+        color:#ffffff;
+    }
+
+    .is-primary
+    {
+        background-color:darken(#5c9ead,40%)!important;
+    }
+    .tile.is-vertical{
+        background-color:unset;
+    }
+
+    .is-info{
+        background-color: darken(#5c9ead,41%)!important;
+    }
+
+    section.hero.is-primary.is-bold{
+        background-image: none;
+        background-color:darken(#5c9ead,30%)!important;
+    }
+
+    body footer{
+        background-color: darken(#5c9ead,42%)!important;
+    }
+
+    .button{
+        background-color: darken(#5c9ead,41%);
+        border-color:darken(#5c9ead,30%);
+        border-width: 4px;
+        color:white;
+    }
+}

_sass/main.scss

@@ -54,8 +54,13 @@ body{
     overflow-x: hidden;
 }
 
+.dark-theme-only{
+    display:none;
+}
+
 @import "../node_modules/bulma/bulma";
 @import "icon";
+@import "dark-theme";
 
 #idCard {
 

css/main.css

@@ -31,6 +31,9 @@ html {
 body {
   overflow-x: hidden; }
 
+.dark-theme-only {
+  display: none; }
+
 /*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
 @keyframes spinAround {
   from {
@@ -6998,6 +7001,39 @@ label.panel-block {
 .icon-print:before {
   content: "\e906"; }
 
+/**
+    Dark Theme
+**/
+@media (prefers-color-scheme: dark) {
+  .dark-theme-only {
+    display: inline; }
+  .hero {
+    background-color: #1d343a !important;
+    color: #ffffff; }
+  #photosAndButtons .card-content {
+    background-color: #142529 !important; }
+  p.title,
+  span.title {
+    color: #ffffff; }
+  p.subtitle {
+    color: #ffffff; }
+  .is-primary {
+    background-color: #142529 !important; }
+  .tile.is-vertical {
+    background-color: unset; }
+  .is-info {
+    background-color: #132225 !important; }
+  section.hero.is-primary.is-bold {
+    background-image: none;
+    background-color: #25444b !important; }
+  body footer {
+    background-color: #111f22 !important; }
+  .button {
+    background-color: #132225;
+    border-color: #25444b;
+    border-width: 4px;
+    color: white; } }
+
 #idCard .hero-body {
   padding-bottom: 2rem;
   padding-top: 2rem; }

index.html

@@ -295,6 +295,11 @@
                             <img src="images/poweredByInfomaniak.bmp" alt="Powered By Infomaniak.com" width="70">
                         </a>
                     </p>
+                    <p class="dark-theme-only">
+                        <small>
+                            (Ceci est le thème sombre !)
+                        </small>
+                    </p>
                 </div>
             </div>
         </div>