Merge pull request #1282 from pmpinto/dark-mode

Introduce dark theme

Author: blakadder

_includes/sidebar.html

@@ -3,7 +3,7 @@
 		<img src="{{ "/assets/images/menu.svg" | relative_url }}" class="menu-icon" id="menu" alt="Menu" />
 		<img src="{{ "/assets/images/close.svg" | relative_url }}" class="close-icon" id="close" alt="Close menu" />
 	</div>
-	<div style="text-align: center"><a href="{{ "index.html" | relative_url }}"><img src="{{ "/assets/images/logo.png" | relative_url }}" alt="Logo" /></a></div>
+	<div style="text-align: center" class="sidebar-logo"><a href="{{ "index.html" | relative_url }}"><img src="{{ "/assets/images/logo.png" | relative_url }}" alt="Logo" /></a></div>
 	<!-- {% include search.html %} -->
 	<div class="sidebar-main">
 		{% include nav.html %}

_layouts/zigbee.html

@@ -29,7 +29,7 @@
 </div>
 <div class="row">
   <div class="column column-60"> 
-    <img src="{{ page.url | remove: ".html" | prepend: '/assets/images/devices' | append: '.webp' | relative_url }}" alt="{{ page.title }}" style="max-height: 350px; max-width: 400px; margin: 1rem">
+    <img src="{{ page.url | remove: ".html" | prepend: '/assets/images/devices' | append: '.webp' | relative_url }}" alt="{{ page.title }}" style="max-height: 350px; margin: 1rem 0">
   </div>
   <div class="column">
     {% include supports.html %}

_sass/milligram.scss

@@ -24,6 +24,11 @@ body {
   font-weight: 300;
   letter-spacing: .01em;
   line-height: 1.5;
+  
+  @media (prefers-color-scheme: dark) {
+    background-color: $background-color-dark-mode;
+    color: $content-color-dark-mode;
+  }
 }
 
 blockquote {
@@ -58,6 +63,11 @@ input[type='submit'] {
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $blue-color-dark-mode;
+    border-color:$blue-color-dark-mode
+  }
 }
 
 .button:focus, .button:hover,
@@ -96,6 +106,11 @@ input[type='submit'][disabled]:focus,
 input[type='submit'][disabled]:hover {
   background-color: #002b80;
   border-color: #002b80;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $blue-color-dark-mode;
+    border-color:$blue-color-dark-mode;
+  }
 }
 
 .button.button-outline,
@@ -105,6 +120,10 @@ input[type='reset'].button-outline,
 input[type='submit'].button-outline {
   background-color: transparent;
   color: #002b80;
+
+  @media (prefers-color-scheme: dark) {
+    color:$blue-color-dark-mode;
+  }
 }
 
 .button.button-outline:focus, .button.button-outline:hover,
@@ -132,6 +151,10 @@ input[type='submit'].button-outline[disabled]:focus,
 input[type='submit'].button-outline[disabled]:hover {
   border-color: inherit;
   color: #002b80;
+
+  @media (prefers-color-scheme: dark) {
+    color:$blue-color-dark-mode;
+  }
 }
 
 .button.button-clear,
@@ -142,6 +165,10 @@ input[type='submit'].button-clear {
   background-color: transparent;
   border-color: transparent;
   color: #002b80;
+
+  @media (prefers-color-scheme: dark) {
+    color:$blue-color-dark-mode;
+  }
 }
 
 .button.button-clear:focus, .button.button-clear:hover,
