Skip to content

Commit 4132fe1

Browse files
bitwisemanbitwiseman
authoredJun 20, 2022
Merge pull request #2058 from ilancohen/feature-dark-mode
Dark mode
·
v1.15.4v1.14.4
2 parents d7db71f + 53ae8b6 commit 4132fe1

File tree

5 files changed

+114
-17
lines changed

5 files changed

+114
-17
lines changed
 

‎index.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939

4040
<!-- Codemirror from https://cdnjs.com/libraries/codemirror -->
4141
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" integrity="sha256-vZ3SaLOjnKO/gGvcUWegySoDU6ff33CS5i9ot8J9Czk=" crossorigin="anonymous" />
42+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/monokai.min.css" media="screen and (prefers-color-scheme: dark)" integrity="sha256-jAukb65gp2gG6t4FtxpHgB3eFwM/rDUwrE2OaAp6+o8=" crossorigin="anonymous" />
4243
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js" integrity="sha256-dPTL2a+npIonoK5i0Tyes0txCMUWZBf8cfKRfACRotc=" crossorigin="anonymous"></script>
4344

4445
<!-- Codemirror Modes -->
@@ -56,6 +57,7 @@
5657

5758
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js" integrity="sha256-oE03O+I6Pzff4fiMqwEGHbdfcW7a3GRRxlL+U49L5sA=" crossorigin="anonymous"></script>
5859
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha256-1fEPhSsRKlFKGfK3eO710tEweHh1fwokU5wFGDHO+vg=" crossorigin="anonymous"></script>
60+
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-vars-ponyfill/2.4.7/css-vars-ponyfill.min.js" integrity="sha512-Ys0nqkfLoBPEdNiZ1caXeUlN6HOMkBbLvTnzFGjMmc+vgi7c5rTjzs8iuwZawKwk7RaRljUpQ7qjGX5S7rVGKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
5961

6062
<script src="js/lib/unpackers/javascriptobfuscator_unpacker.js"></script>
6163
<script src="js/lib/unpackers/urlencode_unpacker.js"></script>
@@ -69,7 +71,11 @@
6971
<body class="container">
7072

7173
<div class="title">
72-
<h1 class="logo"><img alt="js-beautify" src="web/banner-light.svg" height="54px" /> <span id="version-number"></span></h1>
74+
<h1 class="logo">
75+
<img class="logo-light" alt="js-beautify" src="web/banner-light.svg" height="54px" />
76+
<img class="logo-dark" alt="js-beautify" src="web/banner-dark.svg" height="54px" />
77+
<span id="version-number"></span>
78+
</h1>
7379
<div class="sub-title">
7480
<p>
7581
<a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>

‎web/colors.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css";
2+
@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/monokai.min.css" screen and (prefers-color-scheme: dark);
3+
4+
body .logo-light {
5+
display: inline-block;
6+
}
7+
body .logo-dark {
8+
display: none;
9+
}
10+
11+
:root {
12+
--body-bg-color: #eee;
13+
--body-text-color: #333;
14+
--link-text-color: #0000ee;
15+
--link-seen-text-color: #551A8B;
16+
--self-link-text-color: #444;
17+
--link-border-color: #aaa;
18+
--codemirror-border-color: #ccc;
19+
--codemirror-background-color: #fff;
20+
--form-controls-bg-color: #fff;
21+
--form-controls-border-color: #ccc;
22+
--submit-button-bg-color: #7cffcb;
23+
--submit-button-bg-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
24+
--control-button-bg-color: #2e3138;
25+
--control-button-text-color: #fff;
26+
27+
--select-text-color: #000000;
28+
--select-border-color: #CCCCCCFF;
29+
--textarea-bg-color: #ffffff;
30+
--textarea-text-color: #000;
31+
}
32+
33+
@media (prefers-color-scheme: dark) {
34+
body.dark-mode .logo-light {
35+
display: none;
36+
}
37+
body.dark-mode .logo-dark {
38+
display: inline-block;
39+
}
40+
41+
:root {
42+
--body-bg-color: #121212;
43+
--body-text-color: #cccccc;
44+
--link-text-color: #FF006E;
45+
--link-seen-text-color: #FF7C52;
46+
--self-link-text-color: #c7c7c7;
47+
--link-border-color: rgba(171, 171, 171, 0);
48+
--codemirror-border-color: #333333;
49+
--codemirror-background-color: #000000;
50+
--form-controls-bg-color: #000000;
51+
--form-controls-border-color: #333333;
52+
--submit-button-bg-color: #2A8E9D;
53+
--submit-button-bg-image: linear-gradient(315deg, #2DB3B5 0%, #306A7D 74%);
54+
--control-button-bg-color: #a5b0c7;
55+
--control-button-text-color: #000000;
56+
57+
--select-text-color: #ffffff;
58+
--select-border-color: #333;
59+
60+
--textarea-bg-color: #191a16;
61+
--textarea-text-color: #fff;
62+
}
63+
}

‎web/common-function.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*jshint strict:false, node:false */
2-
/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent*/
2+
/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent, checkForDarkTheme*/
33
var the = {
44
use_codemirror: !window.location.href.match(/without-codemirror/),
55
beautifier_file: window.location.href.match(/debug/) ? 'beautifier' : './beautifier.min',
@@ -365,3 +365,13 @@ function changeToFileContent(input) {
365365
};
366366
}
367367
}
368+
369+
function checkForDarkTheme() {
370+
var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
371+
if (prefersDarkScheme.matches) {
372+
$('.CodeMirror').addClass('cm-s-monokai');
373+
$('body').addClass('dark-mode');
374+
} else {
375+
$('.CodeMirror').removeClass('cm-s-monokai');
376+
}
377+
}

