diff --git a/index-en.html b/index-en.html
index b948515..efc565e 100644
--- a/index-en.html
+++ b/index-en.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">A Visual Git Reference</h1>
 
   <div id="language-box">
diff --git a/index-es.html b/index-es.html
index aeff79e..68aac60 100644
--- a/index-es.html
+++ b/index-es.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Una referencia visual de Git</h1>
 
   <div id="language-box">
diff --git a/index-fr.html b/index-fr.html
index 07704ce..168aa53 100644
--- a/index-fr.html
+++ b/index-fr.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Une Référence Visuelle de Git</h1>
 
   <div id="language-box">
diff --git a/index-it.html b/index-it.html
index ef808f3..869f77d 100644
--- a/index-it.html
+++ b/index-it.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Guida visuale a Git</h1>
 
   <div id="language-box">
diff --git a/index-ja.html b/index-ja.html
index d1d2fdf..2dfba4a 100644
--- a/index-ja.html
+++ b/index-ja.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">図解 Git</h1>
 
   <div id="language-box">
diff --git a/index-ko.html b/index-ko.html
index f362fb6..a85b06b 100644
--- a/index-ko.html
+++ b/index-ko.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">A Visual Git Reference</h1>
 
   <div id="language-box">
diff --git a/index-pl.html b/index-pl.html
index fd2b22b..69ff8f8 100644
--- a/index-pl.html
+++ b/index-pl.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Git: Wizualna ściąga</h1>
 
   <div id="language-box">
diff --git a/index-pt.html b/index-pt.html
index e3ba9a3..b9b3bfe 100644
--- a/index-pt.html
+++ b/index-pt.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Uma Referência Visual do Git</h1>
 
   <div id="language-box">
diff --git a/index-ru.html b/index-ru.html
index 5ab0cf7..9fc7907 100644
--- a/index-ru.html
+++ b/index-ru.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Git: наглядная справка</h1>
 
   <div id="language-box">
diff --git a/index-sk.html b/index-sk.html
index e3ee76c..56ab390 100644
--- a/index-sk.html
+++ b/index-sk.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Príručka Visual Git</h1>
 
   <div id="language-box">
diff --git a/index-vi.html b/index-vi.html
index 3a2d493..124c8ce 100644
--- a/index-vi.html
+++ b/index-vi.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Tham chiếu Git bằng hình ảnh</h1>
 
   <div id="language-box">
diff --git a/index-zh-cn.html b/index-zh-cn.html
index 7ea3033..0b0434c 100644
--- a/index-zh-cn.html
+++ b/index-zh-cn.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">图解Git</h1>
 
   <div id="language-box">
diff --git a/index-zh-tw.html b/index-zh-tw.html
index 80e84a1..b0840f5 100644
--- a/index-zh-tw.html
+++ b/index-zh-tw.html
@@ -9,6 +9,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body onload="replace_all_PNGs();">
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">圖解Git</h1>
 
   <div id="language-box">
diff --git a/translate-en.html b/translate-en.html
index c9a9a52..efff5f4 100644
--- a/translate-en.html
+++ b/translate-en.html
@@ -8,6 +8,7 @@
           async src="goatcounter.js"></script>
 </head>
 <body>
+  <button id="dark-mode-toggle">Toggle Dark Mode</button>
   <h1 id="top">Translating <em>A Visual Git Reference</em></h1>
 
   <p>Thanks to kindness of others, <a href='index-en.html'><em>A Visual Git
diff --git a/visual-git-guide.css b/visual-git-guide.css
index 808d50f..5eb691f 100644
--- a/visual-git-guide.css
+++ b/visual-git-guide.css
@@ -47,6 +47,36 @@ hr{
 }
 
 
+.dark-mode {
+    background: #000000; /* Black background */
+    color: #ffffff; /* White text */
+}
+
+.dark-mode a, .dark-mode a:visited {
+    color: #49a6e9; /* Adjust link color for dark mode */
+}
+
+.dark-mode h1, .dark-mode h2, .dark-mode h3 {
+    color: #ffffff;
+}
+
+.dark-mode hr {
+    background: #424242;
+}
+
+#dark-mode-toggle {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    padding: 10px;
+    background-color: #f05033; /* Button background */
+    color: white; /* Button text color */
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+
 .center {
     text-align: center;
 }
