From: Mike Frysinger <vapier@gentoo.org>
Date: Sun, 12 Mar 2017 05:57:59 +0000 (-0800)
Subject: add a light/dark theme selector
X-Git-Tag: v0.2.0~5
X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=6293bf85123c57c4ead5dee7cdce7a07a4290a22;p=chrome-ext%2Fwake-on-lan.git

add a light/dark theme selector
---

diff --git a/js/main.js b/js/main.js
index b6ce2a9..0978f8f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -199,12 +199,14 @@ var settings_keys = [
 	'mac',
 	'pass',
 	'port',
+	'theme',
 ];
 
 function load_settings() {
 	var storage = chrome.storage.local;
 
 	chrome.storage.local.get(settings_keys, function(settings) {
+		set_theme(settings['theme'] || 'dark');
 		var form = $$('form[name=settings]');
 		form.host.value = settings['host'] || '192.168.0.255';
 		form.port.value = settings['port'] || '40000';
@@ -227,6 +229,7 @@ function store_settings() {
 		'mac': form.mac.value,
 		'pass': form.pass.value,
 		'port': form.port.value,
+		'theme': curr_theme,
 	};
 	chrome.storage.local.set(settings);
 }
@@ -238,6 +241,7 @@ window.onload = function() {
 	$$('form[name=settings]').onsubmit = send;
 	$$('a[name=mac-paste]').onclick = paste_mac;
 	$$('a[name=pass-paste]').onclick = paste_pass;
+	$$('input[name=theme]').onclick = toggle_theme;
 
 	load_settings();
 };
diff --git a/js/theme.js b/js/theme.js
new file mode 100644
index 0000000..78e585c
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,53 @@
+// Written by Mike Frysinger <vapier@gmail.com>.
+// Released into the public domain.
+
+/*
+ * This code is all very simple/dumb.  If we want to ever support more
+ * complicated theme logic, then it should be thrown away entirely.
+ */
+
+var curr_theme;
+
+function _set_theme(txt, fg, bg, a) {
+	var b = $$('body');
+	b.style.color = fg;
+	b.style.backgroundColor = bg;
+
+	// This gets a bit tricky as we want to update the style sheet
+	// to quickly apply to all <a> tags.
+	var s, sheet, sheets, r, rule, rules;
+	sheets = document.styleSheets;
+	for (s = 0; s < sheets.length; ++s) {
+		sheet = sheets[s];
+		rules = sheet.cssRules;
+		for (r = 0; r < rules.length; ++r) {
+			rule = rules[r];
+			if (rule.selectorText == 'a') {
+				rule.style.color = a;
+				break;
+			}
+		}
+	}
+
+	// We can't set UTF8 text, or set HTML entities directly.  Ugh.
+	var span = document.createElement('span');
+	span.innerHTML = txt;
+	$$('input[name=theme]').value = span.innerText;
+}
+
+function set_theme(name) {
+	var themes = {
+		'light': ['&#9728;', 'black', 'white', 'black'],
+		'dark': ['&#9788;', 'white', 'black', 'grey']
+	};
+	curr_theme = name;
+	_set_theme.apply(this, themes[name]);
+	chrome.storage.local.set({'theme': curr_theme});
+}
+
+function toggle_theme() {
+	if (curr_theme == 'light')
+		set_theme('dark');
+	else
+		set_theme('light');
+}
diff --git a/main.html b/main.html
index 3174f0c..83b563a 100644
--- a/main.html
+++ b/main.html
@@ -7,6 +7,7 @@
 <script src='js/net_error_list.js'></script>
 <script src='js/common.js'></script>
 <script src='js/main.js'></script>
+<script src='js/theme.js'></script>
 <style>
 body {
 	background-color: black;
@@ -23,6 +24,13 @@ input[name=port] {
 	text-align: center;
 }
 
+input[name=theme] {
+	text-align: center;
+	position: absolute;
+	top: 3px;
+	left: 3px;
+}
+
 a {
 	color: grey;
 }
@@ -35,6 +43,7 @@ a {
  <a href='https://en.wikipedia.org/wiki/Wake-on-LAN' target='_blank'>
  Wake-On-Lan (WOL) Magic Packet Generator
  </a>
+ <input type='button' name='theme' value='&#9788;'>
 </p>
 
 <div class='settings'>