kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-06-18 22:05:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve dark mode for debugger

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

Differential Revision: D4748893

fbshipit-source-id: a81266c52b24f8e5dcedf0b9f37134688342d8d2
This commit is contained in:
Yann Pringault
2017-03-23 04:28:26 -07:00
committed by Facebook Github Bot
parent 971c2be070
commit 8a8f34ae10
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
local-cli/server/util/debugger.html
View File

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