Add accent color switch

solstice23 · Nov 27, 2022 · aac2445 · aac2445
1 parent 243e6a7
commit aac2445
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/RefinedNowPlaying/main.js b/RefinedNowPlaying/main.js
@@ -117,11 +117,11 @@ const updateAccentColor = ([r, g, b]) => {
 	const [r1, g1, b1] = calcWhiteShadeColor([r, g, b], 0.2);
 	document.body.style.setProperty('--accent-color', `rgb(${r1}, ${g1}, ${b1})`);
 	document.body.style.setProperty('--accent-color-rgb', `${r1}, ${g1}, ${b1}`);
-	const [r2, g2, b2] = calcWhiteShadeColor([r, g, b]);
-	document.body.style.setProperty('--accent-color-white-shade', `rgb(${calcWhiteShadeColor([r2, g2, b2])})`);
-	const [r3, g3, b3] = calcWhiteShadeColor([r, g, b], 0.3);
-	document.body.style.setProperty('--accent-color-lyric-shade', `rgb(${calcWhiteShadeColor([r3, g3, b3])})`);
-	document.body.style.setProperty('--accent-color-lyric-shade-rgb', `${r3}, ${g3}, ${b3}`);
+	const [r2, g2, b2] = calcWhiteShadeColor([r, g, b], 0.3);
+	document.body.style.setProperty('--accent-color-shade-1', `rgb(${calcWhiteShadeColor([r2, g2, b2])})`);
+	document.body.style.setProperty('--accent-color-shade-1-rgb', `${r2}, ${g2}, ${b2}`);
+	const [r3, g3, b3] = calcWhiteShadeColor([r, g, b], 0.45);
+	document.body.style.setProperty('--accent-color-shade-2', `rgb(${calcWhiteShadeColor([r3, g3, b3])})`);
 }
 
 
