feat: dark theme

AsahiLinux · Oct 18, 2022 · 571bb17 · 571bb17
1 parent 0d2d62c
commit 571bb17
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 2 deletions.
diff --git a/.hugo_build.lock b/.hugo_build.lock
diff --git 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
@@ -595,14 +595,20 @@ header {
 
 @media (prefers-color-scheme: dark) {
     header {
-        border-color: #007edb;
+        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;
@@ -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
@@ -0,0 +1 @@
+../../artwork/logos/svg/AsahiLinux_logo_darkbg.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../artwork/logos/svg/AsahiLinux_logo_darkbg.svg