@@ -169,12 +196,22 @@ input[type='submit'].button-clear[disabled]:focus,
 input[type='submit'].button-clear[disabled]:hover {
   background-color: slategrey;
   color: #002b80;
+
+  @media (prefers-color-scheme: dark) {
+    color:$blue-color-dark-mode;
+  }
 }
 
 /* Custom color */
 .button-black {
   background-color: black;
   border-color: black;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $content-color-dark-mode;
+    border-color: $content-color-dark-mode;
+    color: $navigation-background-dark-mode;
+  }
 }
 .button-black.button-clear,
 .button-black.button-outline {
@@ -200,7 +237,7 @@ input[type='submit'].button-clear[disabled]:hover {
 
 .button-red {
   background-color: #EF3453;
-  border-color: white;
+  border-color: transparent;
 }
 .button-red.button-clear,
 .button-red.button-outline {
@@ -286,6 +323,10 @@ textarea:focus,
 select:focus {
   border-color: #002b80;
   outline: 0;
+
+  @media (prefers-color-scheme: dark) {
+    border-color:$blue-color-dark-mode;
+  }
 }
 
 select {
@@ -331,6 +372,7 @@ input[type='radio'] {
   padding: 0;
   position: relative;
   width: 100%;
+  padding-bottom: 5dvh;
 }
 @media (min-width: 40rem) {
   .container {
@@ -453,7 +495,14 @@ input[type='radio'] {
 
 .row .column.column-60 {
   flex: 0 0 60%;
-  max-width: 60%;
+  
+  @media (min-width: 40rem) {
+    max-width: 60%;
+  }
+  
+  img {
+    filter: brightness(0.8) contrast(1.1);
+  }
 }
 
 .row .column.column-66, .row .column.column-67 {
@@ -504,6 +553,10 @@ input[type='radio'] {
 a {
   color: #002b80;
   text-decoration: none;
+
+  @media (prefers-color-scheme: dark) {
+    color:$blue-color-dark-mode;
+  }
 }
 
 a:focus, a:hover {
@@ -584,6 +637,10 @@ th {
   border-bottom: 2px solid #e1e1e1;
   padding: 0.2rem 0.5rem;
   text-align: left;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: $border-color-dark-mode;
+  }
 }
 
 td:first-child,
@@ -607,6 +664,10 @@ th:last-child {
   padding: 0.1rem 0.5rem;
   text-align: left;
   vertical-align: middle;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: $border-color-dark-mode;
+  }
 }
 
 .td-first,
@@ -620,6 +681,10 @@ th:last-child {
   display: block;
   max-height:75px;
   vertical-align: middle;
+
+  @media (prefers-color-scheme: dark) {
+    filter: brightness(0.8) contrast(1.1);
+  }
 }
 
 .td-10,

_sass/variables.scss

@@ -11,10 +11,17 @@ $header-height: 50px;
 
 $link-color: #EF3453;
 
-$sidebar-border: 1px solid rgba(0,0,0,0.07);
+$sidebar-border: 2px solid rgba(0,0,0,0.07);
 $sidebar-color: #364149;
+$sidebar-color-dark-mode: #d1d1d1;
 
 $navigation-background: #fafafa;
+$navigation-background-dark-mode: #101010;
 $navigation-link-color: #EF3453;
 
 $content-color: #333;
+$content-color-dark-mode: #d1d1d1;
+$background-color-dark-mode: #222;
+$border-color-dark-mode: #333;
+
+$blue-color-dark-mode: #719df5;

assets/css/docs.scss

@@ -19,6 +19,12 @@ html, body {
 	box-sizing: border-box;
 }
 
+[src*="tasmota-icon.png"] {
+	@media (prefers-color-scheme: dark) {
+		filter: invert(1) grayscale(1);
+	}
+}
+
 pre {
 	margin-bottom: ($base-height * 2) !important;
 }
@@ -64,12 +70,33 @@ a.menu {
 	overflow: hidden;
 	color: $sidebar-color;
 
+	@media (prefers-color-scheme: dark) {
+    color: $sidebar-color-dark-mode;
+		border-color: $border-color-dark-mode;
+  }
+
+	.sidebar-logo {
+		background-color: $navigation-background;
+
+		@media (prefers-color-scheme: dark) {
+			background-color: $navigation-background-dark-mode;
+			
+			img {
+				filter: invert(1) grayscale(1);
+			}
+		}
+	}
+
 	.sidebar-main {
 		height: 100%;
 		background: $navigation-background;
 		padding: $base-height;
 		overflow: auto;
 		padding-bottom: 4em;
+
+		@media (prefers-color-scheme: dark) {
+			background-color: $navigation-background-dark-mode;
+		}
 	}
 
 	.sidebar-mobile {
@@ -79,6 +106,10 @@ a.menu {
 		text-align: right;
 		border-bottom: 2px solid #e1e1e1;
 
+		@media (prefers-color-scheme: dark) {
+			border-color: $border-color-dark-mode;
+		}
+
 		.close-icon, .menu-icon {
 			width: 18px;
 			cursor: pointer;
@@ -93,12 +124,21 @@ a.menu {
 	border-bottom: $sidebar-border;
 	padding: 0 $base-height;
 
+	@media (prefers-color-scheme: dark) {
+    border-color:$border-color-dark-mode;
+  }
+
 	.search-input {
 		border: none;
 		font-size: 0.9em;
 		font-weight: 300;
 		width: 100%;
 		height: 100%;
+		color: $content-color;
+
+		@media (prefers-color-scheme: dark) {
+			color: $content-color-dark-mode;
+		}
 	}
 }
 
@@ -164,6 +204,10 @@ a.menu {
 	color: $content-color;
 	line-height: 1.7;
 	word-wrap: break-word;
+
+	@media (prefers-color-scheme: dark) {
+    color: $content-color-dark-mode;
+  }
 }
 
 .inner {
@@ -210,6 +254,10 @@ a.menu {
 
 			.sidebar-mobile {
 				background: $navigation-background;
+
+				@media (prefers-color-scheme: dark) {
+					background-color: $navigation-background-dark-mode;
+				}
 			}
 		}
 	}
@@ -236,3 +284,7 @@ a.menu {
 #nothing-found {
 	display: none;
 }
+
+.compat a {
+	text-wrap: nowrap;
+}