Add dark mode

Author: alexeygrigorev

_includes/head.html

@@ -11,6 +11,21 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta property="og:locale" content="en_US">
+  <script>
+    (function () {
+      var theme = 'light';
+      try {
+        var storedTheme = localStorage.getItem('jtd-theme');
+        if (storedTheme === 'dark') {
+          theme = 'dark';
+        }
+      } catch (error) {
+      }
+
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+      document.documentElement.classList.toggle('light', theme !== 'dark');
+    })();
+  </script>
 
   {% if page.name == 'index.md' %}
     <title>{{ page.title | default: site.name }}</title>
@@ -61,6 +76,7 @@
 
   <link rel="stylesheet" href="/assets/styles.css" />
   <link rel="stylesheet" href="/assets/syntax.css" />
+  <script src="/assets/theme.js" defer></script>
 
   {% if page.math == true %}
     {% include mathjax.html %}
@@ -70,4 +86,4 @@
   {% endif %}
 
 
-</head>
+</head>

_includes/header.html

@@ -27,9 +27,25 @@
 <div class="container">
 {% endif %}
 
-  <div class="row mt-3 text-center">
+  <div class="row mt-3 text-center site-title-row">
     <div class="col">
       <h2><a href="/" style="text-decoration: none; color: inherit;">DataTalks.Club</a></h2>
+      <button class="theme-toggle" type="button" aria-label="Switch to dark mode" title="Switch to dark mode">
+        <svg class="theme-toggle-icon theme-toggle-icon-light" viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="4"></circle>
+          <path d="M12 2v2"></path>
+          <path d="M12 20v2"></path>
+          <path d="m4.93 4.93 1.41 1.41"></path>
+          <path d="m17.66 17.66 1.41 1.41"></path>
+          <path d="M2 12h2"></path>
+          <path d="M20 12h2"></path>
+          <path d="m6.34 17.66-1.41 1.41"></path>
+          <path d="m19.07 4.93-1.41 1.41"></path>
+        </svg>
+        <svg class="theme-toggle-icon theme-toggle-icon-dark" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 3a6 6 0 0 0 9 7.5A9 9 0 1 1 12 3Z"></path>
+        </svg>
+      </button>
     </div>
   </div>
 

_posts/2025-09-23-ai-dev-tools-zoomcamp-2025-free-course-to-master-coding-assistants-agents-and-automation.md

@@ -22,7 +22,7 @@ datepublished: '2025-09-23'
 AI development tools have moved into everyday engineering work. Chat applications like ChatGPT and Claude, coding assistants like GitHub Copilot and Cursor, project bootstrappers like Bolt and Lovable, agents, and automation platforms like n8n have shifted the way we code and automate our workflows. The ecosystem is broad, and it's not always clear which tools to adopt or how to use them reliably in real projects.
 
 <figure>
-<img src="/images/posts/2025-09-23-ai-dev-tools-zoomcamp-2025-free-course-to-master-coding-assistants-agents-and-automation/course-cover.png" alt="AI Dev Tools Zoomcamp 2025 - free course covering coding assistants, agents, CI/CD automation, and no-code tools" title="AI Dev Tools Zoomcamp 2025 Course Overview" loading="lazy" style="max-width: 100%; height: auto;" />
+<img src="/images/posts/2025-09-23-ai-dev-tools-zoomcamp-2025-free-course-to-master-coding-assistants-agents-and-automation/course-cover.png" data-light-src="/images/posts/2025-09-23-ai-dev-tools-zoomcamp-2025-free-course-to-master-coding-assistants-agents-and-automation/course-cover.png" data-dark-src="/images/posts/2025-09-23-ai-dev-tools-zoomcamp-2025-free-course-to-master-coding-assistants-agents-and-automation/dark/course-cover.png" alt="AI Dev Tools Zoomcamp 2025 - free course covering coding assistants, agents, CI/CD automation, and no-code tools" title="AI Dev Tools Zoomcamp 2025 Course Overview" loading="lazy" style="max-width: 100%; height: auto;" />
 <figcaption>AI Dev Tools Zoomcamp 2025 course cover</figcaption>
 </figure>
 
@@ -226,4 +226,4 @@ For more details about how our courses work, check the [Zoomcamp logistics guide
 
 {% include related-posts.html manual_posts=page.related_posts max_posts=5 %}
 
-{% include course-structured-data/ai-dev-tools-zoomcamp-structured-data.html %}
+{% include course-structured-data/ai-dev-tools-zoomcamp-structured-data.html %}