mirror of
https://github.com/beautifier/js-beautify.git
synced 2024-11-30 08:00:55 +00:00
Revert "Dark mode"
This commit is contained in:
parent
4132fe117e
commit
a187f22556
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
||||
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user