diff --git a/docs/ElunaDoc/static/eluna-logo.png b/docs/ElunaDoc/static/eluna-logo.png
index 66947689a9..0470a5a908 100644
Binary files a/docs/ElunaDoc/static/eluna-logo.png and b/docs/ElunaDoc/static/eluna-logo.png differ
diff --git a/docs/ElunaDoc/static/main.css b/docs/ElunaDoc/static/main.css
index 43ae8db4d5..67314c6ef4 100644
--- a/docs/ElunaDoc/static/main.css
+++ b/docs/ElunaDoc/static/main.css
@@ -62,45 +62,75 @@
 
 /* General structure and fonts */
 
+/* base color defines */
+:root {
+    --clr-light-main: #fff;
+    --clr-light-codebox: #F5F5F5;
+    --clr-light-current-selection: #8c6067;
+    --clr-light-table-border: #ddd;
+    --clr-light-table-header: #f5f5f5;
+    --clr-light-table-nth: #f9f9f9;
+    --clr-light-content-highlight: #c6afb3;
+    
+    --clr-dark-main: #333;
+    --clr-dark-codebox: #2f2f2f;
+    --clr-dark-current-selection: #4d76ae;
+    --clr-dark-table: #2f2f2f;
+    --clr-dark-table-border: #444;
+    --clr-dark-table-header: #3a3a3a;
+    --clr-dark-table-nth: #333;
+    --clr-dark-content-highlight: #d5eeff;
+}
+
 body {
-    color: #333;
+    background-color: var(--clr-light-main);
+    color: var(--clr-dark-main);
     min-width: 500px;
     font: 16px/1.4 "Source Serif Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin: 0;
     position: relative;
     padding: 10px 15px 20px 15px;
+    transition: background-color 0.3s, color 0.3s;
 }
 
 h1 {
     font-size: 1.5em;
 }
+
 h2 {
     font-size: 1.4em;
 }
+
 h3 {
     font-size: 1.3em;
 }
+
 h1, h2, h3:not(.impl):not(.method), h4:not(.method) {
-    color: black;
+    color: var(--clr-dark-main);
     font-weight: 500;
     margin: 20px 0 15px 0;
     padding-bottom: 6px;
 }
+
 h1.fqn {
     border-bottom: 1px dashed #D5D5D5;
     margin-top: 0;
 }
+
 h2, h3:not(.impl):not(.method), h4:not(.method) {
     border-bottom: 1px solid #DDDDDD;
 }
