Revert "Dark mode"

This commit is contained in:
Liam Newman 2022-06-20 11:29:02 -07:00 committed by GitHub
parent 4132fe117e
commit a187f22556
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 114 deletions

View File

@ -39,7 +39,6 @@
<!-- 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 -->
@ -57,7 +56,6 @@
<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>
@ -71,11 +69,7 @@
<body class="container">
<div class="title">
<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>
<h1 class="logo"><img alt="js-beautify" src="web/banner-light.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>

View File

@ -1,63 +0,0 @@
@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;
}
}

View File

@ -1,5 +1,5 @@
/*jshint strict:false, node:false */
/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent, checkForDarkTheme*/
/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent*/
var the = {
use_codemirror: !window.location.href.match(/without-codemirror/),
beautifier_file: window.location.href.match(/debug/) ? 'beautifier' : './beautifier.min',
@ -365,13 +365,3 @@ 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');
}
}

View File

@ -1,32 +1,15 @@
@import "colors.css";
body {
background: var(--body-bg-color);
color: var(--body-text-color);
background: #eee;
color: #333;
height: 95vh;
font: 13px/1.231 arial, sans-serif;
}
a {
color: var(--link-text-color);
}
a:visited {
color: var(--link-seen-text-color);
}
a.self,
a.self:visited {
a.self {
font-weight: bold;
text-decoration: none;
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);
color: #444;
border-bottom: 1px solid #aaa
}
h1.logo {
@ -78,11 +61,11 @@ input[type="checkbox"], select, button {
}
.CodeMirror {
border: 1px solid var(--codemirror-border-color);
border: 1px solid #ccc;
height: 100%;
font-size: 90%;
margin-bottom: 6px;
background: var(--codemirror-background-color);
background: white;
}
.hide {
@ -113,10 +96,8 @@ input[type="checkbox"], select, button {
}
select, .buttons-box button {
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);
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 1.5em;
padding: 0.5em;
@ -152,13 +133,13 @@ select {
display: block;
font-size: 1.5em;
width: 100%;
background-color: var(--submit-button-bg-color);
background-image: var(--submit-button-bg-image);
background-color: #7cffcb;
background-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
}
.buttons-box .control {
background-color: var(--control-button-bg-color);
color: var(--control-button-text-color);
background-color: #2e3138;
color: white;
display: inline-flex;
}

View File

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