From 60728d6fe2cc03a6ae9a6352cdd0f7a61fb60219 Mon Sep 17 00:00:00 2001
From: elseif <elseif@live.cn>
Date: Wed, 27 Aug 2025 19:27:34 +0800
Subject: [PATCH] Update index.html

Signed-off-by: elseif <elseif@live.cn>
---
 index.html | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 100 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index be553c2..73acd27 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-
 <!doctype html>
 <html lang="en" >
 <head>
@@ -7,6 +6,80 @@
     <link href="https://unpkg.com/font-awesome/css/font-awesome.min.css" rel="stylesheet">
     <link href="https://unpkg.com/firacode/distr/fira_code.css" rel="stylesheet">
     <style>
+
+    body,html {
+        height: 100%;
+        font-size: 100%
+    }
+    *,:after,:before {box-sizing: border-box}
+
+    body {
+        background: #F7F7F7;
+        color: #757575;
+        margin: 0;
+        font-family: arial,sans-serif;
+        line-height: 1.5;
+    }
+    .wrapper { background:white; }
+    table { background: #fff; }
+    table thead, table tfoot { background: #f5f5f5; }
+
+    /* --- DARK THEME --- */
+    body.dark {
+        background: #1e1e1e;
+        color: #ddd;
+    }
+    body.dark .wrapper {
+        background: #2a2a2a;
+    }
+    body.dark h1,h2,h3,h4,h5,h6 {
+        color: #f0f0f0;
+    }
+    body.dark a { color:#4ea3ff; }
+    body.dark a:hover { color:#81c8ff; }
+    body.dark table {
+        background: #2a2a2a;
+        border-color: #444;
+    }
+    body.dark table thead, body.dark table tfoot {
+        background: #333;
+    }
+    body.dark table tr td, 
+    body.dark table tr th {
+        color: #ddd;
+    }
+    body.dark .downloadTable tbody tr:hover {
+        background-color: #333 !important;
+    }
+    body.dark .downloadTable thead tr {
+        background-color: #444 !important;
+    }
+    body.dark .downloadTable thead th {
+        color: #eee !important;
+    }
+    body.dark #command pre {
+        background: #111;
+        color: #eaeaea;
+    }
+
+    /* دکمه تغییر تم */
+    #theme-toggle {
+        position: fixed;
+        top: 60px;
+        right: 15px;
+        background: #0992c9;
+        color: #fff;
+        border: none;
+        padding: 8px 14px;
+        cursor: pointer;
+        border-radius: 6px;
+        font-size: 14px;
+        z-index: 2000;
+    }
+    #theme-toggle:hover {
+        background: #0775a1;
+    }
+	
         body,html {
             height: 100%;
             font-size: 100%
@@ -154,7 +227,7 @@
         .downloadTable tbody tr{border-bottom:1px solid #e3e3e3}
         .downloadTable tbody tr:hover{background-color:#f7f7f7}
         .downloadTable td{padding:6px 10px}
-        .downloadTable tbody tr.ht td{background-color:#E8E8E8;border-bottom:0;}
+        .downloadTable tbody tr.ht td{background-color:#888;border-bottom:0;}
         .downloadTable tbody tr td.boldy{font-weight:bold;}
         .downloadTable tbody tr:last-child{border-bottom:0;}
         .downloadTable thead tr{background-color:#4caf50;}
@@ -286,6 +359,10 @@
     </style>
 </head>
 <body>
+
+<script>
+
+</script>
     <script>
         function fetch_latest_versions(url, defaultValue) {
             try {
@@ -770,10 +847,31 @@
             });
             initLanguage();
 
+
+            const themeBtn = document.getElementById("theme-toggle");
+            const currentTheme = localStorage.getItem("theme");
+
+            if(currentTheme === "dark"){
+                document.body.classList.add("dark");
+                themeBtn.innerHTML = '<i class="fa fa-sun-o"></i> Light';
+            }
+
+            themeBtn.addEventListener("click", ()=>{
+                document.body.classList.toggle("dark");
+                if(document.body.classList.contains("dark")){
+                    themeBtn.innerHTML = '<i class="fa fa-sun-o"></i> Light';
+                    localStorage.setItem("theme","dark");
+                } else {
+                    themeBtn.innerHTML = '<i class="fa fa-moon-o"></i> Dark';
+                    localStorage.setItem("theme","light");
+                }
+            });
+    
         });
     </script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
     <div class="wrapper">
+        <button id="theme-toggle"><i class="fa fa-moon-o"></i> Dark</button>
         <a href="https://github.com/elseif/MikroTikPatch" class="github-corner" aria-label="View source on GitHub" target="_blank">
             <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#151513" style="position: absolute; top: 0; right: 0">
             <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#151513"/>
