mode sombre

content/_index.md

@@ -71,6 +71,8 @@ leaflet = 1
 
 </div>
 
+## On est là
+
 {% map() %}
 [42.6998, 9.4518], // Bastia
 [44.4742, 1.8296], // Cajarc

sass/css/base.scss

@@ -30,10 +30,6 @@ html, body {
 	font-family: LunaSans;
 }
 
-body {
-	background: radial-gradient(circle at 100%, rgba(2, 148, 217, 0.2) 20%, white);
-}
-
 main {
 	width: 100%;
 	font-size: 18px;
@@ -162,3 +158,24 @@ h3 {
 	height: 600px;
 	max-height: calc(100vh - 64px);
 }
+
+@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+	html {
+		background: radial-gradient(circle at 100%, rgba(2, 148, 217, 0.2) 20%, white);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	html {
+		background-color: black;
+		color: white;
+	}
+	
+	#dev-warning {
+		color: black;
+	}
+	
+	.cities {
+		color: $grey2;
+	}
+}

sass/css/clients.scss

@@ -59,3 +59,9 @@
 	color: $grey1;
 	float: right;
 }
+
+@media (prefers-color-scheme: dark) {
+	.client_box-sign {
+		color: $grey2;
+	}
+}

sass/css/defs.scss

@@ -1,6 +1,7 @@
 $blue: #0294d9;
 $violet: #ac44ff;
 $grey1: #444;
+$grey2: #bbb;
 
 $grad1_3tr: rgba(2, 148, 217, 0.2);
 $grad2_3tr: rgba(87, 108, 236, 0.2);

sass/css/header.scss

@@ -37,3 +37,9 @@ header {
 	text-shadow: 1px 2px 1px $violet;
 	text-decoration: none;
 }
+
+@media (prefers-color-scheme: dark) {
+	#header-menu a {
+		color: white;
+	}
+}

sass/css/services.scss

@@ -68,3 +68,9 @@
 	padding-bottom: 14px;
 	font-size: 24px;
 }
+
+@media (prefers-color-scheme: dark) {
+	.service_box-link, .service_box-link:visited {
+		color: white;
+	}
+}

templates/base.html

@@ -19,7 +19,14 @@
 			<a href="#" onclick="document.getElementById('dev-warning').remove()">fermer</a>
 		</div>
 		<header>
-			<a href="/"><img id="header-logo" src="/img/librezo-little-black.png" alt="Logo Librezo" aria-hidden/><h1 class="sr-only">Librezo</h1></a>
+			<a href="/">
+				<picture>
+					<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)" />
+					<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
+					<img decoding="async" id="header-logo" src="/img/librezo-little-black.png" alt="Librezo" aria-hidden/>
+			  </picture>
+			  <h1 class="sr-only">Librezo</h1>
+			</a>
 			<nav id="header-menu">
 				<ul>
 					<li><a href="/fonctionnement">Fonctionnement</a></li>