From 05694e9091df296d5d474401e3373c178e48623a Mon Sep 17 00:00:00 2001
From: Raymond Kneipp <raymond.f.kneipp@gmail.com>
Date: Tue, 18 Oct 2022 11:26:31 -0400
Subject: [PATCH 1/2] change logo, body, and header based on color preference

Signed-off-by: Raymond Kneipp <raymond.f.kneipp@gmail.com>
---
 static/css/main.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index 611cb18..a8960b3 100644
--- a/static/css/main.css
+++ b/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,6 +593,12 @@ header {
     border-bottom: solid 1px #B8E1FF;
 }
 
+@media (prefers-color-scheme: dark) {
+    header {
+        border-color: #007edb;
+    }
+}
+
 #eye-catch {
     background-color: #EFEFEF;
 }

From 32e1f41f1c327666cb94ea24def60d6803b714dd Mon Sep 17 00:00:00 2001
From: Raymond Kneipp <raymond.f.kneipp@gmail.com>
Date: Tue, 18 Oct 2022 13:35:17 -0400
Subject: [PATCH 2/2] feat: dark theme

Signed-off-by: Raymond Kneipp <raymond.f.kneipp@gmail.com>
---
 .hugo_build.lock                      |   0
 layouts/partials/header.html          |   8 +-
 static/css/main.css                   | 111 +++++++++++++++++++++++++-
 static/img/AsahiLinux_logo_darkbg.svg |   1 +
 4 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 .hugo_build.lock
 create mode 120000 static/img/AsahiLinux_logo_darkbg.svg

diff --git a/.hugo_build.lock b/.hugo_build.lock
new file mode 100644
index 0000000..e69de29
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4e3b48e..bc03172 100644
--- a/layouts/partials/header.html
+++ b/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">
diff --git a/static/css/main.css b/static/css/main.css
index a8960b3..6f4fa62 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -595,7 +595,7 @@ header {
 
 @media (prefers-color-scheme: dark) {
     header {
-        border-color: #007edb;
+        border-color: #003f6d;
     }
 }
 
@@ -603,6 +603,12 @@ header {
     background-color: #EFEFEF;
 }
 
+@media (prefers-color-scheme: dark) {
+    #eye-catch {
+        background-color: #101010;
+    }
+}
+
 #eye-catch > div {
     display: flex;
     align-items: center;
@@ -622,6 +628,7 @@ header {
     animation-name: fadein;
     animation-duration: 2.5s;
 }
+
 @keyframes fadein {
 from {
     opacity: 0;
@@ -636,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%;
@@ -658,6 +671,12 @@ to {
     color: #A61200;
 }
 
+@media (prefers-color-scheme: dark) {
+    #eye-catch .more {
+        color: #ffb2a8;
+    }
+}
+
 .big-icon {
     font-size: 350%;
 }
@@ -666,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;
 }
@@ -678,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;
@@ -747,29 +778,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 {
@@ -807,6 +874,12 @@ body.landing #documentation {
     min-height: 70vh;
 }
 
+@media (prefers-color-scheme: dark) {
+    #post-section {
+        background-color: #101010;
+    }
+}
+
 .post {
     width: 100%;
 }
@@ -854,6 +927,12 @@ body.landing #documentation {
     text-decoration: underline;
 }
 
+@media (prefers-color-scheme: dark) {
+    .post a {
+        color: #ff71a4;
+    }
+}
+
 code {
     color: #0D4F1A;
     padding: 0 .4em;
@@ -863,6 +942,12 @@ code {
     border-radius: 6px;
 }
 
+@media (prefers-color-scheme: dark) {
+    code {
+        color: #4be169;
+    }
+}
+
 pre {
     margin: 1em 0;
     padding: 1em;
@@ -894,6 +979,12 @@ blockquote {
     padding: 15px;
 }
 
+@media (prefers-color-scheme: dark) {
+    blockquote {
+        background-color: #181818;
+    }
+}
+
 p img, figure img {
     max-width: 100%;
 }
@@ -929,6 +1020,12 @@ p img, figure img {
     background-color: #dedede;
 }
 
+@media (prefers-color-scheme: dark) {
+    .blog-nav li {
+        background-color: #181818;
+    }
+}
+
 .blog-nav li.nav-spacer {
     background: none;
 }
@@ -953,6 +1050,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;
 }
@@ -975,6 +1078,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%;
diff --git a/static/img/AsahiLinux_logo_darkbg.svg b/static/img/AsahiLinux_logo_darkbg.svg
new file mode 120000
index 0000000..9893637
--- /dev/null
+++ b/static/img/AsahiLinux_logo_darkbg.svg
@@ -0,0 +1 @@
+../../artwork/logos/svg/AsahiLinux_logo_darkbg.svg
\ No newline at end of file