From: danix <danix@danix.xyz>
Date: Thu, 23 Feb 2023 12:30:25 +0000 (+0100)
Subject: added dark theme option. It ìs selected automagically based on system choiche of... 
X-Git-Url: https://git.danix.xyz/?p=theme-danix.xyz.git;a=commitdiff_plain;h=cb4379e19f22b0e389f369a048c5cce9321366c6

added dark theme option. It ìs selected automagically based on system choiche of dark or light theme.
---

diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss
index bb2827a..8c91e4f 100644
--- a/assets/sass/base/_page.scss
+++ b/assets/sass/base/_page.scss
@@ -34,7 +34,10 @@
 		}
 
 	body {
-		background: _palette(bg);
+		background: _palette_light(bg);
+		@media screen and (prefers-color-scheme: dark) {
+			background: _palette_dark(bg);
+		}
 
 		// Stops initial animations until page loads.
 			&.is-preload {
diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index 2009f4d..82a5b18 100644
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -7,7 +7,10 @@
 /* Type */
 
 	body, input, select, textarea {
-		color: _palette(fg);
+		color: _palette_light(fg);
+		@media screen and (prefers-color-scheme: dark) {
+			color: _palette_dark(fg);
+		}
 		font-family: _font(family);
 		font-size: 17pt;
 		font-weight: _font(weight);
@@ -38,16 +41,25 @@
 
 		&:hover {
 			border-bottom-color: transparent;
-			color: _palette(highlight) !important;
+			color: _palette_light(highlight) !important;
+			@media screen and (prefers-color-scheme: dark) {
+				color: _palette_dark(highlight);
+			}
 		}
 
 		&:active {
-			color: desaturate(darken(_palette(highlight), 15), 5) !important;
+			color: desaturate(darken(_palette_light(highlight), 15), 5) !important;
+			@media screen and (prefers-color-scheme: dark) {
+				color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;
+			}
 		}
 	}
 
 	strong, b {
-		color: _palette(fg-bold);
+		color: _palette_light(fg-bold);
+		@media screen and (prefers-color-scheme: dark) {
+			color: _palette_dark(fg-bold);
+		}
 		font-weight: _font(weight-bold);
 	}
 
@@ -60,7 +72,10 @@
 	}
 
 	h1, h2, h3, h4, h5, h6 {
-		color: _palette(fg-bold);
+		color: _palette_light(fg-bold);
+		@media screen and (prefers-color-scheme: dark) {
+			color: _palette_dark(fg-bold);
+		}
 		font-weight: _font(weight-bold);
 		line-height: 1.65;
 		margin: 0 0 (_size(element-margin) * 0.5) 0;
@@ -122,14 +137,20 @@
 	}
 
 	blockquote {
-		border-left: solid 4px _palette(border);
+		border-left: solid 4px _palette_light(border);
+		@media screen and (prefers-color-scheme: dark) {
+			border-left: solid 4px _palette_dark(border);
+		}
 		font-style: italic;
 		margin: 0 0 _size(element-margin) 0;
 		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
 	}
 
 	code {
-		background: _palette(border-bg);
+		background: _palette_light(border-bg);
+		@media screen and (prefers-color-scheme: dark) {
+			background: _palette_dark(border-bg);
+		}
 		font-family: _font(family-fixed);
 		font-size: 0.9em;
 		margin: 0 0.25em;
@@ -152,7 +173,10 @@
 
 	hr {
 		border: 0;
-		border-bottom: solid 1px _palette(border);
+		border-bottom: solid 1px _palette_light(border);
+		@media screen and (prefers-color-scheme: dark) {
+			border-bottom: solid 1px _palette_dark(border);
+		}
 		margin: _size(element-margin) 0;
 
 		&.major {
diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss
index 45a37a0..c48c687 100644
--- a/assets/sass/components/_box.scss
+++ b/assets/sass/components/_box.scss
@@ -7,7 +7,10 @@
 /* Box */
 
 	.box {
-		border: solid 1px _palette(border);
+		border: solid 1px _palette_light(border);
+		@media screen and (prefers-color-scheme: dark) {
+			border-bottom: solid 1px _palette_dark(border);
+		}
 		margin-bottom: _size(element-margin);
 		padding: 1.5em;
 
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
index fc903c1..a23e8d8 100644
--- a/assets/sass/components/_button.scss
+++ b/assets/sass/components/_button.scss
@@ -20,8 +20,12 @@
 		background-color: transparent;
 		border: 0;
 		border-radius: 0;
-		box-shadow: inset 0 0 0 2px _palette(fg-bold);
-		color: _palette(fg-bold);
+		box-shadow: inset 0 0 0 2px _palette_light(fg-bold);
+		color: _palette_light(fg-bold);
+		@media screen and (prefers-color-scheme: dark) {
+			box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);
+			color: _palette_dark(fg-bold);
+		}
 		cursor: pointer;
 		display: inline-block;
 		font-size: 0.8em;
@@ -36,14 +40,23 @@
 		white-space: nowrap;
 
 		&:hover, &:active {
-			box-shadow: inset 0 0 0 2px _palette(highlight);
-			color: _palette(highlight);
+			box-shadow: inset 0 0 0 2px _palette_light(highlight);
+			color: _palette_light(highlight);
+			@media screen and (prefers-color-scheme: dark) {
+				box-shadow: inset 0 0 0 2px _palette_dark(highlight);
+				color: _palette_dark(highlight);
+			}
 		}
 
 		&:active {
-			background-color: transparentize(_palette(highlight), 0.9);
-			box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5);
-			color: desaturate(darken(_palette(highlight), 15), 5);
+			background-color: transparentize(_palette_light(highlight), 0.9);
+			box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);
+			color: desaturate(darken(_palette_light(highlight), 15), 5);
+			@media screen and (prefers-color-scheme: dark) {
+				background-color: transparentize(_palette_dark(highlight), 0.9);
+				box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);
+				color: desaturate(darken(_palette_dark(highlight), 15), 5);
+			}
 		}
 
 		&.icon {
@@ -86,11 +99,17 @@
 			}
 
 			&:before {
-				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
+				@media screen and (prefers-color-scheme: dark) {
+					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
+				}
 			}
 
 			&:after {
-				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
+				@media screen and (prefers-color-scheme: dark) {
+					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
+				}
 				opacity: 0;
 				z-index: 1;
 			}
@@ -107,17 +126,28 @@
 		}
 
 		&.primary {
-			background-color: _palette(fg-bold);
+			background-color: _palette_light(fg-bold);
 			box-shadow: none;
-			color: _palette(bg);
+			color: _palette_light(bg);
+			@media screen and (prefers-color-scheme: dark) {
+				background-color: _palette_dark(fg-bold);
+				color: _palette_dark(bg);
+			}
 
 			&:hover, &:active {
-				background-color: _palette(highlight);
-				color: _palette(bg) !important;
+				background-color: _palette_light(highlight);
+				color: _palette_light(bg) !important;
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: _palette_dark(highlight);
+					color: _palette_dark(bg) !important;
+				}
 			}
 
 			&:active {
-				background-color: desaturate(darken(_palette(highlight), 15), 5);
+				background-color: desaturate(darken(_palette_light(highlight), 15), 5);
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
+				}
 			}
 		}
 
diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss
index fed297d..5d20c58 100644
--- a/assets/sass/components/_form.scss
+++ b/assets/sass/components/_form.scss
@@ -69,7 +69,7 @@
 	}
 
 	label {
-		color: _palette(fg-bold);
+		color: _palette_light(fg-bold);
 		display: block;
 		font-size: 0.8em;
 		font-weight: _font(weight-bold);
@@ -87,7 +87,7 @@
 	select,
 	textarea {
 		@include vendor('appearance', 'none');
-		background: _palette(border-bg);
+		background: _palette_light(border-bg);
 		border: none;
 		border-radius: 0;
 		color: inherit;
@@ -102,13 +102,13 @@
 		}
 
 		&:focus {
-			border-color: _palette(highlight);
-			box-shadow: 0 0 0 2px _palette(highlight);
+			border-color: _palette_light(highlight);
+			box-shadow: 0 0 0 2px _palette_light(highlight);
 		}
 	}
 
 	select {
-		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette_light(border)}' /></svg>");
 		background-size: 1.25rem;
 		background-repeat: no-repeat;
 		background-position: calc(100% - 1rem) center;
@@ -117,8 +117,8 @@
 		text-overflow: ellipsis;
 
 		option {
-			color: _palette(fg-bold);
-			background: _palette(bg);
+			color: _palette_light(fg-bold);
+			background: _palette_light(bg);
 		}
 
 		&:focus {
@@ -158,7 +158,7 @@
 
 		& + label {
 			@include icon(false, solid);
-			color: _palette(fg);
+			color: _palette_light(fg);
 			cursor: pointer;
 			display: inline-block;
 			font-weight: _font(weight);
@@ -167,7 +167,7 @@
 			position: relative;
 
 			&:before {
-				background: _palette(border-bg);
+				background: _palette_light(border-bg);
 				content: '';
 				display: inline-block;
 				font-size: 0.8em;
@@ -184,16 +184,16 @@
 
 		&:checked + label {
 			&:before {
-				background: _palette(fg-bold);
-				border-color: _palette(highlight);
+				background: _palette_light(fg-bold);
+				border-color: _palette_light(highlight);
 				content: '\f00c';
-				color: _palette(bg);
+				color: _palette_light(bg);
 			}
 		}
 
 		&:focus + label {
 			&:before {
-				box-shadow: 0 0 0 2px _palette(highlight);
+				box-shadow: 0 0 0 2px _palette_light(highlight);
 			}
 		}
 	}
@@ -214,21 +214,21 @@
 	}
 
 	::-webkit-input-placeholder {
-		color: _palette(fg-light) !important;
+		color: _palette_light(fg-light) !important;
 		opacity: 1.0;
 	}
 
 	:-moz-placeholder {
-		color: _palette(fg-light) !important;
+		color: _palette_light(fg-light) !important;
 		opacity: 1.0;
 	}
 
 	::-moz-placeholder {
-		color: _palette(fg-light) !important;
+		color: _palette_light(fg-light) !important;
 		opacity: 1.0;
 	}
 
 	:-ms-input-placeholder {
-		color: _palette(fg-light) !important;
+		color: _palette_light(fg-light) !important;
 		opacity: 1.0;
 	}
\ No newline at end of file
diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss
index 212f337..86ad81c 100644
--- a/assets/sass/components/_icon.scss
+++ b/assets/sass/components/_icon.scss
@@ -33,14 +33,18 @@
 
 		&.alt {
 			&:before {
-				background-color: _palette(fg-bold);
+				background-color: _palette_light(fg-bold);
 				border-radius: 100%;
-				color: _palette(bg);
+				color: _palette_light(bg);
 				display: inline-block;
 				height: 2em;
 				line-height: 2em;
 				text-align: center;
 				width: 2em;
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: _palette_dark(fg-bold);
+					color: _palette_dark(bg);
+				}
 			}
 		}
 	}
