Skip to content

Commit

Permalink
working dark theme, persistent across sessions
Browse files Browse the repository at this point in the history
  • Loading branch information
atoponce committed Mar 20, 2018
1 parent d9d1530 commit c794134
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,16 @@
/* body tags */
body { margin: 0; }
select {
/* get consistency across all browsers */
-moz-appearance: none;
-moz-border-radius: 2px;
-webkit-appearance: none;
/*background-image: -webkit-gradient(
linear, left bottom, left top,
color-stop(0.16, rgb(207,207,207)), color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
center bottom, rgb(207,207,207) 16%, rgb(252,252,252) 79%
);*/
background-color: #dddddd;
border:1px solid black;
border-radius: 2px;
color: black;
cursor: pointer;
font-size: 12px;
height: 25px;
padding: 3px 22px 3px 6px;
width: 120px;
}
Expand Down Expand Up @@ -67,7 +60,14 @@ button:hover {

/* classes */
.clear { clear: both; }
.contrast {
.dark_contrast {
text-shadow:
-1px -1px 0 #bbb, 0px -1px 0 #bbb,
1px -1px 0 #bbb, -1px 0px 0 #bbb,
-1px 1px 0 #bbb, 0px 1px 0 #bbb,
1px 1px 0 #bbb, 1px 0px #bbb;
}
.light_contrast {
text-shadow:
-1px -1px 0 #444, 0px -1px 0 #444,
1px -1px 0 #444, -1px 0px 0 #444,
Expand Down
8 changes: 5 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<link integrity="sha256-S1Xk3rxtOaD/MXMZqWLlIzl3mmz1ahQDZ75U2ldkvdo=" crossorigin="anonymous" rel="stylesheet" href="assets/style.2c2dcf0fed7d8edba17206a66156420e07f80fa621ce35301bfaa400.css">
<link integrity="sha256-GHhcJoCyGl6XLAqBdemCCsYbBMNBFDG21zmtZASORNE=" crossorigin="anonymous" rel="stylesheet" href="assets/style.8bf288850a548162584c23d6f21827169ff51e7eebd05e75e655a666.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Passphrase and Password Generator</title>
Expand All @@ -17,7 +17,7 @@ <h1>Passphrase and Password Generator</h1>
<li><a href="index.html">Generate Passwords</a></li>
<li><a href="what.html">What is entropy?</a></li>
<li><a href="test.html">Entropy Testing Meter</a></li>
<li><a href="#" onclick="swap_stylesheet()" id="theme_switcher">Dark Theme</a></li>
<li><a href="#" onclick="swap_stylesheet(); generate_colors()" id="theme_switcher">Dark Theme</a></li>
</ul>
<p>Select minimum entropy: </p>
<div id="entropy-toolbar">
Expand Down Expand Up @@ -187,7 +187,7 @@ <h1>Passphrase and Password Generator</h1>
</div>

<!-- core functions -->
<script integrity="sha256-7f0w188cgzVmMwoqQrCizzEw7wNklE0wQAly72LV/MU=" crossorigin="anonymous" src="js/main.d8eddced37bac462f18a5cea384a64b162a001cdda15a438f26ab687.js"></script>
<script integrity="sha256-XyNrd18MAdmINYzuOQiVaOjIz6msY2IGYEhBUCNoE4s=" crossorigin="anonymous" src="js/main.4a245bc74dbf3ef97dad6e4efdaa203f9a130a1a1cad11b36b05432b.js"></script>

<!--
Because the word lists are static, and not changing, the filename is given a SHA-224 digest of its content. The web server can then be
Expand Down Expand Up @@ -281,3 +281,5 @@ <h1>Passphrase and Password Generator</h1>
</script>
</body>
</html>


Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,26 @@ String.prototype.rtrim = function() { return this.replace(/\s+$/g,""); }
function set_light_theme() {
var css = document.styleSheets[0];
var theme_switcher = document.getElementById("theme_switcher");
var cells = document.getElementsByClassName("cell");
theme_switcher.innerText = "Dark Theme";
for(var i=0; i<3; i++) { css.deleteRule(0); }
for(var i=0; i<4; i++) { css.deleteRule(0); }
for(var i=0; i<cells.length; i++) {
cells[i].style.borderColor = "#000";
}
}

function set_dark_theme() {
var css = document.styleSheets[0];
var theme_switcher = document.getElementById("theme_switcher");
var cells = document.getElementsByClassName("cell");
theme_switcher.innerText = "Light Theme";
css.insertRule("a {color: yellow;}");
css.insertRule("a:visited {color: orange;}");
css.insertRule("body {color: white; background-color: black;}");
css.insertRule("img {filter: invert(1);}");
for(var i=0; i<cells.length; i++) {
cells[i].style.borderColor = "#fff";
}
}

function swap_stylesheet() {
Expand Down Expand Up @@ -186,6 +195,15 @@ function generate_alternate(selection) {
pass_entropy.innerHTML = "~" + Math.floor(len * Math.log2(wordlist.length)) + "-bits.";
}

function is_too_dark(hex) {
var rgb = parseInt(hex, 16);
var r = (rgb >> 16) &0xff;
var g = (rgb >> 8) &0xff;
var b = (rgb >> 0) &0xff;
var l = (0.299*r) + (0.587*g) + (0.114*b);
if (l>79) {return false;} return true;
}

function is_too_light(hex) {
var rgb = parseInt(hex, 16);
var r = (rgb >> 16) &0xff;
Expand All @@ -204,15 +222,25 @@ function generate_colors() {
var pass_length = document.getElementById('alt-length');
var pass_entropy = document.getElementById('alt-entropy');
var pass = generate_pass(len, color_keys, true).split(" ");

var chosen_theme = localStorage.theme;

for (var i=0; i<len; i++) {
var hex = alternate_colors[pass[i]];
if (is_too_light(hex)) {
tmp += "<span class='bold contrast' style='color:#" + hex + ";'>" + pass[i] + "</span> ";
if(chosen_theme == undefined) {
if (is_too_light(hex)) {
tmp += "<span class='bold light_contrast' style='color:#" + hex + ";'>" + pass[i] + "</span> ";
}
else {
tmp += "<span class='bold' style='color:#" + hex + ";'>" + pass[i] + "</span> ";
}
}
else {
tmp += "<span class='bold' style='color:#" + hex + ";'>" + pass[i] + "</span> ";
else if(chosen_theme == "dark") {
if (is_too_dark(hex)) {
tmp += "<span class='bold dark_contrast' style='color:#" + hex + ";'>" + pass[i] + "</span> ";
}
else {
tmp += "<span class='bold' style='color:#" + hex + ";'>" + pass[i] + "</span> ";
}
}
}

Expand Down
3 changes: 1 addition & 2 deletions test.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<link integrity="sha256-S1Xk3rxtOaD/MXMZqWLlIzl3mmz1ahQDZ75U2ldkvdo=" crossorigin="anonymous" rel="stylesheet" href="assets/style.2c2dcf0fed7d8edba17206a66156420e07f80fa621ce35301bfaa400.css">
<link integrity="sha256-GHhcJoCyGl6XLAqBdemCCsYbBMNBFDG21zmtZASORNE=" crossorigin="anonymous" rel="stylesheet" href="assets/style.8bf288850a548162584c23d6f21827169ff51e7eebd05e75e655a666.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Password Entropy</title>
Expand Down Expand Up @@ -67,7 +67,6 @@ <h1>Passphrase and Password Generator</h1>
<li><a href="index.html">Generate Passwords</a></li>
<li><a href="what.html">What is entropy?</a></li>
<li><a href="test.html">Entropy Testing Meter</a></li>
<li><a href="#" onclick="swap_stylesheet()" id="theme_switcher">Dark Theme</a></li>
</ul>
</div>
<div class="align-center">
Expand Down
3 changes: 1 addition & 2 deletions what.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<link integrity="sha256-S1Xk3rxtOaD/MXMZqWLlIzl3mmz1ahQDZ75U2ldkvdo=" crossorigin="anonymous" rel="stylesheet" href="assets/style.2c2dcf0fed7d8edba17206a66156420e07f80fa621ce35301bfaa400.css">
<link integrity="sha256-GHhcJoCyGl6XLAqBdemCCsYbBMNBFDG21zmtZASORNE=" crossorigin="anonymous" rel="stylesheet" href="assets/style.8bf288850a548162584c23d6f21827169ff51e7eebd05e75e655a666.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Passphrase and Password Generator</title>
Expand All @@ -15,7 +15,6 @@ <h1>Passphrase and Password Generator</h1>
<li><a href="index.html">Generate Passwords</a></li>
<li><a href="what.html">What is entropy?</a></li>
<li><a href="test.html">Entropy Testing Meter</a></li>
<li><a href="#" onclick="swap_stylesheet()" id="theme_switcher">Dark Theme</a></li>
</ul>
</div>
<div id="content">
Expand Down

0 comments on commit c794134

Please sign in to comment.