diff --git a/flaskr/__init__.py b/flaskr/__init__.py
index 4bf718b0..b92e3fe4 100644
--- a/flaskr/__init__.py
+++ b/flaskr/__init__.py
@@ -1,6 +1,6 @@
 import os
 
-from flask import Flask
+from flask import Flask, request, g
 
 
 def create_app(test_config=None):
@@ -31,6 +31,14 @@ def create_app(test_config=None):
     def hello():
         return "Hello, World!"
 
+    @app.before_request
+    def load_theme_preference():
+        theme = request.cookies.get('theme')
+        if theme:
+            g.theme = theme
+        else:
+            g.theme = 'dark' if request.user_agent.platform in ['android', 'iphone'] and request.user_agent.browser in ['chrome', 'safari'] and request.user_agent.string.find('DarkMode') != -1 else 'light'
+
     # register the database commands
     from . import db
 
diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index 1c888fe8..40bf852d 100644
--- a/flaskr/static/style.css
+++ b/flaskr/static/style.css
@@ -152,3 +152,25 @@ input[type=submit] {
 input[type=submit]:hover {
   background-color: #2c5f8a;
 }
+
+body.dark-mode {
+  background: #121212;
+  color: #e0e0e0;
+}
+
+body.dark-mode a {
+  color: #bb86fc;
+}
+
+body.dark-mode nav {
+  background: #333;
+}
+
+body.dark-mode .flash {
+  background: #333;
+  border-color: #bb86fc;
+}
+
+body.dark-mode .post .about {
+  color: #999;
+}
diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html
index f09e9268..feff0fb3 100644
--- a/flaskr/templates/base.html
+++ b/flaskr/templates/base.html
@@ -1,9 +1,15 @@
 <!doctype html>
 <title>{% block title %}{% endblock %} - Flaskr</title>
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+<script src="https://kit.fontawesome.com/57e33e1f60.js" crossorigin="anonymous"></script>
 <nav>
   <h1><a href="{{ url_for('index') }}">Flaskr</a></h1>
   <ul>
+    <li>
+      <button id="theme-toggle" aria-label="Toggle Dark Mode">
+        <i id="theme-icon" class="fas"></i>
+      </button>
+    </li>
     {% if g.user %}
       <li><span>{{ g.user['username'] }}</span>
       <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
@@ -22,3 +28,25 @@
   {% endfor %}
   {% block content %}{% endblock %}
 </section>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeIcon = document.getElementById('theme-icon');
+    const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
+    if (currentTheme === 'dark') {
+      document.body.classList.add('dark-mode');
+      themeIcon.classList.add('fa-sun');
+    } else {
+      themeIcon.classList.add('fa-moon');
+    }
+
+    themeToggle.addEventListener('click', function() {
+      document.body.classList.toggle('dark-mode');
+      const newTheme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
+      localStorage.setItem('theme', newTheme);
+      themeIcon.classList.toggle('fa-sun');
+      themeIcon.classList.toggle('fa-moon');
+    });
+  });
+</script>
