darkmode
@@ -4,15 +4,11 @@
* @include http://*
* @include https://*
* @contributor nanikamado http://let.hatelabo.jp/nanikamado/let/hLHU5aii3YU5
- * @nitpicker noromanba https://noromanba.github.com
- * @license Unknown (as-is)
+ * @nitpicker noromanba http://let.hatelabo.jp/noromanba/let/hJmc5cn7v_h5
+ * @license MIT license https://opensource.org/licenses/MIT
* @javascript_url
*/
-// license of modified part
-// The MIT license
-// https://opensource.org/licenses/MIT
-
// WIP refactoring
// - chaos conditional; do simply
// - naming; what is that?
@@ -29,27 +25,26 @@
(() => {
'use strict';
- // TODO avoid "God object"
- let dark_style = document.body.querySelector('.dark_visited_style');
- const mode = dark_style ? Number(dark_style.getAttribute('mode_stat')) : 0;
-
const set_color = (nodes) => {
nodes.forEach(node => {
- const color = window.getComputedStyle(node).getPropertyValue('color');
- const [ r, g, b, ] = [
- Number(color.replace(/rgba?\((\d{1,3}), \d{1,3}, \d{1,3}.*/, '$1')),
- Number(color.replace(/rgba?\(\d{1,3}, (\d{1,3}), \d{1,3}.*/, '$1')),
- Number(color.replace(/rgba?\(\d{1,3}, \d{1,3}, (\d{1,3}).*/, '$1')),
- ];
+ // Node.ELEMENT_NODE nullable `style`; e.g. <math> try to
+ // https://en.wikipedia.org/wiki/RGB_color_model
+ if (!node.style) return;
+
+ // TBD RegExp named capturing
+ const [r, g, b,] = window.getComputedStyle(node).color
+ .match(/rgba?\((\d+), (\d+), (\d+)/).slice(1).map(v => Number(v));
// TODO rename; what mean "s" is?
const s = 255 - Math.max(r, g, b);
node.style.color = `rgb(${r + s}, ${g + s}, ${b + s})`;
});
};
- // TODO use newline w/ Array#join() or heredoc-like `` and use Space, unreadable
+ // TODO
+ // - readable; use newline w/ Array#join() or heredoc-like `` and use Space
+ // - rename to "dark_style"; I don't know your my style
const my_style_text = 'a:visited{color:#b553ff!important;}:not(html){background-color:transparent!important}html{background-color:#000!important}::-webkit-scrollbar{overflow:hidden;width:.8rem;background:#000;}::-webkit-scrollbar-thumb{overflow:hidden;border-radius:.4rem;background:#ddd;}';
- // TODO element node only
+ // element node only
const all = document.body.querySelectorAll('*');
const set_color_all = (style = my_style_text) => {
@@ -65,19 +60,25 @@
set_color(i_doc.querySelectorAll('*'));
i_doc.body.appendChild(Object.assign(i_doc.createElement('style'), {
- innerText: style,
+ textContent: style,
}));
}
});
};
+ // TODO avoid "God object", is not style
+ let dark_style = document.body.querySelector('.dark_visited_style');
+ const mode = dark_style ? Number(dark_style.getAttribute('mode_stat')) : 0;
+
switch (mode) {
- // TODO separate style and length state
+ // TODO separate style settings and state setting
+ // TBD "mode" to explicit name, not necessary Number
case 0:
set_color_all();
+ // TODO don't need `dark_style` object
dark_style = document.createElement('style');
dark_style.className = 'dark_visited_style';
- dark_style.innerText = my_style_text;
+ dark_style.textContent = my_style_text;
document.body.appendChild(dark_style);
dark_style.setAttribute('all_elm_length', all.length);
@@ -85,7 +86,7 @@
console.log('0');
break;
case 1:
- dark_style.innerText = '* { background-color:#000 !important; }';
+ dark_style.textContent = '* { background-color: #000 !important; }';
if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) {
set_color_all('* { background-color: #000 !important; }');
@@ -95,7 +96,7 @@
console.log('1');
break;
case 2:
- dark_style.innerText = my_style_text;
+ dark_style.textContent = my_style_text;
if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) {
set_color_all();
/*
* @title darkmode
* @description switchable darkmode
* @include http://*
* @include https://*
* @contributor nanikamado http://let.hatelabo.jp/nanikamado/let/hLHU5aii3YU5
* @nitpicker noromanba http://let.hatelabo.jp/noromanba/let/hJmc5cn7v_h5
* @license MIT license https://opensource.org/licenses/MIT
* @javascript_url
*/
// WIP refactoring
// - chaos conditional; do simply
// - naming; what is that?
// - readability;
// NOTE mode 0 -> 1 -> 2 -> 1 -> 2...
// TODO write mode detail
// level of extremely(?)
// | 0
// | 1
// | 2
// v
(() => {
'use strict';
const set_color = (nodes) => {
nodes.forEach(node => {
// Node.ELEMENT_NODE nullable `style`; e.g. <math> try to
// https://en.wikipedia.org/wiki/RGB_color_model
if (!node.style) return;
// TBD RegExp named capturing
const [r, g, b,] = window.getComputedStyle(node).color
.match(/rgba?\((\d+), (\d+), (\d+)/).slice(1).map(v => Number(v));
// TODO rename; what mean "s" is?
const s = 255 - Math.max(r, g, b);
node.style.color = `rgb(${r + s}, ${g + s}, ${b + s})`;
});
};
// TODO
// - readable; use newline w/ Array#join() or heredoc-like `` and use Space
// - rename to "dark_style"; I don't know your my style
const my_style_text = 'a:visited{color:#b553ff!important;}:not(html){background-color:transparent!important}html{background-color:#000!important}::-webkit-scrollbar{overflow:hidden;width:.8rem;background:#000;}::-webkit-scrollbar-thumb{overflow:hidden;border-radius:.4rem;background:#ddd;}';
// element node only
const all = document.body.querySelectorAll('*');
const set_color_all = (style = my_style_text) => {
set_color(all);
document.body.querySelectorAll('iframe[src]').forEach(iframe => {
if (!iframe.src) return;
// TBD omit base URL
if ((new URL(iframe.src, location.href)).origin === location.origin ||
iframe.src === 'about:blank') {
const i_doc = iframe.contentDocument;
set_color(i_doc.querySelectorAll('*'));
i_doc.body.appendChild(Object.assign(i_doc.createElement('style'), {
textContent: style,
}));
}
});
};
// TODO avoid "God object", is not style
let dark_style = document.body.querySelector('.dark_visited_style');
const mode = dark_style ? Number(dark_style.getAttribute('mode_stat')) : 0;
switch (mode) {
// TODO separate style settings and state setting
// TBD "mode" to explicit name, not necessary Number
case 0:
set_color_all();
// TODO don't need `dark_style` object
dark_style = document.createElement('style');
dark_style.className = 'dark_visited_style';
dark_style.textContent = my_style_text;
document.body.appendChild(dark_style);
dark_style.setAttribute('all_elm_length', all.length);
dark_style.setAttribute('mode_stat', 1);
console.log('0');
break;
case 1:
dark_style.textContent = '* { background-color: #000 !important; }';
if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) {
set_color_all('* { background-color: #000 !important; }');
dark_style.setAttribute('all_elm_length', all.length);
}
dark_style.setAttribute('mode_stat', 2);
console.log('1');
break;
case 2:
dark_style.textContent = my_style_text;
if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) {
set_color_all();
dark_style.setAttribute('all_elm_length', all.length);
}
dark_style.setAttribute('mode_stat', 1);
console.log('2');
break;
default:
console.error('error mode_stat=' + mode);
break;
}
})();
- Permalink
- このページへの個別リンクです。
- RAW
- 書かれたコードへの直接のリンクです。
- Packed
- 文字列が圧縮された書かれたコードへのリンクです。
- Userscript
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。