@@ -53,13 +57,19 @@
 
 			&:hover {
 				&:before {
-					background-color: _palette(accent1);
+					background-color: _palette_light(accent1);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent1);
+					}
 				}
 			}
 
 			&:active {
 				&:before {
-					background-color: desaturate(darken(_palette(accent1), 15), 5);
+					background-color: desaturate(darken(_palette_light(accent1), 15), 5);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: desaturate(darken(_palette_dark(accent1), 15), 5);
+					}
 				}
 			}
 		}
diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 6e1388e..6f7981c 100644
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -63,7 +63,10 @@
 
 	.circle > img {
 		@include circle(200px, "block");
-		@include box-shadow(-5px, 5px, 5px, _palette(fg-bold));
+		@include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));
+		@media screen and (prefers-color-scheme: dark) {
+			@include box-shadow(-5px, 5px, 5px, _palette_dark(fg-bold));
+		}
 	}
 
 	video {
diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss
index 56989df..f29066f 100644
--- a/assets/sass/components/_list.scss
+++ b/assets/sass/components/_list.scss
@@ -30,7 +30,10 @@
 			padding-left: 0;
 
 			li {
-				border-top: solid 1px _palette(border);
+				border-top: solid 1px _palette_light(border);
+				@media screen and (prefers-color-scheme: dark) {
+					border-top: solid 1px _palette_dark(border);
+				}
 				padding: 0.5em 0;
 
 				&:first-child {
diff --git a/assets/sass/components/_pagination.scss b/assets/sass/components/_pagination.scss
index cb39c39..1a7ef05 100644
--- a/assets/sass/components/_pagination.scss
+++ b/assets/sass/components/_pagination.scss
@@ -33,16 +33,27 @@
 				text-align: center;
 
 				&.active {
-					background-color: _palette(fg-bold);
-					color: _palette(bg);
+					background-color: _palette_light(fg-bold);
+					color: _palette_light(bg);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(fg-bold);
+						color: _palette_dark(bg);
+					}
 
 					&:hover {
-						background-color: _palette(highlight);
-						color: _palette(bg) !important;
+						background-color: _palette_light(highlight);
+						color: _palette_light(bg) !important;
+						@media screen and (prefers-color-scheme: dark) {
+							background-color: _palette_dark(highlight);
+							color: _palette_dark(bg) !important;
+						}
 					}
 
 					&:active {
-						background-color: desaturate(darken(_palette(highlight), 15), 5);
+						background-color: desaturate(darken(_palette_light(highlight), 15), 5);
+						@media screen and (prefers-color-scheme: dark) {
+							background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
+						}
 					}
 				}
 			}
diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss
index 2bdad69..b12e1e1 100644
--- a/assets/sass/components/_section.scss
+++ b/assets/sass/components/_section.scss
@@ -26,11 +26,14 @@
 
 				&:after {
 					content: '';
-					background-color: _palette(fg-bold);
+					background-color: _palette_light(fg-bold);
 					display: block;
 					height: 2px;
 					margin: 0.325em 0 0.5em 0;
 					width: 100%;
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(fg-bold);
+					}
 				}
 			}
 
diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss
index 337bc1a..882ebe4 100644
--- a/assets/sass/components/_spotlights.scss
+++ b/assets/sass/components/_spotlights.scss
@@ -16,7 +16,10 @@
 		> section {
 			@include vendor('display', 'flex');
 			@include vendor('flex-direction', 'row');
-			background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
+			background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1);
+			@media screen and (prefers-color-scheme: dark) {
+				background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1);
+			}
 
 			> .image {
 				background-position: center center;
@@ -33,7 +36,7 @@
 				}
 
 				&:before {
-					background: transparentize(_palette(bg), 0.1);
+					background: transparentize(_palette_light(bg), 0.1);
 					content: '';
 					display: block;
 					height: 100%;
@@ -42,6 +45,9 @@
 					position: absolute;
 					top: 0;
 					width: 100%;
+					@media screen and (prefers-color-scheme: dark) {
+						background: transparentize(_palette_dark(bg), 0.1);
+					}
 				}
 			}
 
@@ -62,7 +68,10 @@
 
 			&:nth-child(2n) {
 				@include vendor('flex-direction', 'row-reverse');
-				background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
+				background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2);
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2);
+				}
 
 				> .content {
 					@include vendor('align-items', 'flex-end');
diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss
index e020928..081ac22 100644
--- a/assets/sass/components/_table.scss
+++ b/assets/sass/components/_table.scss
@@ -17,12 +17,18 @@
 
 		tbody {
 			tr {
-				border: solid 1px _palette(border);
+				border: solid 1px _palette_light(border);
 				border-left: 0;
 				border-right: 0;
+				@media screen and (prefers-color-scheme: dark) {
+					border: solid 1px _palette_dark(border);
+				}
 
 				&:nth-child(2n + 1) {
-					background-color: _palette(border-bg);
+					background-color: _palette_light(border-bg);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(border-bg);
+					}
 				}
 			}
 		}
