Improve dark mode for debugger

Summary: * Added a label so we can click on the text to toggle the dark mode * Added `height: 100%` in the CSS to make the dark background fill the entire view * Improving JS code with `classList.toggle()` instead of redundant `if else` and fragile `document.styleSheets` access * Adjusted the link color in dark mode to be less flashy ![image](https://cloud.githubusercontent.com/assets/5436545/24155304/bb80bb9a-0e53-11e7-9298-ce2c1ec6672c.png) ![image](https://cloud.githubusercontent.com/assets/5436545/24155311/c27e85f8-0e53-11e7-87ae-0245f54870c5.png) Closes facebook#13052 Differential Revision: D4748893 fbshipit-source-id: a81266c52b24f8e5dcedf0b9f37134688342d8d2
thotegowda · May 7, 2017 · 54862ac · 54862ac
1 parent 9b04a78
commit 54862ac
Showing 1 changed file with 15 additions and 14 deletions.
diff --git a/local-cli/server/util/debugger.html b/local-cli/server/util/debugger.html
@@ -15,19 +15,6 @@
 <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 <title>React Native Debugger</title>
 <script>
-function toggleDark() {
-  const shortcutRule = document.styleSheets[0]['cssRules'][1]
-  const contentRule = document.styleSheets[0]['cssRules'][2]
-  if (document.getElementById("dark").checked) {
-    shortcutRule.style.color = '#777'
-    contentRule.style.color = '#666'
-    contentRule.style.backgroundColor = '#242424'
-  } else {
-    shortcutRule.style.color = '#eee'
-    contentRule.style.color = ''
-    contentRule.style.backgroundColor = ''
-  }
-}
 /* eslint-env browser */
 (function() {
 
@@ -160,10 +147,12 @@
 })();
 </script>
 <style type="text/css">
+  html,
   body {
     font-family: Helvetica, Verdana, sans-serif;
     font-size: large;
     font-weight: 200;
+    height: 100%;
     margin: 0;
     padding: 0;
   }
@@ -179,11 +168,23 @@
   .content {
     padding: 10px;
   }
+  body.dark {
+    background-color: #242424;
+    color: #666;
+  }
+  .dark .shortcut {
+    color: #777;
+  }
+  .dark a {
+    color: #3b99fc;
+  }
 </style>
 </head>
 <body>
   <div class="content">
-    <input type="checkbox" id="dark" onclick="toggleDark()"> Dark background
+    <label for="dark">
+      <input type="checkbox" id="dark" onclick="document.body.classList.toggle('dark')"> Dark background
+    </label>
     <p>
       React Native JS code runs inside this Chrome tab.
     </p>