Permalink
Browse files

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
  • Loading branch information...
pvinis authored and facebook-github-bot committed Feb 2, 2017
1 parent ee737e7 commit 5e6f39aace7dba343e5481afb1c3b7c031153bcf
Showing with 14 additions and 0 deletions.
  1. +14 −0 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>

0 comments on commit 5e6f39a

Please sign in to comment.