Permalink
Browse files

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 #13052

Differential Revision: D4748893

fbshipit-source-id: a81266c52b24f8e5dcedf0b9f37134688342d8d2
  • Loading branch information...
Yann Pringault authored and facebook-github-bot committed Mar 23, 2017
1 parent 971c2be commit 8a8f34ae10d8aaffb7b94ccef77a9f62d858b04a
Showing with 15 additions and 14 deletions.
  1. +15 −14 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>

0 comments on commit 8a8f34a

Please sign in to comment.