Add a note that dark mode is experimental

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;
+    }
+}

blog/templates/edition-2/index.html

@@ -118,6 +118,8 @@
             </p>
         </div>
     </div>
+
+    {{ snippets::dark_mode_note() }}
 </aside>
 
 {% endblock after_main %}

blog/templates/edition-2/page.html

@@ -130,6 +130,8 @@
             {% endfor %}</ul>
         </div>
         {%- endif %}
+
+        {{ snippets::dark_mode_note() }}
     </aside>
 
 {% endblock main %}

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 %}