@@ -149,7 +149,7 @@ const updateCDImage = () => {
 		if (img.complete) {
 			updateAccentColor(colorThief.getColor(img));
 		} else {
-			image.addEventListener('load', function() {
+			img.addEventListener('load', function() {
 				updateAccentColor(colorThief.getColor(img));
 			});
 		}
@@ -252,10 +252,9 @@ const addSettingsMenu = async () => {
 			const min = e.target.min;
 			const max = e.target.max;
 			const percent = (value - min) / (max - min);
-			const bg = `linear-gradient(90deg, rgb(var(--accent-color-rgb)) ${percent * 100}%, #dfe1e422 ${percent * 100}%)`;
+			const bg = `linear-gradient(90deg, var(--accent-color) ${percent * 100}%, #dfe1e422 ${percent * 100}%)`;
 			e.target.style.background = bg;
 
-			console.log(value, e.target.getAttribute("default"), value == e.target.getAttribute("default")); 
 			if (value != e.target.getAttribute("default")) {
 				e.target.parentElement.classList.add("changed");
 			} else {
@@ -295,12 +294,14 @@ const addSettingsMenu = async () => {
 	const initSettings = () => {
 		const rectangleCover = document.querySelector('#rectangle-cover');
 		const lyricBlur = document.querySelector('#lyric-blur');
+		const enableAccentColor = document.querySelector('#enable-accent-color');
 		const useNotosans = document.querySelector('#use-notosans');
 		const hideComments = document.querySelector('#hide-comments');
 		const partialBg = document.querySelector('#partial-bg');
 
 		bindCheckboxToClass(rectangleCover, 'rectangle-cover', true);
 		bindCheckboxToClass(lyricBlur, 'lyric-blur', true);
+		bindCheckboxToClass(enableAccentColor, 'enable-accent-color', true);
 		bindCheckboxToClass(useNotosans, 'use-notosans', false);
 		bindCheckboxToClass(hideComments, 'hide-comments', false);
 		bindCheckboxToClass(partialBg, 'partial-bg', false);

diff --git a/RefinedNowPlaying/settings-menu.html b/RefinedNowPlaying/settings-menu.html
@@ -10,6 +10,10 @@
 			<input id="lyric-blur" type="checkbox" class="rnp-checkbox">
 			<label for="lyric-blur" class="rnp-checkbox-label">歌词模糊效果</label>
 		</div>
+		<div class="rnp-checkbox-wrapper">
+			<input id="enable-accent-color" type="checkbox" class="rnp-checkbox">
+			<label for="enable-accent-color" class="rnp-checkbox-label">沉浸主题色</label>
+		</div>
 		<div class="rnp-checkbox-wrapper">
 			<input id="use-notosans" type="checkbox" class="rnp-checkbox">
 			<label for="use-notosans" class="rnp-checkbox-label">思源黑体</label>

diff --git a/RefinedNowPlaying/styles.css b/RefinedNowPlaying/styles.css
@@ -306,7 +306,7 @@ body.mq-playing-scroll .n-single .sd .together-text {
 }
 .m-playlrc .word .text .z-crt p {
 	font-size: 1.3rem !important;
-	color: var(--accent-color-lyric-shade);
+	color: var(--accent-color-shade-1);
 }
 .m-playlrc .word .j-line:not(.z-crt) p{
     font-size: 1.05rem;
@@ -345,15 +345,16 @@ body.mq-playing .g-hd:hover .m-leftbox {
 body.mq-playing #main-player {
 	background: transparent;
 }
-body.mq-playing:not(.mq-playing-scroll) #main-player {
+body.mq-playing:not(.mq-playing-scroll) #main-player,
+body.mq-playing.partial-bg #main-player {
 	border: none;
 }
 body.mq-playing .m-player .prg .has {
-	background: rgba(var(--accent-color-lyric-shade-rgb), 0.8);
+	background: rgba(var(--accent-color-shade-1-rgb), 0.8);
 }
 body.mq-playing .m-player .prg .ctrl::before,
 body.mq-playing .m-player .prg .ctrl::after {
-	background: var(--accent-color-lyric-shade);
+	background: var(--accent-color-shade-1);
 }
 body.mq-playing .m-player .prg-ply .ctrl {
 	width: 8px;
@@ -442,7 +443,7 @@ body.mq-playing .m-player .prg:not(:hover) .track {
     background-color: rgba(var(--accent-color-rgb), 0.1);
 }
 body.mq-playing .m-player .prg .track {
-    background-color: rgba(var(--accent-color-lyric-shade-rgb), 0.25);
+    background-color: rgba(var(--accent-color-shade-1-rgb), 0.25);
 }
 body.mq-playing .m-player .prg:not(:hover) .has {
     background: rgba(var(--accent-color-rgb), 0.53333);
@@ -517,9 +518,6 @@ body.mq-playing .m-player .brt .brttext.vip {
 }
 
 
-section#auto-id-08OXGV5zDKD5O8Vo * {
-	color: #fff !important;
-}
 body.mq-playing .m-playlist {
 	background: #00000022;
 	backdrop-filter: blur(36px) brightness(0.8);
@@ -565,7 +563,7 @@ body.mq-playing .s-fc2:hover {
 }
 body.mq-playing .m-player .btnc svg,
 body.mq-playing .m-player .btnp svg {
-    fill: var(--accent-color-white-shade);
+    fill: var(--accent-color-shade-2);
 }
 
 
@@ -638,4 +636,20 @@ body.partial-bg #rnp-settings {
 body.partial-bg #rnp-settings-menu {
     right: 50px;
     top: 120px;
+}
+
+
+body:not(.enable-accent-color) {
+	--accent-color: #fff !important;
+	--accent-color-rgb: 255, 255, 255 !important;
+	--accent-color-shade-1: #fff !important;
+	--accent-color-shade-1-rgb: 255, 255, 255 !important;
+	--accent-color-shade-2: #fff !important;
+	--accent-color-shade-2-rgb: 255, 255, 255 !important;
+}
+body.mq-playing:not(.enable-accent-color) .m-pinfo .btn-love.loved:before {
+    background-color: #ec4141;
+}
+body:not(.enable-accent-color) #rnp-settings-menu {
+	--accent-color: #ffffff55;
 }