From 0adabd1ba38c8ff6a3c8b64cb4e38a41c3a26296 Mon Sep 17 00:00:00 2001
From: rattatwinko <seppmutterman@gmail.com>
Date: Sat, 27 Sep 2025 22:51:39 +0200
Subject: [PATCH] dark mode. this works ok. not too good but yeah it does.

---
 PyPost.py            |   7 ++-
 css/main.css         |  86 +++++++++++++++++++++++++
 html/base/index.html | 145 +++++++++++++++++++++++++++++--------------
 js/shared/theme.js   |  11 ++++
 4 files changed, 200 insertions(+), 49 deletions(-)
 create mode 100644 js/shared/theme.js

diff --git a/PyPost.py b/PyPost.py
index 899b895..4ed3f03 100644
--- a/PyPost.py
+++ b/PyPost.py
@@ -32,7 +32,7 @@ if not RUST_PARSER_PATH.exists():
 markdown_parser = marko.Markdown(extensions=[GFM])
 
 # Threshold for switching to Rust parser (number of lines)
-RUST_PARSER_THRESHOLD = 500
+RUST_PARSER_THRESHOLD = 1000
 
 Logger = Logger()
 
@@ -136,6 +136,7 @@ def render_markdown(md_path: Path):
     <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
     <!-- remove if causing issues -->
     <script src="../js/post/lazyimg.js"></script>
