add option to force-apply dark/light theme (#3)

Author: NiklasGollenstede

README.md

@@ -3,7 +3,7 @@
 
 This is an extension for the browser extension [Tree Style Tabs](https://github.com/piroor/treestyletab#readme) (TST). It adds a search box at the bottom of TST's sidebar, allowing to search the titles and URLs (or whatever) of the tabs in the current window/sidebar, optionally case sensitive, as whole word, or by regular expression.
 Matching tabs will be highlighted in the tree, and/or non-matches will be suppressed (see extension preferences).
-Should the search bar not show up after installing this extension, then have a look at `about:addons` > "Extensions" > "TST Tab Search".
+Should the search bar not show up after installing this extension, then have a look at `about:addons` > "Extensions" > "TST Tab Search" > "Preferences".
 
 ![Searching for Cats](./resources/screenshot.png)
 

src/common/options.js

@@ -16,7 +16,7 @@ const model = {
 	panel: {
 		title: 'Search Box Options',
 		expanded: true,
-		description: `<small>These are only loaded when the TST sidebar (or a window) is first opened.</small>`,
+		description: `<small>These are only applied when the search box is newly loaded in TST's sidebar. Click <code>(re-)register</code> above to force that.</small>`,
 		default: true, children: {
 			matchCase: {
 				default: false,
@@ -30,9 +30,17 @@ const model = {
 				default: false,
 				input: { type: 'boolean', suffix: `<details><summary>Regular Expression:</summary>Search by (JavaScript) regular expression instead of plain string. If you don't know what this is, then you probably don't want it.</details>`, },
 			},
+			darkTheme: {
+				default: null,
+				input: { type: 'menulist', options: [
+					{ value: null,   label: `auto`, },
+					{ value: false,  label: `light`, },
+					{ value: true,   label: `dark`, },
+				], prefix: `Color theme:`, },
+			},
 			placeholder: {
 				default: 'Search ...',
-				input: { type: 'string', prefix: 'Search box placeholder:', suffix: `<small>For those who want to customize/localize things.</small>`, },
+				input: { type: 'string', prefix: 'Search box placeholder:', },
 			},
 		},
 	},
@@ -128,11 +136,11 @@ const model = {
 	advanced: {
 		title: 'Experimental/Advanced Options',
 		expanded: false,
-		description: `Advanced and/or experimental options, that may break and/or disappear at any time. These may also require a reload of TST, this extension or the sidebars to apply.`,
+		description: `Advanced and/or experimental options, that may break and/or disappear at any time.<br>These may also require a reload of TST, this extension or the sidebars to apply.`,
 		default: true, children: {
 			hideHeader: {
 				title: 'Hide Header',
-				description: `Hides the header above the search, that says something like "${manifest.name}".<br>NOTE: That header is not part of this extension, but of TST itself, and from a UX perspective, should absolutely be there (by default). It may (in the future?) also be used to switch sub panels or do any number of other things. Please DO NOT raise issues about anything loke that with TST while this option is active!`,
+				description: `Hides the header above the search, that says something like "${manifest.name}". Requires re-registering above. On older versions of TST (before v3.7.5), also make sure to correctly size the panel before.<br>NOTE: That header is not part of this extension, but of TST itself, and from a UX perspective, should absolutely be there (by default). It may (in the future?) also be used to switch sub panels or do any number of other things. Please DO NOT raise issues about anything like that with TST while this option is active!`,
 				default: '',
 				input: { type: 'boolInt', suffix: `I vow to have read the above and not to annoy TST's authors about it.`, off: '', on: `
 					#subpanel-container { height: 35px !important; }

src/content/embed.js

@@ -3,6 +3,8 @@
 	'fetch!./form.html': form_html,
 }) => {
 
+document.documentElement.classList.toggle('dark-theme', global.matchMedia('(prefers-color-scheme: dark)').matches);
+
 document.body.insertAdjacentHTML('beforeend', form_html);
 
 const names = [ 'term', 'matchCase', 'wholeWord', 'regExp', ];
@@ -30,5 +32,11 @@ document.addEventListener('keydown', event => {
 const options = (await messages.request('getOptions'));
 names.slice(1).forEach(name => { inputs[name].checked = options[name]; });
 inputs.term.placeholder = options.placeholder;
+if (options.darkTheme != null) {
+	document.documentElement.classList.toggle('dark-theme', options.darkTheme);
+} else {
+	global.matchMedia('(prefers-color-scheme: dark)').onchange = ({ matches, }) =>
+	document.documentElement.classList.toggle('dark-theme', matches);
+}
 
 }); })(this);

src/content/form.html

@@ -24,6 +24,9 @@
 		margin: 2px; height: 19px; width: 19px;
 		border: 1px solid;
 	}
+	#options label:not(:hover) div {
+		opacity: .75;
+	}
 	#options input:not(:checked) + label {
 		background-color: transparent;
 		border-color: transparent;
@@ -55,17 +58,17 @@
 	}
 	#options label div { border-color: var(--button-fgc); }
 	/* light */ :root {
-		--input-bgc: #e2e1d5;
+		--input-bgc: #f9f9fa;
 		--input-fgc: #222;
 		--button-bgc: #0002;
 		--button-bdc: #0005;
-		--button-fgc: #444;
+		--button-fgc: #000;
 	}
-	@media (prefers-color-scheme: dark) { :root {
+	:root.dark-theme {
 		--input-bgc: #1D2328;
 		--input-fgc: #ddd;
 		--button-bgc: #fff3;
 		--button-bdc: #fff5;
-		--button-fgc: #aaa;
-	} }
+		--button-fgc: #fff;
+	}
 </style>

src/views/options.js

@@ -5,13 +5,15 @@
 	'background/': { register, },
 }) => async (window, location) => { const { document, } = window;
 
-document.head.insertAdjacentHTML('beforeend', `<style>
+document.head.insertAdjacentHTML('beforeend', String.raw`<style>
 	/* details in checkbox descriptions */
 	.checkbox-wrapper { vertical-align: top !important; }
 	.value-suffix details[open] { max-width: calc(100% - 40px); }
 
 	/* fix lists in descriptions */
 	.pref-description li:not(#not) { list-style: unset; margin-left: 6px; }
+
+	#\.panel\.placeholder input { max-width: 150px; }
 </style>`);
 
 async function onCommand({ name, }, _buttonId) { try { switch (name) {