@@ -32,19 +38,28 @@
 		}
 
 		th {
-			color: _palette(fg-bold);
+			color: _palette_light(fg-bold);
 			font-size: 0.9em;
 			font-weight: _font(weight-bold);
 			padding: 0 0.75em 0.75em 0.75em;
 			text-align: left;
+			@media screen and (prefers-color-scheme: dark) {
+				color: _palette_dark(fg-bold);
+			}
 		}
 
 		thead {
-			border-bottom: solid 2px _palette(border);
+			border-bottom: solid 2px _palette_light(border);
+			@media screen and (prefers-color-scheme: dark) {
+				border-bottom: solid 2px _palette_dark(border);
+			}
 		}
 
 		tfoot {
-			border-top: solid 2px _palette(border);
+			border-top: solid 2px _palette_light(border);
+			@media screen and (prefers-color-scheme: dark) {
+				border-top: solid 2px _palette_dark(border);
+			}
 		}
 
 		&.alt {
@@ -53,9 +68,12 @@
 			tbody {
 				tr {
 					td {
-						border: solid 1px _palette(border);
+						border: solid 1px _palette_light(border);
 						border-left-width: 0;
 						border-top-width: 0;
+						@media screen and (prefers-color-scheme: dark) {
+							border-top: solid 1px _palette_dark(border);
+						}
 
 						&:first-child {
 							border-left-width: 1px;
diff --git a/assets/sass/components/_tiles.scss b/assets/sass/components/_tiles.scss
index 71745cf..4e199ae 100644
--- a/assets/sass/components/_tiles.scss
+++ b/assets/sass/components/_tiles.scss
@@ -79,7 +79,7 @@
 			}
 
 			&:after {
-				background-color: transparentize(_palette(bg), 0.75);
+				background-color: transparentize(_palette_light(bg), 0.75);
 				content: '';
 				display: block;
 				height: 100%;
@@ -88,6 +88,9 @@
 				top: 0;
 				width: 100%;
 				z-index: 1;
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: transparentize(_palette_dark(bg), 0.75);
+				}
 			}
 
 			&:hover {
@@ -109,37 +112,55 @@
 
 			&:nth-child(6n - 5) {
 				&:before {
-					background-color: _palette(accent1);
+					background-color: _palette_light(accent1);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent1);
+					}
 				}
 			}
 
 			&:nth-child(6n - 4) {
 				&:before {
-					background-color: _palette(accent2);
+					background-color: _palette_light(accent2);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent2);
+					}
 				}
 			}
 
 			&:nth-child(6n - 3) {
 				&:before {
-					background-color: _palette(accent3);
+					background-color: _palette_light(accent3);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent3);
+					}
 				}
 			}
 
 			&:nth-child(6n - 2) {
 				&:before {
-					background-color: _palette(accent4);
+					background-color: _palette_light(accent4);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent4);
+					}
 				}
 			}
 
 			&:nth-child(6n - 1) {
 				&:before {
-					background-color: _palette(accent5);
+					background-color: _palette_light(accent5);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent5);
+					}
 				}
 			}
 
 			&:nth-child(6n) {
 				&:before {
-					background-color: _palette(accent6);
+					background-color: _palette_light(accent6);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(accent6);
+					}
 				}
 			}
 		}
diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss
index 64481d7..1470f92 100644
--- a/assets/sass/layout/_banner.scss
+++ b/assets/sass/layout/_banner.scss
@@ -28,7 +28,7 @@
 			@include vendor('transition', 'opacity #{_duration(banner)} ease');
 			@include vendor('transition-delay', '0.75s');
 			@include vendor('pointer-events', 'none');
-			background-color: _palette(bg);
+			background-color: _palette_light(bg);
 			content: '';
 			display: block;
 			height: 100%;
@@ -38,6 +38,9 @@
 			top: 0;
 			width: 100%;
 			z-index: 1;
+			@media screen and (prefers-color-scheme: dark) {
+				background-color: _palette_dark(bg);
+			}
 		}
 
 		h1 {
@@ -104,12 +107,21 @@
 			}
 		}
 
