Add theme switcher

docs/index.html

@@ -22,7 +22,7 @@
     <p>
       Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
     </p>
-    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
+    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
 
     <h2>Is it responsive?</h2>
     <p>
@@ -32,6 +32,7 @@
     <p>
       In fact, try resizing this page. Everything flows super nicely as you'll see.
     </p>
+    <button id='switch'>Switch theme</button>
 
     <h2>More elements</h2>
     <p>
@@ -59,6 +60,8 @@
       <input type='submit'>
     </form>
     <input disabled placeholder='This is disabled'>
-    <input readonly placeholder='This is readonly'>
+    <input readonly value='This is readonly'>
+
+    <script src='script.js'></script>
   </body>
 </html>

docs/script.js

@@ -0,0 +1,11 @@
+document.getElementById('switch').addEventListener('click', () => {
+  const { body } = document
+  const ph = document.getElementById('ph')
+  if (body.className) {
+    body.className = ''
+    ph.src = ph.src.replace('theme=light', 'theme=dark')
+  } else {
+    body.className = 'light'
+    ph.src = ph.src.replace('theme=dark', 'theme=light')
+  }
+})

water.css

@@ -64,12 +64,9 @@ input[type='checkbox']:active, input[type='submit']:active, input[type='button']
   transform: translateY(2px);
 }
 
-input:read-only, input:disabled {
-  cursor: not-allowed;
-}
-
 input:disabled {
   opacity: 0.5;
+  cursor: not-allowed;
 }
 
 body.light {