From 2b5a7f5f0eb815b41a9c5d84f6d8f9bf3cd9a147 Mon Sep 17 00:00:00 2001
From: Hau Nguyen <hauvipapro@gmail.com>
Date: Thu, 14 Jul 2022 12:38:17 +0700
Subject: [PATCH] feat: add dark theme

use prefers-color-scheme
---
 README.md            |  4 ++++
 docs/styles.css      |  2 +-
 templates/styles.css | 23 +++++++++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 70b7890..28c7895 100644
--- a/README.md
+++ b/README.md
@@ -18,3 +18,7 @@ make
 - https://motherfuckingwebsite.com/
 - http://bettermotherfuckingwebsite.com/
 - https://evenbettermotherfucking.website/
+- https://thebestmotherfucking.website/
+- https://perfectmotherfuckingwebsite.com/
+- https://primer.style/design/foundations/color
+- https://primer.style/primitives/colors
diff --git a/docs/styles.css b/docs/styles.css
index 09080f7..1993190 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1 +1 @@
-body{font-family:recursive,sans-serif;font-variation-settings:"MONO" 0,"CASL" 1;margin:5% auto;max-width:75%;line-height:1.8}code{font-family:recursive,monospace;font-variation-settings:"MONO" 1,"CASL" 1}
\ No newline at end of file
+body{font-family:recursive,sans-serif;font-variation-settings:"MONO" 0,"CASL" 1;margin:5% auto;max-width:75%;line-height:1.8;color:#24292f;background:#fff}code{font-family:recursive,monospace;font-variation-settings:"MONO" 1,"CASL" 1;display:inline-block;background:#f6f8fa}a{color:#0969da}@media(prefers-color-scheme:dark){body{color:#c9d1d9;background:#0d1117}code{background:#161b22}a{color:#58a6ff}}
\ No newline at end of file
diff --git a/templates/styles.css b/templates/styles.css
index 5dc959d..f44c507 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -4,9 +4,32 @@ body {
   margin: 5% auto;
   max-width: 75%;
   line-height: 1.8;
+  color: #24292f;
+  background: #ffffff;
 }
 
 code {
   font-family: "Recursive", monospace;
   font-variation-settings: "MONO" 1, "CASL" 1;
+  display: inline-block;
+  background: #f6f8fa;
+}
+
+a {
+  color: #0969da;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+
+  code {
+    background: #161b22;
+  }
+
+  a {
+    color: #58a6ff;
+  }
 }