// Written by Mike Frysinger <vapier@gmail.com>. Released into the public domain.
+function $(s) { return document.querySelector(s); }
+
var storage = chrome.storage.sync;
var settings_keys = [
'url',
'user',
'pass',
+ 'theme',
];
var settings_defaults = {
'url': 'http://192.168.0.100',
'user': 'admin',
'pass': '1234',
+ 'theme': 'system',
};
--- /dev/null
+@charset "utf-8";
+
+/* Written by Mike Frysinger <vapier@gmail.com>. Released into the public domain. */
+
+:root {
+ /* NB: No space after colon. */
+ --theme:dark;
+ --body-color: black;
+ --body-filter: invert(1);
+ --theme-text: '☼';
+}
--- /dev/null
+@charset "utf-8";
+
+/* Written by Mike Frysinger <vapier@gmail.com>. Released into the public domain. */
+
+:root {
+ /* NB: No space after colon. */
+ --theme:light;
+ --body-color: white;
+ --body-filter:;
+ --theme-text: '☀';
+}
<title>Web Power Switch Manager Options</title>
<script src='common.js'></script>
<script src='options.js'></script>
-<style>body { padding: 0px; }</style>
+<style>
+body { padding: 0px; }
+button.selected { filter: invert(1); }
+</style>
</head>
<body>
<td><input type='password' id='pass' size=30
autocapitalize='none' autocorrect='off' spellcheck='false'> <button id='show-pass'>👁</button></td>
</tr>
+<tr>
+ <td>Theme:</td>
+ <td>
+ <input type='text' id='theme' hidden>
+ <button id='theme-light'>Light</button>
+ <button id='theme-system'>System</button>
+ <button id='theme-dark'>Dark</button>
+ </td>
+</tr>
</table>
<p style='text-align: center'>
return false;
}
+function theme_select(theme, init) {
+ const theme_system = $('#theme-system');
+ const theme_light = $('#theme-light');
+ const theme_dark = $('#theme-dark');
+
+ theme_system.className = theme == 'system' ? 'selected' : '';
+ theme_light.className = theme == 'light' ? 'selected' : '';
+ theme_dark.className = theme == 'dark' ? 'selected' : '';
+
+ if (init) {
+ theme_system.onclick = theme_click;
+ theme_light.onclick = theme_click;
+ theme_dark.onclick = theme_click;
+ }
+}
+
+function theme_click() {
+ const theme = this.textContent.toLowerCase();
+ theme_select(theme);
+ storage.set({theme});
+}
+
window.onload = function() {
- storage.get(settings_keys, function(settings) {
+ storage.get(settings_keys, function(settings_storage) {
+ const settings = Object.assign({}, settings_defaults, settings_storage);
+
+ theme_select(settings['theme'], true);
+
var field = document.getElementById('save');
field.onclick = update_settings;
settings_keys.forEach(function(key) {
var field = document.getElementById(key);
- field.value = settings[key] || settings_defaults[key];
+ field.value = settings[key];
field.onkeydown = keydown;
});
});
<head>
<meta charset='utf-8'/>
<title>Web Power Switch Manager</title>
+
+<link rel='stylesheet' href='css/dark.css' media='(prefers-color-scheme: dark)'/>
+<link rel='stylesheet' href='css/light.css' media='(prefers-color-scheme: light), (prefers-color-scheme: no-preference)'/>
+<!-- Load theme override asap to help with initial loading/flashing. -->
+<link rel='stylesheet' href='' id='theme-override'/>
+<script src='theme-init.js'></script>
+
<script src='common.js'></script>
<script src='popup.js'></script>
<style>
+button[name="theme"]::before {
+ content: var(--theme-text);
+ font-size: smaller;
+ font-weight: bold;
+}
+button[name="theme"] {
+ float: right;
+}
table#buttons {
margin: 0px;
padding: 0px;
border-collapse: collapse;
}
body {
+ background-color: var(--body-color);
+ filter: var(--body-filter);
margin: 1px;
padding: 0px;
font-family: Arial, sans-serif;
}
}
+function get_css_var(key) { return getComputedStyle(document.documentElement).getPropertyValue(`--${key}`); }
+
function onoff(o) {
const data = o.toUpperCase();
switch (data) {
}, 5000);
}
+/* Toggle the selected theme. */
+function toggle_theme() {
+ const theme = get_css_var('theme') == 'light' ? 'dark' : 'light';
+ const css = $('link#theme-override');
+ css.href = `css/${theme}.css`;
+ storage.set({theme});
+ return false;
}
function initpopup(xhr, state) {
cell = row.insertCell(-1);
cell.colSpan = 10;
cell.align = 'center';
- cell.innerText = controller_name.slice(12);
- cell.innerHTML = '<a href="' + url_base + '" target="_blank">' + cell.innerHTML + '</a>'
+
+ const a = document.createElement('a');
+ a.href = url_base;
+ a.target = '_blank';
+ a.text = controller_name.slice(12).trim();
+ cell.appendChild(a);
+
+ const button = document.createElement('button');
+ button.name = 'theme';
+ button.onclick = toggle_theme;
+ cell.appendChild(button);
}
var tr, trs = state.currentTarget.responseXML.querySelectorAll('tr');
}
document.addEventListener('DOMContentLoaded', function() {
- storage.get(settings_keys, function(settings) {
- url_base = settings['url'] || settings_defaults['url'];
- user = settings['user'] || settings_defaults['user'];
- pass = settings['pass'] || settings_defaults['pass'];
+ storage.get(settings_keys, function(settings_storage) {
+ const settings = Object.assign({}, settings_defaults, settings_storage);
+ url_base = settings['url'];
+ user = settings['user'];
+ pass = settings['pass'];
chrome.permissions.contains({
origins: [url_base + '/*']
}, function(granted) {
--- /dev/null
+// Written by Mike Frysinger <vapier@gmail.com>. Released into the public domain.
+
+// Load the theme override asap to help with initial loading/flashing.
+chrome.storage.sync.get(['theme'], ({theme}) => {
+ if (theme == 'light' || theme == 'dark') {
+ const css = document.querySelector('link#theme-override');
+ css.href = `css/${theme}.css`;
+ }
+});
projects / chrome-ext / web-power-switch.git / commitdiff