Add dark mode theme for search bar

ElunaLuaEngine · Sep 26, 2024 · 2b85ea2 · 2b85ea2
1 parent 79482f5
commit 2b85ea2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/docs/ElunaDoc/static/main.css b/docs/ElunaDoc/static/main.css
@@ -65,6 +65,8 @@
 /* base color defines */
 :root {
     --clr-light-main: #fff;
+    --clr-light-searchbox-back: #fff;
+    --clr-light-searchbox-text: #555;
     --clr-light-codebox: #F5F5F5;
     --clr-light-current-selection: #8c6067;
     --clr-light-table-border: #ddd;
@@ -73,6 +75,8 @@
     --clr-light-content-highlight: #c6afb3;
 
     --clr-dark-main: #333;
+    --clr-dark-searchbox-back: #2f2f2f;
+    --clr-dark-searchbox-text: #fff;
     --clr-dark-codebox: #2f2f2f;
     --clr-dark-current-selection: #4d76ae;
     --clr-dark-table: #2f2f2f;
@@ -416,24 +420,25 @@ p a:hover { text-decoration: underline; }
     outline: none;
     border: none;
     border-radius: 1px;
-    color: #555;
+    color: var(--clr-light-searchbox-text);
+    background-color: var(--clr-light-searchbox-back);
     margin-top: 5px;
     padding: 10px 16px;
     font-size: 17px;
-    box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
+    box-shadow: 0 0 0 1px rgba(224, 224, 224, 1), 0 0 0 2px transparent;
     transition: border-color 300ms ease;
     transition: border-radius 300ms ease-in-out;
     transition: box-shadow 300ms ease-in-out;
+    transition: background-color 0.3s, color 0.3s;
     flex-grow: 1;
     height: 35px;
 }
 
 .search-input:focus {
-    border-color: #66afe9;
     border-radius: 2px;
     border: 0;
     outline: 0;
-    box-shadow: 0 0 8px #078dd8;
+    box-shadow: 0 0 0 1px rgba(224, 224, 224, 0.5), 0 0 8px 2px #078dd8;
 }
 
 .search-results .desc {
@@ -631,10 +636,19 @@ pre.rust { position: relative; }
 
 .dark-mode :target { background: var(--clr-dark-current-selection); }
 
+.dark-mode .search-input {
+    color: var(--clr-dark-searchbox-text);
+    background-color: var(--clr-dark-searchbox-back);
+}
+
 .sun-icon, .moon-icon {
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
     transition: opacity 0.3s;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
 }
 
 .moon-icon {

diff --git a/docs/ElunaDoc/templates/_base.html b/docs/ElunaDoc/templates/_base.html
@@ -38,13 +38,13 @@ <h2>All Classes</h2>
 <nav class="sub">
     <form class="search-form js-only">
         <input class="search-input" name="search"
-               autocomplete="off"
-               placeholder="Click or press 'S' to search, '?' for more options..."
-               type="search">
+            autocomplete="off"
+            placeholder="Click or press 'S' to search..."
+            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>
+            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg">
+                <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>
@@ -54,7 +54,7 @@ <h2>All Classes</h2>
                 <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">
+            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg">
                 <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
             </svg>
         </div>