Merge pull request #2058 from ilancohen/feature-dark-mode

Dark mode
beautifier · Jun 20, 2022 · 4132fe1 · 4132fe1
2 parents d7db71f + 53ae8b6
commit 4132fe1
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -39,6 +39,7 @@
 
   <!-- Codemirror from https://cdnjs.com/libraries/codemirror -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" integrity="sha256-vZ3SaLOjnKO/gGvcUWegySoDU6ff33CS5i9ot8J9Czk=" crossorigin="anonymous" />
+  <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" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js" integrity="sha256-dPTL2a+npIonoK5i0Tyes0txCMUWZBf8cfKRfACRotc=" crossorigin="anonymous"></script>
 
   <!-- Codemirror Modes -->
@@ -56,6 +57,7 @@
 
   <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>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha256-1fEPhSsRKlFKGfK3eO710tEweHh1fwokU5wFGDHO+vg=" crossorigin="anonymous"></script>
+  <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>
 
   <script src="js/lib/unpackers/javascriptobfuscator_unpacker.js"></script>
   <script src="js/lib/unpackers/urlencode_unpacker.js"></script>
@@ -69,7 +71,11 @@
 <body class="container">
 
   <div class="title">
-    <h1 class="logo"><img alt="js-beautify" src="web/banner-light.svg" height="54px" /> <span id="version-number"></span></h1>
+    <h1 class="logo">
+      <img class="logo-light" alt="js-beautify" src="web/banner-light.svg" height="54px" />
+      <img class="logo-dark" alt="js-beautify" src="web/banner-dark.svg" height="54px" />
+      <span id="version-number"></span>
+    </h1>
     <div class="sub-title">
       <p>
         <a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>

diff --git a/web/colors.css b/web/colors.css
@@ -0,0 +1,63 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/monokai.min.css" screen and (prefers-color-scheme: dark);
+
+body .logo-light {
+    display: inline-block;
+}
+body .logo-dark {
+    display: none;
+}
+
+:root {
+    --body-bg-color: #eee;
+    --body-text-color: #333;
+    --link-text-color: #0000ee;
+    --link-seen-text-color: #551A8B;
+    --self-link-text-color: #444;
+    --link-border-color: #aaa;
+    --codemirror-border-color: #ccc;
+    --codemirror-background-color: #fff;
+    --form-controls-bg-color: #fff;
+    --form-controls-border-color: #ccc;
+    --submit-button-bg-color: #7cffcb;
+    --submit-button-bg-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
+    --control-button-bg-color: #2e3138;
+    --control-button-text-color: #fff;
+
+    --select-text-color: #000000;
+    --select-border-color: #CCCCCCFF;
+    --textarea-bg-color: #ffffff;
+    --textarea-text-color: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+    body.dark-mode .logo-light {
+        display: none;
+    }
+    body.dark-mode .logo-dark {
+        display: inline-block;
+    }
+
+    :root {
+        --body-bg-color: #121212;
+        --body-text-color: #cccccc;
+        --link-text-color: #FF006E;
+        --link-seen-text-color: #FF7C52;
+        --self-link-text-color: #c7c7c7;
+        --link-border-color: rgba(171, 171, 171, 0);
+        --codemirror-border-color: #333333;
+        --codemirror-background-color: #000000;
+        --form-controls-bg-color: #000000;
+        --form-controls-border-color: #333333;
+        --submit-button-bg-color: #2A8E9D;
+        --submit-button-bg-image: linear-gradient(315deg, #2DB3B5 0%, #306A7D 74%);
+        --control-button-bg-color: #a5b0c7;
+        --control-button-text-color: #000000;
+
+        --select-text-color: #ffffff;
+        --select-border-color: #333;
+
+        --textarea-bg-color: #191a16;
+        --textarea-text-color: #fff;
+    }
+}
diff --git a/web/common-function.js b/web/common-function.js
@@ -1,5 +1,5 @@
 /*jshint strict:false, node:false */
-/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent*/
+/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent, checkForDarkTheme*/
 var the = {
   use_codemirror: !window.location.href.match(/without-codemirror/),
   beautifier_file: window.location.href.match(/debug/) ? 'beautifier' : './beautifier.min',
@@ -365,3 +365,13 @@ function changeToFileContent(input) {
     };
   }
 }
+
+function checkForDarkTheme() {
+  var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+  if (prefersDarkScheme.matches) {
+    $('.CodeMirror').addClass('cm-s-monokai');
+    $('body').addClass('dark-mode');
+  } else {
+    $('.CodeMirror').removeClass('cm-s-monokai');
+  }
+}
diff --git a/web/common-style.css b/web/common-style.css
@@ -1,15 +1,32 @@
+@import "colors.css";
+
 body {
-  background: #eee;
-  color: #333;
+  background: var(--body-bg-color);
+  color: var(--body-text-color);
   height: 95vh;
   font: 13px/1.231 arial, sans-serif;
 }
 
-a.self {
+a {
+  color: var(--link-text-color);
+}
+
+a:visited {
+  color: var(--link-seen-text-color);
+}
+
+a.self,
+a.self:visited {
   font-weight: bold;
   text-decoration: none;
-  color: #444;
-  border-bottom: 1px solid #aaa
+  color: var(--self-link-text-color);
+  border-bottom: 1px solid var(--link-border-color)
+}
+
+textarea {
+  color: var(--textarea-text-color);
+  background-color: var(--textarea-bg-color);
+  border-color: var(--form-controls-border-color);
 }
 
 h1.logo {
@@ -61,11 +78,11 @@ input[type="checkbox"], select, button {
 }
 
 .CodeMirror {
-  border: 1px solid #ccc;
+  border: 1px solid var(--codemirror-border-color);
   height: 100%;
   font-size: 90%;
   margin-bottom: 6px;
-  background: white;
+  background: var(--codemirror-background-color);
 }
 
 .hide {
@@ -96,8 +113,10 @@ input[type="checkbox"], select, button {
 }
 
 select, .buttons-box button {
-  background-color: white;
-  border: 1px solid #ccc;
+  background-color: var(--form-controls-bg-color);
+  border: 1px solid var(--form-controls-border-color);
+  color: var(--select-text-color);
+  border-color: var(--select-border-color);
   border-radius: 4px;
   line-height: 1.5em;
   padding: 0.5em;
@@ -133,13 +152,13 @@ select {
   display: block;
   font-size: 1.5em;
   width: 100%;
-  background-color: #7cffcb;
-  background-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
+  background-color: var(--submit-button-bg-color);
+  background-image: var(--submit-button-bg-image);
 }
 
 .buttons-box .control {
-  background-color: #2e3138;
-  color: white;
+  background-color: var(--control-button-bg-color);
+  color: var(--control-button-text-color);
   display: inline-flex;
 }
 

diff --git a/web/onload.js b/web/onload.js
@@ -2,6 +2,7 @@
 $(function() {
 
   read_settings_from_cookie();
+  checkForDarkTheme();
 
   $.getJSON("./package.json", function(data) {
     $('#version-number').text('(v' + data.version + ')');
@@ -52,6 +53,4 @@ $(function() {
   $('select').change(beautify);
   $(':checkbox').change(beautify);
   $('#additional-options').change(beautify);
-
-
 });