From d8c27c7fcc7e6c361f5da6a091ef56f02ce58403 Mon Sep 17 00:00:00 2001
From: Philipp Oppermann <dev@phil-opp.com>
Date: Sat, 16 Oct 2021 17:27:33 +0200
Subject: [PATCH] Add a note that dark mode is experimental

---
 blog/sass/css/edition-2/main.scss   | 22 ++++++++++++++++++++++
 blog/templates/edition-2/index.html |  2 ++
 blog/templates/edition-2/page.html  |  2 ++
 blog/templates/snippets.html        |  9 +++++++++
 4 files changed, 35 insertions(+)

diff --git a/blog/sass/css/edition-2/main.scss b/blog/sass/css/edition-2/main.scss
index e59b1131..f4712bbe 100644
--- a/blog/sass/css/edition-2/main.scss
+++ b/blog/sass/css/edition-2/main.scss
@@ -820,6 +820,10 @@ div.warning p:last-child {
     margin-bottom: 0;
 }
 
+div.warning h2 {
+    margin-top: 0rem;
+}
+
 form.subscribe {
     margin: 1rem;
 }
@@ -956,3 +960,21 @@ a strong {
 img {
     background-color: white;
 }
+
+
+.dark-mode-note {
+    display: none;
+}
+body.dark .dark-mode-note {
+    display: block;
+}
+@media (prefers-color-scheme: dark) {
+    /* defaults to dark theme */
+    .dark-mode-note {
+        display: block;
+    }
+    /* Override dark mode with light mode styles if the user decides to swap */
+    body.light .dark-mode-note {
+        display: none;
+    }
+}
diff --git a/blog/templates/edition-2/index.html b/blog/templates/edition-2/index.html
index 4c893f5c..bab56839 100644
--- a/blog/templates/edition-2/index.html
+++ b/blog/templates/edition-2/index.html
@@ -118,6 +118,8 @@
             </p>
         </div>
     </div>
+
+    {{ snippets::dark_mode_note() }}
 </aside>
 
 {% endblock after_main %}
diff --git a/blog/templates/edition-2/page.html b/blog/templates/edition-2/page.html
index ba5f3e03..e1117506 100644
--- a/blog/templates/edition-2/page.html
+++ b/blog/templates/edition-2/page.html
@@ -130,6 +130,8 @@
             {% endfor %}</ul>
         </div>
         {%- endif %}
+
+        {{ snippets::dark_mode_note() }}
     </aside>
 
 {% endblock main %}
diff --git a/blog/templates/snippets.html b/blog/templates/snippets.html
index 452fed9a..96dbcf57 100644
--- a/blog/templates/snippets.html
+++ b/blog/templates/snippets.html
@@ -45,3 +45,12 @@
         Instead of authenticating the <a href="https://giscus.app">giscus</a> application, you can also comment directly <a href="{{ discussion_url }}"><em>on GitHub</em></a>.
     </p>
 {% endmacro giscus %}
+
+{% macro dark_mode_note() %}
+<div class="dark-mode-note warning">
+    <h2>Dark Mode is Experimental</h2>
+    <p>
+        We're still working on adjusting text colors, fixing images, and removing inconsistencies. If you have any problems, please <a href="https://github.com/phil-opp/blog_os/issues">file an issue</a>.
+    </p>
+</aside>
+{% endmacro dark_mode_note %}