-		&.style1 { &:after { background-color: _palette(accent1); } }
-		&.style2 { &:after { background-color: _palette(accent2); } }
-		&.style3 { &:after { background-color: _palette(accent3); } }
-		&.style4 { &:after { background-color: _palette(accent4); } }
-		&.style5 { &:after { background-color: _palette(accent5); } }
-		&.style6 { &:after { background-color: _palette(accent6); } }
+		&.style1 { &:after { background-color: _palette_light(accent1); } }
+		&.style2 { &:after { background-color: _palette_light(accent2); } }
+		&.style3 { &:after { background-color: _palette_light(accent3); } }
+		&.style4 { &:after { background-color: _palette_light(accent4); } }
+		&.style5 { &:after { background-color: _palette_light(accent5); } }
+		&.style6 { &:after { background-color: _palette_light(accent6); } }
+
+		@media screen and (prefers-color-scheme: dark) {
+			&.style1 { &:after { background-color: _palette_dark(accent1); } }
+			&.style2 { &:after { background-color: _palette_dark(accent2); } }
+			&.style3 { &:after { background-color: _palette_dark(accent3); } }
+			&.style4 { &:after { background-color: _palette_dark(accent4); } }
+			&.style5 { &:after { background-color: _palette_dark(accent5); } }
+			&.style6 { &:after { background-color: _palette_dark(accent6); } }
+		}
 
 		body.is-preload & {
 			&:after {
diff --git a/assets/sass/layout/_contact.scss b/assets/sass/layout/_contact.scss
index e9364bb..f224d4a 100644
--- a/assets/sass/layout/_contact.scss
+++ b/assets/sass/layout/_contact.scss
@@ -7,8 +7,11 @@
 /* Contact */
 
 	#contact {
-		border-bottom: solid 1px _palette(border);
+		border-bottom: solid 1px _palette_light(border);
 		overflow-x: hidden;
+		@media screen and (prefers-color-scheme: dark) {
+			border-bottom: solid 1px _palette_dark(border);
+		}
 
 		> .inner {
 			@include vendor('display', 'flex');
@@ -16,8 +19,11 @@
 
 			> :nth-child(2n - 1) {
 				@include padding(4em, 0, (0, 3em, 0, 0));
-				border-right: solid 1px _palette(border);
+				border-right: solid 1px _palette_light(border);
 				width: 60%;
+				@media screen and (prefers-color-scheme: dark) {
+					border-right: solid 1px _palette_dark(border);
+				}
 			}
 
 			> :nth-child(2n) {
@@ -33,13 +39,16 @@
 					position: relative;
 
 					&:before {
-						border-top: solid 1px _palette(border);
+						border-top: solid 1px _palette_light(border);
 						content: '';
 						display: block;
 						margin-left: -3em;
 						position: absolute;
 						top: 0;
 						width: calc(100vw + 3em);
+						@media screen and (prefers-color-scheme: dark) {
+							border-top: solid 1px _palette_dark(border);
+						}
 					}
 				}
 
diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
index eb7d7e3..696bf4a 100644
--- a/assets/sass/layout/_header.scss
+++ b/assets/sass/layout/_header.scss
@@ -13,7 +13,7 @@
 
 	#header {
 		@include vendor('display', 'flex');
-		background-color: _palette(bg-alt);
+		background-color: _palette_light(bg-alt);
 		box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);
 		cursor: default;
 		font-weight: _font(weight-bold);
@@ -27,6 +27,9 @@
 		top: 0;
 		width: 100%;
 		z-index: _misc(z-index-base);
+		@media screen and (prefers-color-scheme: dark) {
+			background-color: _palette_dark(bg-alt);
+		}
 
 		.logo {
 			border: 0;
@@ -41,23 +44,33 @@
 					'background-color #{_duration(transition)} ease-in-out',
 					'color #{_duration(transition)} ease-in-out'
 				));
-				background-color: _palette(fg-bold);
-				color: _palette(bg);
+				background-color: _palette_light(fg-bold);
+				color: _palette_light(bg);
 				display: inline-block;
 				line-height: 1.65em;
 				margin-right: 0.325em;
 				padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: _palette_dark(fg-bold);
+					color: _palette_dark(bg);
+				}
 			}
 
 			&:hover {
 				strong {
-					background-color: _palette(highlight);
+					background-color: _palette_light(highlight);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: _palette_dark(highlight);
+					}
 				}
 			}
 
 			&:active {
 				strong {
-					background-color: desaturate(darken(_palette(highlight), 15), 5);
+					background-color: desaturate(darken(_palette_light(highlight), 15), 5);
+					@media screen and (prefers-color-scheme: dark) {
+						background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
+					}
 				}
 			}
 		}