+
 h3.impl, h3.method, h4.method {
     font-weight: 600;
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
 h3.impl, h3.method {
     margin-top: 15px;
 }
+
 h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a, .collapse-toggle {
     font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -108,6 +138,7 @@ h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a, .col
 ol, ul {
     padding-left: 25px;
 }
+
 ul ul, ol ul, ul ol, ol ol {
     margin-bottom: 0;
 }
@@ -120,13 +151,15 @@ code, pre {
     font-family: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", Inconsolata, monospace;
     white-space: pre-wrap;
 }
+
 .docblock code {
-    background-color: #F5F5F5;
-    border-radius: 3px;
-    /*padding: 0 0.2em;*/
+    background-color: var(--clr-light-codebox);
+    border-radius: 4px;
+    transition: background-color 0.3s;
 }
+
 pre {
-    background-color: #F5F5F5;
+    background-color: var(--clr-light-codebox);
     padding: 14px;
 }
 
@@ -145,6 +178,8 @@ pre {
 nav.sub {
     font-size: 16px;
     text-transform: uppercase;
+    flex-flow: row nowrap;
+    display: flex;
 }
 
 .sidebar {
@@ -169,26 +204,27 @@ nav.sub {
     table-layout: auto;
     margin-bottom: 20px;
     font-family: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", Inconsolata, monospace;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .docblock th, .docblock td {
     padding: 10px;
     text-align: left;
-    border: 1px solid #ddd;
+    border: 1px solid var(--clr-light-table-border);
     white-space: nowrap;
 }
 
 .docblock th {
-    background-color: #f5f5f5;
+    background-color: var(--clr-light-table-header);
     font-weight: bold;
 }
 
 .docblock tr:nth-child(even) {
-    background-color: #f9f9f9;
+    background-color: var(--clr-light-table-nth);
 }
 
-.docblock table {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.docblock th, .docblock td, .docblock tr {
+    transition: background-color 0.3s;
 }
 
 /* Everything else */
@@ -215,6 +251,7 @@ nav.sub {
     padding: 0 10px;
     margin-bottom: 14px;
 }
+
 .block h2 {
     margin-top: 0;
     margin-bottom: 8px;
@@ -233,7 +270,7 @@ nav.sub {
 }
 
 .block a:hover {
-    background: #F5F5F5;
+    background: var(--clr-light-codebox);
 }
 
 .content {
@@ -261,7 +298,7 @@ nav.sub {
 .content .highlighted.mod { background-color: #afc6e4; }
 .content .highlighted.enum { background-color: #b4d1b9; }
 .content .highlighted.struct { background-color: #e7b1a0; }
-.content .highlighted.fn { background-color: #c6afb3; }
+.content .highlighted.fn { background-color: var(--clr-light-content-highlight); }
 
 .docblock.short.nowrap {
     display: block;
@@ -344,7 +381,6 @@ nav.main .separator {
     margin: 0 20px;
 }
 nav.sum { text-align: right; }
-nav.sub form { display: inline; }
 
 nav, .content {
     margin-left: 230px;
@@ -352,7 +388,7 @@ nav, .content {
 
 a {
     text-decoration: none;
-    color: #000;
+    color: var(--clr-dark-main);
     background: transparent;
 }
 p a { color: #4e8bca; }
@@ -362,11 +398,16 @@ p a:hover { text-decoration: underline; }
 .content a.mod, .block a.current.mod { color: #4d76ae; }
 .content a.enum, .block a.current.enum { color: #5e9766; }
 .content a.struct, .block a.current.struct { color: #e53700; }
-.content a.fn, .block a.current.fn { color: #8c6067; }
-.content .fnname { color: #8c6067; }
+.content a.fn, .block a.current.fn { color: var(--clr-light-current-selection); }
+.content .fnname { color: var(--clr-light-current-selection); }
+
+.search-form {
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+}
 
 .search-input {
-    width: 100%;
     /* Override Normalize.css: we have margins and do
      not want to overflow - the `moz` attribute is necessary
      until Firefox 29, too early to drop at this point */
@@ -383,6 +424,8 @@ p a:hover { text-decoration: underline; }
     transition: border-color 300ms ease;
     transition: border-radius 300ms ease-in-out;
     transition: box-shadow 300ms ease-in-out;
+    flex-grow: 1;
+    height: 35px;
 }
 
 .search-input:focus {
@@ -400,38 +443,11 @@ p a:hover { text-decoration: underline; }
     display: block;
 }
 
-#help {
-    background: #e9e9e9;
-    border-radius: 4px;
-    box-shadow: 0 0 6px rgba(0,0,0,.2);
-    position: absolute;
-    top: 300px;
-    left: 50%;
-    margin-top: -125px;
-    margin-left: -275px;
-    width: 550px;
-    height: 300px;
-    border: 1px solid #bfbfbf;
-}
-
-#help dt {
-    float: left;
-    border-radius: 3px;
-    border: 1px solid #bfbfbf;
-    background: #fff;
-    width: 23px;
+.toggle-container {
+    margin: auto;
     text-align: center;
-    clear: left;
-    display: block;
-    margin-top: -1px;
-}
-#help dd { margin: 5px 33px; }
-#help .infos { padding-left: 0; }
-#help h1 { margin-top: 0; }
-#help div {
-    width: 50%;
-    float: left;
-    padding: 20px;
+    height: 25px;
+    width: 35px;
 }
 
 .stability {
@@ -551,4 +567,87 @@ pre.rust { position: relative; }
 .toggle-label {
     color: #999;
     font-style: italic;
+}
+
+/* dark mode */
+
+.dark-mode body {
+    background-color: var(--clr-dark-main);
+    color: var(--clr-light-main);
+}
+
+.dark-mode h1 {
+    color: var(--clr-light-main);
+}
+
+.dark-mode h2 {
+    color: var(--clr-light-main);
+}
+
+.dark-mode h3 {
+    color: var(--clr-light-main);
+}
+
+.dark-mode h4 {
+    color: var(--clr-light-main);
+}
+
+.dark-mode .docblock code {
+    background-color: var(--clr-dark-codebox);
+}
+
+.dark-mode pre {
+    background-color: var(--clr-dark-codebox);
+}
+
+.dark-mode .docblock table {
+    background-color: var(--clr-dark-table);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.dark-mode .docblock th, .dark-mode .docblock td {
+    border: 1px solid var(--clr-dark-table-border);
+}
+
+.dark-mode .docblock th {
+    background-color: var(--clr-dark-table-header);
+}
+
+.dark-mode .docblock tr:nth-child(even) {
+    background-color: var(--clr-dark-table-nth);
+}
+
+.dark-mode .block a:hover {
+    background: var(--clr-dark-codebox);
+}
+
+.dark-mode .content .highlighted.fn { background-color: var(--clr-dark-content-highlight); }
+
+.dark-mode a {
+    color: var(--clr-light-main);
+}
+
+.dark-mode p a { color: #4e8bca; }
+
+.dark-mode .content a.fn, .dark-mode .block a.current.fn { color: var(--clr-dark-current-selection); }
+.dark-mode .content .fnname { color: var(--clr-dark-current-selection); }
+
+.dark-mode :target { background: var(--clr-dark-current-selection); }
+
+.sun-icon, .moon-icon {
+    width: 28px;
+    height: 28px;
+    transition: opacity 0.3s;
+}
+
+.moon-icon {
+    display: none;
+}
+
+.dark-mode .sun-icon {
+    display: none;
+}
+
+.dark-mode .moon-icon {
+    display: inline-block;
 }
\ No newline at end of file
diff --git a/docs/ElunaDoc/static/theme.js b/docs/ElunaDoc/static/theme.js
new file mode 100644
index 0000000000..7896e21933
--- /dev/null
+++ b/docs/ElunaDoc/static/theme.js
@@ -0,0 +1,18 @@
+const themeToggle = document.getElementById('themeToggle');
+
+// Check if user preference exists in local storage
+const currentTheme = localStorage.getItem('theme');
+if (currentTheme) {
+    document.documentElement.classList.add(currentTheme);
+}
+
+themeToggle.addEventListener('click', () => {
+    document.documentElement.classList.toggle('dark-mode');
+
+    // Store user preference in local storage
+    if (document.documentElement.classList.contains('dark-mode')) {
+        localStorage.setItem('theme', 'dark-mode');
+    } else {
+        localStorage.setItem('theme', '');
+    }
+});
\ No newline at end of file
diff --git a/docs/ElunaDoc/templates/_base.html b/docs/ElunaDoc/templates/_base.html
index 9de51df1ea..fb34e6c79f 100644
--- a/docs/ElunaDoc/templates/_base.html
+++ b/docs/ElunaDoc/templates/_base.html
@@ -11,16 +11,18 @@
     <link rel="stylesheet" type="text/css" href="{{ static('main.css') }}">
 
     <link rel="shortcut icon" href="{{ static('favicon.ico') }}">
-
+    
+    <script>
+    // Inline script to set theme before the rest of the document loads
+    (function() {
+        const currentTheme = localStorage.getItem('theme');
+        if (currentTheme) {
+            document.documentElement.classList.add(currentTheme);
+        }
+    })();
+    </script>
 </head>
 <body class="rustdoc">
-<!--[if lte IE 8]>
-    <div class="warning">
-        This old browser is unsupported and will most likely display funky
-        things.
-    </div>
-    <![endif]-->
-
 <section class="sidebar">
     <a href='{{ root('index.html') }}'><img src='{{ static('eluna-logo.png') }}' alt='Eluna Logo' width='100'></a>
     <div class="block">
@@ -35,11 +37,26 @@ <h2>All Classes</h2>
 
 <nav class="sub">
     <form class="search-form js-only">
-        <div class="search-container">
-            <input class="search-input" name="search"
-                   autocomplete="off"
-                   placeholder="Click or press 'S' to search, '?' for more options..."
-                   type="search">
+        <input class="search-input" name="search"
+               autocomplete="off"
+               placeholder="Click or press 'S' to search, '?' for more options..."
+               type="search">
+                   
+        <div class="toggle-container" id="themeToggle">
+            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
         </div>
     </form>
 </nav>
@@ -98,6 +115,7 @@ <h1>Search tricks</h1>
 </script>
 <script src="{{ static('jquery.js') }}"></script>
 <script src="{{ static('main.js') }}"></script>
+<script src="{{ static('theme.js') }}"></script>
 <script async src="{{ root('search-index.js') }}"></script>
 <center>Generated on <script src="{{ root('date.js') }}"></script></center>
 <center>&copy; 2010 - 2024 Eluna Lua Engine</center>