allow for dark background in the debugger view

Summary: I prefer a darker environment when coding, and having the Chrome window be dark except the part that I cannot hide, is making my eyes hurt. This is for the people that prefer the darker color scheme when developing. Closes #11878 Differential Revision: D4494415 Pulled By: mkonicek fbshipit-source-id: 423473ec073e6ddd0d14322c22ee37abed1c55bc
facebook · Feb 2, 2017 · 5e6f39a · 5e6f39a
1 parent ee737e7
commit 5e6f39a
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/local-cli/server/util/debugger.html b/local-cli/server/util/debugger.html
@@ -15,6 +15,19 @@
 <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() {
 
@@ -170,6 +183,7 @@
 </head>
 <body>
   <div class="content">
+    <input type="checkbox" id="dark" onclick="toggleDark()"> Dark background
     <p>
       React Native JS code runs inside this Chrome tab.
     </p>