@@ -87,7 +100,7 @@
 					padding-right: 3.325em !important;
 
 					&:before, &:after {
-						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
 						background-position: center;
 						background-repeat: no-repeat;
 						background-size: 24px 32px;
@@ -99,13 +112,19 @@
 						top: 0;
 						vertical-align: middle;
 						width: 24px;
+						@media screen and (prefers-color-scheme: dark) {
+							background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						}
 					}
 
 					&:after {
 						@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
-						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
 						opacity: 0;
 						z-index: 1;
+						@media screen and (prefers-color-scheme: dark) {
+							background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						}
 					}
 
 					&:hover, &:active {
@@ -137,12 +156,20 @@
 			box-shadow: none;
 			position: absolute;
 
-			&.style1 { .logo { strong { color: _palette(accent1); } } }
-			&.style2 { .logo { strong { color: _palette(accent2); } } }
-			&.style3 { .logo { strong { color: _palette(accent3); } } }
-			&.style4 { .logo { strong { color: _palette(accent4); } } }
-			&.style5 { .logo { strong { color: _palette(accent5); } } }
-			&.style6 { .logo { strong { color: _palette(accent6); } } }
+			&.style1 { .logo { strong { color: _palette_light(accent1); } } }
+			&.style2 { .logo { strong { color: _palette_light(accent2); } } }
+			&.style3 { .logo { strong { color: _palette_light(accent3); } } }
+			&.style4 { .logo { strong { color: _palette_light(accent4); } } }
+			&.style5 { .logo { strong { color: _palette_light(accent5); } } }
+			&.style6 { .logo { strong { color: _palette_light(accent6); } } }
+			@media screen and (prefers-color-scheme: dark) {
+				&.style1 { .logo { strong { color: _palette_dark(accent1); } } }
+				&.style2 { .logo { strong { color: _palette_dark(accent2); } } }
+				&.style3 { .logo { strong { color: _palette_dark(accent3); } } }
+				&.style4 { .logo { strong { color: _palette_dark(accent4); } } }
+				&.style5 { .logo { strong { color: _palette_dark(accent5); } } }
+				&.style6 { .logo { strong { color: _palette_dark(accent6); } } }
+			}
 		}
 
 		body.is-preload & {
diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss
index f1d7239..a673a3b 100644
--- a/assets/sass/layout/_main.scss
+++ b/assets/sass/layout/_main.scss
@@ -7,10 +7,16 @@
 /* Main */
 
 	#main {
-		background-color: _palette(bg-alt);
+		background-color: _palette_light(bg-alt);
+		@media screen and (prefers-color-scheme: dark) {
+			background-color: _palette_dark(bg-alt);
+		}
 
 		> * {
-			border-top: solid 1px _palette(border);
+			border-top: solid 1px _palette_light(border);
+			@media screen and (prefers-color-scheme: dark) {
+				border-top: solid 1px _palette_dark(border);
+			}
 
 			&:first-child {
 				border-top: 0;
@@ -21,6 +27,9 @@
 
 		&.alt {
 			background-color: transparent;
-			border-bottom: solid 1px _palette(border);
+			border-bottom: solid 1px _palette_light(border);
+			@media screen and (prefers-color-scheme: dark) {
+				border-bottom: solid 1px _palette_dark(border);
+			}
 		}
 	}
\ No newline at end of file
diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss
index e53f21f..a12dca2 100644
--- a/assets/sass/layout/_menu.scss
+++ b/assets/sass/layout/_menu.scss
@@ -16,7 +16,7 @@
 		@include vendor('display', 'flex');
 		@include vendor('justify-content', 'center');
 		@include vendor('pointer-events', 'none');
-		background: transparentize(_palette(bg), 0.1);
+		background: transparentize(_palette_light(bg), 0.1);
 		box-shadow: none;
 		height: 100%;
 		left: 0;
@@ -28,6 +28,9 @@
 		visibility: hidden;
 		width: 100%;
 		z-index: _misc(z-index-base) + 2;
+		@media screen and (prefers-color-scheme: dark) {
+			background: transparentize(_palette_dark(bg), 0.1);
+		}
 
 		.inner {
 			@include vendor('transition', (
@@ -66,7 +69,7 @@
 
 					> a:not(.button) {
 						border: 0;
-						border-top: solid 1px _palette(border);
+						border-top: solid 1px _palette_light(border);
 						display: block;
 						font-size: 0.8em;
 						font-weight: _font(weight-bold);
@@ -74,6 +77,9 @@
 						line-height: 4em;
 						text-decoration: none;
 						text-transform: uppercase;
+						@media screen and (prefers-color-scheme: dark) {
+							border-top: solid 1px _palette_dark(border);
+						}
 					}
 
 					> .button {
@@ -123,12 +129,18 @@
 			}
 
 			&:before {
-				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
+				@media screen and (prefers-color-scheme: dark) {
+					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
+				}
 			}
 
 			&:after {
-				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
 				opacity: 0;
+				@media screen and (prefers-color-scheme: dark) {
+					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
+				}
 			}
 
 			&:hover, &:active {
@@ -141,7 +153,10 @@
 
 	body.is-ie {
 		#menu {
-			background: transparentize(_palette(bg-alt), 0.025);
+			background: transparentize(_palette_light(bg-alt), 0.025);
+			@media screen and (prefers-color-scheme: dark) {
+				background: transparentize(_palette_dark(bg-alt), 0.025);
+			}
 		}
 	}
 
diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss
index f563aab..ada16cb 100644
--- a/assets/sass/libs/_functions.scss
+++ b/assets/sass/libs/_functions.scss
@@ -75,11 +75,18 @@
 	@return val($misc, $keys...);
 }
 
-/// Gets a palette value.
+/// Gets a dark palette value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
-@function _palette($keys...) {
-	@return val($palette, $keys...);
+@function _palette_dark($keys...) {
+	@return val($palette_dark, $keys...);
+}
+
+/// Gets a light palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette_light($keys...) {
+		@return val($palette_light, $keys...);
 }
 
 /// Gets a size value.
diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss
index da67b83..ae20d8f 100644
--- a/assets/sass/libs/_vars.scss
+++ b/assets/sass/libs/_vars.scss
@@ -28,20 +28,36 @@
 		letter-spacing-alt:	0.25em
 	);
 
-// Palette.
-	$palette: ( 
-		bg:					#D8D9CF,
-		bg-alt:				#F0EEED,
-		fg:					#393E46,
-		fg-bold:			#222831,
-		fg-light:			rgba(216,217,207,0.2),
-		border:				rgba(57,62,70,0.1),
-		border-bg:			rgba(34,40,49,0.035),
-		highlight:			#FD7014,
-		accent1:			#FF8B13,
-		accent2:			#CF4DCE,
-		accent3:			#F273E6,
-		accent4:			#e7b788,
-		accent5:			#8ea9e8,
-		accent6:			#609EA2
-	);
\ No newline at end of file
+	// Palette.
+		$palette_light: ( 
+			bg:					#D8D9CF,
+			bg-alt:				#F0EEED,
+			fg:					#393E46,
+			fg-bold:			#222831,
+			fg-light:			rgba(216,217,207,0.2),
+			border:				rgba(57,62,70,0.1),
+			border-bg:			rgba(34,40,49,0.035),
+			highlight:			#FD7014,
+			accent1:			#FF8B13,
+			accent2:			#CF4DCE,
+			accent3:			#F273E6,
+			accent4:			#e7b788,
+			accent5:			#8ea9e8,
+			accent6:			#609EA2
+		);
+		$palette_dark: ( 
+			bg:					#393E46,
+			bg-alt:				#222831,
+			fg:					#D8D9CF,
+			fg-bold:			#F0EEED,
+			fg-light:			rgba(216,217,207,0.2),
+			border:				rgba(57,62,70,0.1),
+			border-bg:			rgba(34,40,49,0.035),
+			highlight:			#FD7014,
+			accent1:			#FF8B13,
+			accent2:			#CF4DCE,
+			accent3:			#F273E6,
+			accent4:			#e7b788,
+			accent5:			#8ea9e8,
+			accent6:			#609EA2
+		);	
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 4f838e9..37f5678 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -20,7 +20,6 @@
 		xxsmall:   (null,     360px    )
 	));
 
-
 // Mixins.
 
 	@mixin inner {
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 46f5ee3..0f5757b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,8 +1,10 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="color-scheme" content="light dark">
 	<link rel="profile" href="https://gmpg.org/xfn/11">
 
+
 	{{ $style_options := (dict "targetPath" "css/style.css" "outputStyle" "compressed" "transpiler" "dartsass" "enableSourceMap" (not hugo.IsProduction)) }}
 	{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $style_options }}