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 https://github.com/facebook/react-native/pull/11878

Differential Revision: D4494415

Pulled By: mkonicek

fbshipit-source-id: 423473ec073e6ddd0d14322c22ee37abed1c55bc
This commit is contained in:
Pavlos Vinieratos 2017-02-02 04:42:32 -08:00 committed by Facebook Github Bot
parent ee737e7d1c
commit 5e6f39aace
1 changed files with 14 additions and 0 deletions

View File

@ -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 @@ connectToDebuggerProxy();
</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>