+    <script src="../js/shared/theme.js"></script>
     <style>
         a {{ text-decoration: none; color: #0066cc; }}
     </style>
@@ -146,8 +147,8 @@ def render_markdown(md_path: Path):
             <img src="../css/icons/back.webp" width="32" height="32" alt="Back" style="display:block;" />
                 {title}  <noscript>(Enable JavaScript!)</noscript>
         </h1> 
-        <img src="../css/icons/written.webp" width="32" height="32" alt="write_img" loading="lazy" style="vertical-align: middle;padding-left:12px; padding-left:40px;" />
-        <div class="meta" style="display: inline;">Written @{time.asctime(time.localtime())}</div>
+        <img src="../css/icons/written.webp" width="32" height="32" alt="write_img" loading="lazy" style="vertical-align: middle;padding-left:12px; padding-left:40px;cursor:pointer;" onclick="toggleDarkMode();" />
+        <div class="meta" style="display: inline;cursor:pointer;" onclick="toggleDarkMode();">Written @{time.asctime(time.localtime())}</div>
         <hr style="margin:10px 0;" />
         <div class="html-content">
             <!-- Injected by Marko or fastmd -->
diff --git a/css/main.css b/css/main.css
index 75b6bcb..2c7c6d0 100644
--- a/css/main.css
+++ b/css/main.css
@@ -168,6 +168,92 @@
     background-position: center;
   }
 
+code[class*="language-"],
+pre[class*="language-"] {
+  text-shadow: none !important;
+  color: inherit; /* optional: respect your theme */
+}
+
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  background: none !important;
+  color: inherit; /* keep your color, or override further */
+}
+
+/* Dark mode */
+body.dark-mode {
+  background: #121212;
+  color: #e0e0e0;
+}
+
+body.dark-mode a { color: #80b3ff; }
+body.dark-mode a:hover { color: #a3c8ff; }
+
+body.dark-mode th, 
+body.dark-mode td {
+  border-color: #444;
+}
+body.dark-mode th {
+  background: #1e1e1e;
+}
+
+body.dark-mode code,
+body.dark-mode pre {
+  background: #1e1e1e;
+  color: #c8c8c8;
+}
+
+body.dark-mode blockquote {
+  border-left-color: #555;
+  color: #bbb;
+}
+
+body.dark-mode input,
+body.dark-mode select,
+body.dark-mode textarea,
+body.dark-mode button {
+  background: #1e1e1e;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+body.dark-mode button {
+  background: #2a2a2a;
+}
+body.dark-mode button:hover {
+  background: #333;
+}
+
+/* Alerts in dark mode */
+body.dark-mode .html-content .alert-note {
+  background: #1a2433;
+  color: #80b3ff;
+  border-color: #80b3ff;
+}
+body.dark-mode .html-content .alert-tip {
+  background: #13291b;
+  color: #6ede8a;
+  border-color: #6ede8a;
+}
+body.dark-mode .html-content .alert-important {
+  background: #241833;
+  color: #c29fff;
+  border-color: #c29fff;
+}
+body.dark-mode .html-content .alert-warning {
+  background: #2a200f;
+  color: #ffcc66;
+  border-color: #ffcc66;
+}
+body.dark-mode .html-content .alert-caution {
+  background: #2a1518;
+  color: #ff8080;
+  border-color: #ff8080;
+}
+
+
   /* INFO */
   .html-content .alert-note p:first-child::before {
     background-image: url("data:image/svg+xml;utf8,\
diff --git a/html/base/index.html b/html/base/index.html
index 937e745..76fc911 100644
--- a/html/base/index.html
+++ b/html/base/index.html
@@ -3,7 +3,72 @@
 <head>
   <title>Auto Index</title>
   <style>
-    hr {width: auto;}
+    body.dark-mode {
+      background-color: #1e1e1e;
+      color: #e0e0e0;
+    }
+    body.dark-mode h1 { color: #f0f0f0; }
+    body.dark-mode #nojs { color: #f0f0f0; }
+    body.dark-mode li { color: #e0e0e0; }
+    body.dark-mode button {
+      background-image: linear-gradient(#3a3a3a ,#2a2a2a);
+      color: #e0e0e0;
+      border-color: #555 #444 #333;
+      box-shadow: rgba(0,0,0,.6) 0 1px 0 inset;
+    }
+    body.dark-mode input#searchbox {
+      background-color: #2a2a2a;
+      color: #e0e0e0;
+      border: 1px solid #555;
+    }
+
+    body.darkmode #nojs {
+      color: #e0e0e0;
+    }
+
+    body { 
+        font-family: Arial, sans-serif; 
+        margin: 20px; 
+        background-color: #fff;
+        color: #0f1111;
+        /*transition: background-color 0.3s, color 0.3s; || enable this if you want a transition!*/
+    }
+
+    h1 { color: #333; transition: color 0.3s; }
+
+    hr { width: auto; }
+
+    li { 
+        list-style: none; 
+        background: url("../../css/icons/item.webp") no-repeat left center; 
+        background-size: 15px 20px; 
+        padding-left: 25px; 
+        transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); 
+        padding-bottom: 5px; 
+    }
+    li:hover { font-size: larger; }
+
+    #available { padding-left: 40px; margin-bottom: 0.1em; }
+    ul { padding-left: 100px; margin-top: 0.2em; }
+
+    #nojs { display: inline-block; color: black; transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1); }
+
+    #nonenormalul { 
+        list-style: disc inside; 
+        margin: 1em 0; 
+        padding-left: 40px; 
+        background: none; 
+    }
+    #nonenormalul li { 
+        list-style: inherit; 
+        margin: 0; 
+        padding: 0; 
+        background: none; 
+        transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); 
+    }
+    #nonenormalul li:hover { font-size: larger; }
+
+    /* BUTTON STYLES */
     button {
       margin-right: 5px;
       background-image: linear-gradient(#f7f8fa ,#e7e9ec);
@@ -16,10 +81,9 @@
       color: #0f1111;
       cursor: pointer;
       display: inline-block;
-      font-family: "Amazon Ember",Arial,sans-serif;
-      font-size: 14px;
-      height: 29px;
+      font-family: "Amazon Ember", Arial, sans-serif;
       font-size: 13px;
+      height: 29px;
       outline: 0;
       overflow: hidden;
       padding: 0 11px;
@@ -30,47 +94,33 @@
       -webkit-user-select: none;
       touch-action: manipulation;
       white-space: nowrap;
+      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     }
+    button:active { border-bottom-color: #a2a6ac; }
+    button:active:hover { border-bottom-color: #a2a6ac; }
+    button:hover { border-color: #a2a6ac #979aa1 #82858a; }
+    button:focus { border-color: #e77600; box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px; outline: 0; }
+    button:disabled, button[disabled]{ color: gray; border-color: gray; }
 
-    button:active {
-      border-bottom-color: #a2a6ac;
+    /* DARK MODE */
+    body.dark-mode {
+        background-color: #1e1e1e;
+        color: #e0e0e0;
     }
-
-    button:active:hover {
-      border-bottom-color: #a2a6ac;
+    body.dark-mode h1 { color: #f0f0f0; }
+    body.dark-mode #nojs { color: #fff; }
+    body.dark-mode li { background: url("../../css/icons/item.webp") no-repeat left left; }
+    body.dark-mode button {
+        background-image: linear-gradient(#3a3a3a ,#2a2a2a);
+        color: #e0e0e0;
+        border-color: #555 #444 #333;
+        box-shadow: rgba(0,0,0,.6) 0 1px 0 inset;
     }
-
-    button:hover {
-      border-color: #a2a6ac #979aa1 #82858a;
-    }
-
-    button:focus {
-      border-color: #e77600;
-      box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
-      outline: 0;
-    }
-
-    button:disabled,
-    button[disabled]{
-      color: gray;
-      border-color: gray;
-    }
-    body { font-family: Arial, sans-serif; margin: 20px; }
-    h1 { color: #333; }
-    li { list-style: none; background: url("../../css/icons/item.webp") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); padding-bottom: 5px; }
-    li:hover { font-size: larger; }
-    #available { padding-left: 40px; margin-bottom: 0.1em;}
-    ul { padding-left: 100px; margin-top: 0.2em;}
-    #nojs { display: inline-block;color: red;transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1); }
-    /*#nojs:hover { transform: skewX(-12deg);}*/
-    #nonenormalul { list-style: disc inside; margin: 1em 0; padding-left: 40px; background: none; }
-    #nonenormalul li { list-style: inherit; margin: 0; padding: 0; background: none; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
-    #nonenormalul li:hover { font-size: larger; }
   </style>
-    <script>
-        console.log("javascript is enabled! good!")
-        document.write('<h1 id="nojs" style="color:black; display: flex; align-items: center;"><img src="../../css/icons/folder.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
-    </script>
+  <script>
+    console.log("javascript is enabled! good!");
+    document.write('<h1 id="nojs" style="display: flex; align-items: center;"><img src="../../css/icons/folder.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
+  </script>
   <link rel="icon" type="image/x-icon" href="../../css/favicon/favicon.ico">
 </head>
 <body>
@@ -80,7 +130,7 @@
           <h1 id="nojs" style="margin: 0;">Please enable Javascript!</h1>
         </div>
         <p>
-           <i><strong> If you might be wondering, what does the Script do?</strong></i><br/>
+           <i><strong>If you might be wondering, what does the Script do?</strong></i><br/>
              <ul id="nonenormalul">
               <li>It strips the .HTML ending from each file you see in the list below</li>
               <li>It isnt necessary, but visually tweaks the page.</li>
@@ -91,14 +141,17 @@
         </p>
     </noscript>
   <p id="available">
-    <img src="../../css/icons/available.webp" width="40" height="40" style="vertical-align: middle; display: inline; /*margin-right: 8px;*/ padding-right: 5px;" />
+    <img src="../../css/icons/available.webp" width="40" height="40" style="vertical-align: middle; display: inline; padding-right: 5px;" />
     Available pages:
   </p>
+
   <!-- CONTENT -->
 
-<!-- load scripts needed for indexer -->
-<script src="../../js/normal.js"></script>
-<script src="../../js/search.js" defer></script>
-<script src="../../js/ulorder.js" defer></script>
+  <!-- load scripts needed for indexer -->
+  <script src="../../js/normal.js"></script>
+  <script src="../../js/shared/theme.js"></script>
+  <script src="../../js/search.js" defer></script>
+  <script src="../../js/ulorder.js" defer></script>
 </body>
 </html>
+
diff --git a/js/shared/theme.js b/js/shared/theme.js
new file mode 100644
index 0000000..4d08760
--- /dev/null
+++ b/js/shared/theme.js
@@ -0,0 +1,11 @@
+function toggleDarkMode() {
+    document.body.classList.toggle("dark-mode");
+    localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode"));
+}
+
+// Apply stored preference when the page loads
+document.addEventListener("DOMContentLoaded", () => {
+    if (localStorage.getItem("dark-mode") === "true") {
+        document.body.classList.add("dark-mode");
+    }
+});