‎web/common-style.css

+32-13
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
1+
@import "colors.css";
2+
13
body {
2-
background: #eee;
3-
color: #333;
4+
background: var(--body-bg-color);
5+
color: var(--body-text-color);
46
height: 95vh;
57
font: 13px/1.231 arial, sans-serif;
68
}
79

8-
a.self {
10+
a {
11+
color: var(--link-text-color);
12+
}
13+
14+
a:visited {
15+
color: var(--link-seen-text-color);
16+
}
17+
18+
a.self,
19+
a.self:visited {
920
font-weight: bold;
1021
text-decoration: none;
11-
color: #444;
12-
border-bottom: 1px solid #aaa
22+
color: var(--self-link-text-color);
23+
border-bottom: 1px solid var(--link-border-color)
24+
}
25+
26+
textarea {
27+
color: var(--textarea-text-color);
28+
background-color: var(--textarea-bg-color);
29+
border-color: var(--form-controls-border-color);
1330
}
1431

1532
h1.logo {
@@ -61,11 +78,11 @@ input[type="checkbox"], select, button {
6178
}
6279

6380
.CodeMirror {
64-
border: 1px solid #ccc;
81+
border: 1px solid var(--codemirror-border-color);
6582
height: 100%;
6683
font-size: 90%;
6784
margin-bottom: 6px;
68-
background: white;
85+
background: var(--codemirror-background-color);
6986
}
7087

7188
.hide {
@@ -96,8 +113,10 @@ input[type="checkbox"], select, button {
96113
}
97114

98115
select, .buttons-box button {
99-
background-color: white;
100-
border: 1px solid #ccc;
116+
background-color: var(--form-controls-bg-color);
117+
border: 1px solid var(--form-controls-border-color);
118+
color: var(--select-text-color);
119+
border-color: var(--select-border-color);
101120
border-radius: 4px;
102121
line-height: 1.5em;
103122
padding: 0.5em;
@@ -133,13 +152,13 @@ select {
133152
display: block;
134153
font-size: 1.5em;
135154
width: 100%;
136-
background-color: #7cffcb;
137-
background-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
155+
background-color: var(--submit-button-bg-color);
156+
background-image: var(--submit-button-bg-image);
138157
}
139158

140159
.buttons-box .control {
141-
background-color: #2e3138;
142-
color: white;
160+
background-color: var(--control-button-bg-color);
161+
color: var(--control-button-text-color);
143162
display: inline-flex;
144163
}
145164

‎web/onload.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
$(function() {
33

44
read_settings_from_cookie();
5+
checkForDarkTheme();
56

67
$.getJSON("./package.json", function(data) {
78
$('#version-number').text('(v' + data.version + ')');
@@ -52,6 +53,4 @@ $(function() {
5253
$('select').change(beautify);
5354
$(':checkbox').change(beautify);
5455
$('#additional-options').change(beautify);
55-
56-
5756
});

0 commit comments

Comments
 (0)
Please sign in to comment.