some dark theme improvements

peabrainiac · Apr 23, 2021 · d8c2d5a · d8c2d5a
1 parent 1ca0534
commit d8c2d5a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/source/inject.js b/source/inject.js
@@ -157,7 +157,7 @@ class ColorSettings {
 	async fetch(){
 		let settings = await browser.storage.local.get("colorSettings");
 		console.log("Settings:",settings);
-		this._colorSettings = (settings&&settings.colorSettings)||{default:"#efefef",currentChannel:"#e0e0e0",categories:[]};
+		this._colorSettings = (settings&&settings.colorSettings)||{default:"#80808010",currentChannel:"#80808020",categories:[]};
 	}
 	getVideoColor(title,channel,currentChannel=null){
 		let color = this._colorSettings.default;

diff --git a/source/settings.css b/source/settings.css
@@ -1,3 +1,19 @@
+html {
+	--background-transparent-1: #ffffff80;
+	--color-text-transparent-1: #00000040;
+	--color-text-transparent-2: #00000060;
+	--color-text-transparent-3: #000000b0;
+}
+@media (prefers-color-scheme: dark){
+	html {
+		background-color: #202020;
+		color: #dfdfdf;
+		--background-transparent-1: #20202080;
+		--color-text-transparent-1: #dfdfdf40;
+		--color-text-transparent-2: #dfdfdf60;
+		--color-text-transparent-3: #dfdfdfb0;
+	}
+}
 color-settings-element, category-element, default-category-element, category-entry-element {
 	display: block;
 }
@@ -13,7 +29,7 @@ color-settings-element, category-element, default-category-element, category-ent
 .color-settings-add-category-button {
 	display: block;
 	margin: 10px auto;
-	background: #bfbfbf;
+	background: #80808080;
 	transition: background-color 0.25s ease;
 }
 .color-settings-add-category-button:hover, .color-settings-add-category-button:focus {
@@ -24,7 +40,7 @@ color-settings-element, category-element, default-category-element, category-ent
 }
 .category-header {
 	padding: 5px 10px;
-	background: #efefef;
+	background: #80808010;
 	font-size: 1.1em;
 	position: relative;
 }
@@ -48,10 +64,10 @@ color-settings-element, category-element, default-category-element, category-ent
 	display: block;
 }
 .category:hover .category-close-button {
-	color: #00000040;
+	color: var(--color-text-transparent-1);
 }
 .category:hover .category-close-button:hover, .category-close-button:focus, .category:hover .category-close-button:focus {
-	color: #000000b0;
+	color: var(--color-text-transparent-3);
 }
 .category-channel-list {
 	padding: 5px 10px 5px 30px;
@@ -82,10 +98,10 @@ color-settings-element, category-element, default-category-element, category-ent
 	display: block;
 }
 .category-channel-entry:hover .channel-close-button {
-	color: #00000040;
+	color: var(--color-text-transparent-1);
 }
 .category-channel-entry:hover .channel-close-button:hover, .channel-close-button:focus, .category-channel-entry:hover .channel-close-button:focus {
-	color: #000000b0;
+	color: var(--color-text-transparent-3);
 }
 text-input, span.category-name {
 	font-family: "MS Shell Dlg 2", sans-serif;
@@ -96,22 +112,22 @@ span.category-name {
 	border: 1px solid transparent;
 }
 text-input:hover, .category-channel-entry:hover > text-input, .category-channel-entry:focus-within > text-input {
-	border-bottom-color: #00000060;
+	border-bottom-color: var(--color-text-transparent-2);
 }
 text-input:focus-within, .category-channel-entry:hover > text-input:focus-within, .category-channel-entry:focus-within > text-input:focus-within {
-	border-bottom-color: #000000b0;
+	border-bottom-color: var(--color-text-transparent-3);
 }
 #button-save {
 	margin: 30px 5px 5px 15px;
-	background: #e0e0e0;
+	background: #80808040;
 	transition: background-color 0.25s ease;
 	font-size: 1.2em;
 	height: 40px;
 	width: 100px;
 	cursor: default;
 }
 #button-save.highlighted {
-	background: #bfbfbf;
+	background: #80808080;
 	cursor: pointer;
 }
 #button-save.highlighted:hover, #button-save.highlighted:focus {
@@ -123,6 +139,6 @@ button {
 	padding-left: 10px;
 	padding-right: 10px;
 	color: #ffffff;
-	background: #bfbfbf;
+	background: #80808080;
 	cursor: pointer;
 }
diff --git a/source/settings.js b/source/settings.js
@@ -17,7 +17,7 @@ onLoad(function (){
 	});
 
 	browser.storage.local.get("colorSettings").then((settings)=>{
-		colorSettingsElement.data = settings.colorSettings||{default:"#efefef",currentChannel:"#e0e0e0",categories:[]};
+		colorSettingsElement.data = settings.colorSettings||{default:"#80808010",currentChannel:"#80808020",categories:[]};
 	});
 
 	colorSettingsElement.onChange(()=>{
@@ -184,7 +184,7 @@ class CategoryElement extends HTMLElement {
 
 	setBackgroundColor(color){
 		this._header.style.background = color;
-		this._channelList.style.background = color+" linear-gradient(#ffffff80,#ffffff80)";
+		this._channelList.style.background = color+" linear-gradient(var(--background-transparent-1),var(--background-transparent-1))";
 	}
 
 	focus(){
@@ -334,6 +334,7 @@ class TextInput extends HTMLElement {
 				}
 				input, span {
 					border: none;
+					color: inherit;
 					font: inherit;
 					text-align: inherit;
 					white-space: pre;

diff --git a/source/startpage.css b/source/startpage.css
@@ -1,5 +1,11 @@
 ytd-rich-grid-media, ytd-post-renderer {
-	--ext-yt-blocker-color: #efefef;
+	--ext-yt-blocker-color: #80808010;
+	--ext-yt-blocker-color-2: #efefef80;
+}
+@media (prefers-color-scheme: dark){
+	ytd-rich-grid-media, ytd-post-renderer {
+		--ext-yt-blocker-color-2: #30303080;
+	}
 }
 
 /* For videos on new Frontpage Design */
@@ -44,14 +50,14 @@ ytd-rich-grid-media::after {
 ytd-rich-grid-media:hover::after {
 	transition: all 0.5s ease 1.5s;
 	height: 0;
-	background: #efefef80;
+	background: var(--ext-yt-blocker-color-2);
 }
 
 /*
  * for old classname (outdated since ~september 20th-ish 2020?)
  */
  ytd-rich-grid-video-renderer, ytd-post-renderer {
-	--ext-yt-blocker-color: #efefef;
+	--ext-yt-blocker-color: #80808010;
 }
 ytd-rich-grid-video-renderer:not(:hover) ytd-channel-name, ytd-rich-grid-video-renderer:not(:hover) ytd-thumbnail, ytd-rich-grid-video-renderer:not(:hover) #video-title, ytd-rich-grid-video-renderer:not(:hover) #metadata-line > span, ytd-rich-grid-video-renderer:not(:hover) ytd-badge-supported-renderer > div.badge {
 	background: var(--ext-yt-blocker-color) !important;
@@ -94,7 +100,7 @@ ytd-rich-grid-video-renderer::after {
 ytd-rich-grid-video-renderer:hover::after {
 	transition: all 0.5s ease 1.5s;
 	height: 0;
-	background: #efefef80;
+	background: var(--ext-yt-blocker-color-2);
 }