wither theme (#125)

Author: bobjoerules

index.html

@@ -127,38 +127,49 @@ <h3>Steps</h3>
             </div>
         </div>
         <div class="footer">
-          <div class="dark-mode-toggle-container">
-                <form id="theme-switcher-form">
-        <div>
-          <input
-            type="radio"
-            id="light-theme"
-            name="theme-choice"
-            value="light-theme"
-            selected="selected"
-          />
-        <label for="light-theme"></label>
-        </div>
+            <div class="dark-mode-toggle-container">
+            <form id="theme-switcher-form">
+                <div>
+                <input
+                    type="radio"
+                    id="light-theme"
+                    name="theme-choice"
+                    value="light-theme"
+                    selected="selected"
+                />
+                <label for="light-theme"></label>
+                </div>
 
-        <div>
-          <input
-            type="radio"
-            id="dark-theme"
-            name="theme-choice"
-            value="dark-theme"
-          />
-          <label for="dark-theme"></label>
-        </div>
-        <div>
-          <input
-            type="radio"
-            id="crimson-theme"
-            name="theme-choice"
-            value="crimson-theme"
-          />
-          <label for="crimson-theme"></label>
-        </div>
-      </form>
+                <div>
+                <input
+                    type="radio"
+                    id="dark-theme"
+                    name="theme-choice"
+                    value="dark-theme"
+                />
+                <label for="dark-theme"></label>
+                </div>
+
+                <div>
+                <input
+                    type="radio"
+                    id="wither-theme"
+                    name="theme-choice"
+                    value="wither-theme"
+                />
+                <label for="wither-theme"></label>
+                </div>
+
+                <div>
+                <input
+                    type="radio"
+                    id="crimson-theme"
+                    name="theme-choice"
+                    value="crimson-theme"
+                />
+                <label for="crimson-theme"></label>
+                </div>
+            </form>
             </div>
             <p>Built by Cal Henderson. <a href="https://github.com/iamcal/enchant-order">Source on Github</a></p>
         </div>

style.css

@@ -13,6 +13,9 @@ body {
   background-color: #353535;
 }
 #theme-switcher-form div:nth-child(3) label {
+  background-color: #111111;
+}
+#theme-switcher-form div:nth-child(4) label {
   background-color: #813151;
 }
 /* Remember these for every theme ;) */
@@ -77,6 +80,26 @@ html[data-theme="crimson"] {
   --solution: var(--enchantment-results);
 }
 
+html[data-theme="wither"] {
+  --bg-primary: #111111;
+  --bg-secondary: #222222;
+  --fg-primary: white;
+  --fg-secondary: #eee;
+  --link-primary: #66b3ff;
+  --link-hover: #4d8ac3;
+  --table-text: #DDD;
+  --table-group1: #222222;
+  --table-group2: #333333;
+  --echlevel-color: var(--table-text);
+  --echlevel-bg: var(--table-group1);
+  --echlevel-shadow: var(--table-group2);
+  --enchantment-results: #006666;
+  --progress-color: #f1a32f;
+  --error: #f90601;
+  --phone-warn: #e7cc03;
+  --solution: var(--enchantment-results);
+}
+
 /* TODO: fix enchantment results variable name, misnomer */
 
 .selectItem:focus, .selectLanguage:focus {
@@ -296,7 +319,7 @@ a:hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 90px; /* Adjust the width as needed */
+  width: 120px; /* Adjust the width as needed */
   margin: auto; /* Center form */
 }