diff --git a/css/theme.css b/css/theme.css
index bb89f288..8a4f0fa5 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -19,7 +19,7 @@
   box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
 }
 
-.theme-input[type="color"] {
+.theme-input {
   opacity: 0;
   width: 2px;
   min-width: 2px;
@@ -28,3 +28,10 @@
   top: 0;
   left: 0;
 }
+
+.theme-input:focus+.theme-label {
+  background-color: var(--gray-03);
+  border-bottom-color: rgb(var(--accent));
+  color: var(--white);
+  outline: 0;
+}
diff --git a/index.html b/index.html
index 0fe50fee..0717e95e 100644
--- a/index.html
+++ b/index.html
@@ -60,10 +60,10 @@
         </div>
         <div class="head-item mb-3 mb-xl-0">
           <form class="theme">
+            <input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
             <label class="button mb-0 theme-label" for="accent-picker">
               <span class="button-text">Accent</span>
             </label>
-            <input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
           </form>
         </div>
       </div>
@@ -86,6 +86,7 @@
 <script src="js/state.js"></script>
 <script src="js/data.js"></script>
 <script src="js/links.js"></script>
+<script src="js/version.js"></script>
 <script src="js/init.js"></script>
 
 </html>