Dark mode

layouts/partials/header.html

@@ -29,7 +29,13 @@
 <body{{ if .IsHome }} class="landing"{{ end }}>
     <header id="header">
         <div class="header-logo">
-            <a href="/"><img src="/img/AsahiLinux_logo.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo.svg" | md5) 0 8 }}" class="logo" alt=""></a>
+            <a href="/">
+
+            <picture>
+                <source srcset="/img/AsahiLinux_logo_darkbg.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo_darkbg.svg" | md5) 0 8 }}" media="(prefers-color-scheme: dark)">
+                <img src="/img/AsahiLinux_logo.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo.svg" | md5) 0 8 }}" class="logo" alt="Asahi Linux logo">
+              </picture>
+            </a>
         </div>
         <div class="header-menu">
             <ul class="menu-container flex-container">

static/css/main.css

@@ -531,6 +531,13 @@ body {
     color: #2C2C2C;
 }
 
+@media (prefers-color-scheme: dark) {
+    body {
+        color: #d3d3d3;
+        background: #000;
+    }
+}
+
 body.landing h1 {
     font-size: 200%;
     margin-bottom: 5px;
@@ -570,6 +577,12 @@ div.header-menu {
     border-top: solid 1px #2C2C2C;
 }
 
+@media (prefers-color-scheme: dark) {
+    .menu-container {
+        border-color: #d3d3d3
+    }
+}
+
 .menu-container li {
     font-family: 'Montserrat', sans-serif;
     font-weight: normal;
@@ -580,10 +593,22 @@ header {
     border-bottom: solid 1px #B8E1FF;
 }
 
+@media (prefers-color-scheme: dark) {
+    header {
+        border-color: #003f6d;
+    }
+}
+
 #eye-catch {
     background-color: #EFEFEF;
 }
 
+@media (prefers-color-scheme: dark) {
+    #eye-catch {
+        background-color: #101010;
+    }
+}
+
 #eye-catch > div {
     display: flex;
     align-items: center;
@@ -603,6 +628,7 @@ header {
     animation-name: fadein;
     animation-duration: 2.5s;
 }
+
 @keyframes fadein {
 from {
     opacity: 0;
@@ -617,6 +643,12 @@ to {
     border-left: solid 1px #6D6D6D;
 }
 
+@media (prefers-color-scheme: dark) {
+    #eye-catch > div > div:nth-of-type(2) {
+        border-color: #929292;
+    }
+}
+
 #eye-catch > div > div > img {
     position: relative;
     width: 100%;
@@ -639,6 +671,12 @@ to {
     color: #A61200;
 }
 
+@media (prefers-color-scheme: dark) {
+    #eye-catch .more {
+        color: #ffb2a8;
+    }
+}
+
 .big-icon {
     font-size: 350%;
 }
@@ -647,6 +685,12 @@ body.landing #community {
     background-color: #9D2D48;
 }
 
+@media (prefers-color-scheme: dark) {
+    body.landing #community {
+        background-color: #270b12;
+    }
+}
+
 div.center-title {
     margin: 50px auto;
 }
@@ -659,6 +703,12 @@ div.center-title h1, div.center-title h2 {
     background-color: #7A162E;
 }
 
+@media (prefers-color-scheme: dark) {
+    .community-links {
+        background-color: #1e050b;
+    }
+}
+
 .community-links div {
     display: flex;
     align-content: center;
@@ -755,29 +805,65 @@ body.landing #download {
     background-color: #4ecbaa;
 }
 
+@media (prefers-color-scheme: dark) {
+    body.landing #download {
+        background-color: #0f362c;
+    }
+}
+
 .download-card {
     background-color: #057f5f;
 }
 
+@media (prefers-color-scheme: dark) {
+    .download-card {
+        background-color: #011f17;
+    }
+}
+
 /* Contribute */
 body.landing #contribute {
     background-color: #FFF;
 }
 
+@media (prefers-color-scheme: dark) {
+    body.landing #contribute {
+        background-color: #3f3f3f;
+    }
+}
+
 .contribute-card {
     background-color: #848484;
 }
 
+@media (prefers-color-scheme: dark) {
+    .contribute-card {
+        background-color: #212121;
+    }
+}
+
 /* Documentation */
 
 body.landing #documentation {
     background-color: #D7EAFF;
 }
 
+@media (prefers-color-scheme: dark) {
+    body.landing #documentation {
+        background-color: #003775;
+    }
+}
+
 .documentation-card {
     background-color: #556E8A;
 }
 
+@media (prefers-color-scheme: dark) {
+    .documentation-card {
+        background-color: #001b3a;
+    }
+}
+
 /* Centered cards */
 
 .center-card {
@@ -815,6 +901,12 @@ body.landing #documentation {
     min-height: 70vh;
 }
 
+@media (prefers-color-scheme: dark) {
+    #post-section {
+        background-color: #101010;
+    }
+}
+
 .post {
     width: 100%;
 }
@@ -869,6 +961,12 @@ body.landing #documentation {
     text-decoration: underline;
 }
 
+@media (prefers-color-scheme: dark) {
+    .post a {
+        color: #ff71a4;
+    }
+}
+
 code {
     color: #0D4F1A;
     padding: 0 .4em;
@@ -878,8 +976,10 @@ code {
     border-radius: 6px;
 }
 
-pre code {
-    padding: 0;
+@media (prefers-color-scheme: dark) {
+    code {
+        color: #4be169;
+    }
 }
 
 pre {
@@ -894,6 +994,7 @@ pre {
 
 pre code {
     background: none;
+    padding: 0;
 }
 
 div.curlsh {
@@ -913,6 +1014,12 @@ blockquote {
     padding: 15px;
 }
 
+@media (prefers-color-scheme: dark) {
+    blockquote {
+        background-color: #181818;
+    }
+}
+
 p img, figure img {
     max-width: 100%;
 }
@@ -948,6 +1055,12 @@ ul.blog-nav li {
     background-color: #dedede;
 }
 
+@media (prefers-color-scheme: dark) {
+    .blog-nav li {
+        background-color: #181818;
+    }
+}
+
 ul.blog-nav li.nav-spacer {
     background: none;
 }
@@ -972,6 +1085,12 @@ div#breadcrumbs, div.post-bottom {
     background-color: #dedede;
 }
 
+@media (prefers-color-scheme: dark) {
+    div#breadcrumbs, div.post-bottom {
+        background-color: #181818;
+    }
+}
+
 div#breadcrumbs a {
     text-decoration: none;
 }
@@ -994,6 +1113,12 @@ div.post-bottom {
     border-radius: 10px;
 }
 
+@media (prefers-color-scheme: dark) {
+    .post-list li {
+        background-color: #181818;
+    }
+}
+
 .post-list summary {
     margin: 5px 0px;
     font-size: 95%;

static/img/AsahiLinux_logo_darkbg.svg

@@ -0,0 +1 @@
+../../artwork/logos/svg/AsahiLinux_logo_darkbg.svg