Rewritten color calculation in CSS

CasenChan · Feb 10, 2022 · 149561b · 149561b
1 parent ded7c73
commit 149561b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 47 deletions.
diff --git a/argontheme.js b/argontheme.js
@@ -2173,7 +2173,10 @@ function rgb2hsl(R,G,B){
 	return {
 		'h': H,//0~1
 		's': S,
-		'l': L
+		'l': L,
+		'H': Math.round(H * 360),//0~360
+		'S': Math.round(S * 100),//0~100
+		'L': Math.round(L * 100),//0~100
 	};
 }
 function Hue_2_RGB(v1,v2,vH){
@@ -2328,32 +2331,14 @@ function updateThemeColor(color, setcookie){
 	let RGB = hex2rgb(themecolor);
 	let HSL = rgb2hsl(RGB['R'], RGB['G'], RGB['B']);
 
-	let RGB_dark0 = hsl2rgb(HSL['h'], HSL['s'], Math.max(HSL['l'] - 0.025, 0));
-	let themecolor_dark0 = rgb2hex(RGB_dark0['R'], RGB_dark0['G'], RGB_dark0['B']);
-
-	let RGB_dark = hsl2rgb(HSL['h'], HSL['s'], Math.max(HSL['l'] - 0.05, 0));
-	let themecolor_dark = rgb2hex(RGB_dark['R'], RGB_dark['G'], RGB_dark['B']);
-
-	let RGB_dark2 = hsl2rgb(HSL['h'], HSL['s'], Math.max(HSL['l'] - 0.1, 0));
-	let themecolor_dark2 = rgb2hex(RGB_dark2['R'], RGB_dark2['G'], RGB_dark2['B']);
-
-	let RGB_dark3 = hsl2rgb(HSL['h'], HSL['s'], Math.max(HSL['l'] - 0.15, 0));
-	let themecolor_dark3 = rgb2hex(RGB_dark3['R'], RGB_dark3['G'], RGB_dark3['B']);
-
-	let RGB_light = hsl2rgb(HSL['h'], HSL['s'], Math.min(HSL['l'] + 0.1, 1));
-	let themecolor_light = rgb2hex(RGB_light['R'], RGB_light['G'], RGB_light['B']);
-
 	document.documentElement.style.setProperty('--themecolor', themecolor);
-	document.documentElement.style.setProperty('--themecolor-dark0', themecolor_dark0);
-	document.documentElement.style.setProperty('--themecolor-dark', themecolor_dark);
-	document.documentElement.style.setProperty('--themecolor-dark2', themecolor_dark2);
-	document.documentElement.style.setProperty('--themecolor-dark3', themecolor_dark3);
-	document.documentElement.style.setProperty('--themecolor-light', themecolor_light);
-	document.documentElement.style.setProperty('--themecolor-rgbstr', themecolor_rgbstr);
-	document.documentElement.style.setProperty('--base-hue', Math.round(HSL['h'] * 360));
 	document.documentElement.style.setProperty('--themecolor-R', RGB['R']);
 	document.documentElement.style.setProperty('--themecolor-G', RGB['G']);
 	document.documentElement.style.setProperty('--themecolor-B', RGB['B']);
+	document.documentElement.style.setProperty('--themecolor-H', HSL['H']);
+	document.documentElement.style.setProperty('--themecolor-S', HSL['S']);
+	document.documentElement.style.setProperty('--themecolor-L', HSL['L']);
+
 
 	if (rgb2gray(RGB['R'], RGB['G'], RGB['B']) < 50){
 		$("html").addClass("themecolor-toodark");

diff --git a/functions.php b/functions.php
@@ -1983,7 +1983,10 @@ function rgb2hsl($R,$G,$B){
 	return array(
 		'h' => $H,//0~1
 		's' => $S,
-		'l' => $L
+		'l' => $L,
+		'H' => round($H * 360),//0~360
+		'S' => round($S * 100),//0~100
+		'L' => round($L * 100),//0~100
 	);
 }
 function Hue_2_RGB($v1,$v2,$vH){

diff --git a/header.php b/header.php
@@ -258,35 +258,15 @@ function toggleAmoledDarkMode(){
 		$themecolor_rgbstr = hex2str($themecolor);
 		$RGB = hexstr2rgb($themecolor);
 		$HSL = rgb2hsl($RGB['R'], $RGB['G'], $RGB['B']);
-
-		$RGB_dark0 = hsl2rgb($HSL['h'], $HSL['s'], max($HSL['l'] - 0.025, 0));
-		$themecolor_dark0 = rgb2hex($RGB_dark0['R'],$RGB_dark0['G'],$RGB_dark0['B']);
-
-		$RGB_dark = hsl2rgb($HSL['h'], $HSL['s'], max($HSL['l'] - 0.05, 0));
-		$themecolor_dark = rgb2hex($RGB_dark['R'], $RGB_dark['G'], $RGB_dark['B']);
-
-		$RGB_dark2 = hsl2rgb($HSL['h'], $HSL['s'], max($HSL['l'] - 0.1, 0));
-		$themecolor_dark2 = rgb2hex($RGB_dark2['R'],$RGB_dark2['G'],$RGB_dark2['B']);
-
-		$RGB_dark3 = hsl2rgb($HSL['h'], $HSL['s'], max($HSL['l'] - 0.15, 0));
-		$themecolor_dark3 = rgb2hex($RGB_dark3['R'],$RGB_dark3['G'],$RGB_dark3['B']);
-
-		$RGB_light = hsl2rgb($HSL['h'], $HSL['s'], min($HSL['l'] + 0.1, 1));
-		$themecolor_light = rgb2hex($RGB_light['R'],$RGB_light['G'],$RGB_light['B']);
 	?>
 	:root{
 		--themecolor: <?php echo $themecolor; ?>;
-		--themecolor-dark0: <?php echo $themecolor_dark0; ?>;
-		--themecolor-dark: <?php echo $themecolor_dark; ?>;
-		--themecolor-dark2: <?php echo $themecolor_dark2; ?>;
-		--themecolor-dark3: <?php echo $themecolor_dark3; ?>;
-		--themecolor-light: <?php echo $themecolor_light; ?>;
-		--themecolor-rgbstr: <?php echo $themecolor_rgbstr; ?>;
-		--themecolor-gradient: linear-gradient(150deg,var(--themecolor-light) 15%, var(--themecolor) 70%, var(--themecolor-dark0) 94%);
-		--base-hue: <?php echo round($HSL['h'] * 360); ?>;
 		--themecolor-R: <?php echo $RGB['R']; ?>;
 		--themecolor-G: <?php echo $RGB['G']; ?>;
 		--themecolor-B: <?php echo $RGB['B']; ?>;
+		--themecolor-H: <?php echo $HSL['H']; ?>;
+		--themecolor-S: <?php echo $HSL['S']; ?>;
+		--themecolor-L: <?php echo $HSL['L']; ?>;
 	}
 </style>
 <style id="theme_cardradius_css">

diff --git a/style.css b/style.css
@@ -17,6 +17,16 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应,
 	--themecolor-R: 94;
 	--themecolor-G: 114;
 	--themecolor-B: 228;
+	--themecolor-H: 231;
+	--themecolor-S: 71;
+	--themecolor-L: 63;
+	--themecolor-rgbstr: var(--themecolor-R), var(--themecolor-G), var(--themecolor-B);
+	--themecolor-dark0: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 2.5%), 0%));
+	--themecolor-dark: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 5%), 0%));
+	--themecolor-dark2: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 10%), 0%));
+	--themecolor-dark3: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 15%), 0%));
+	--themecolor-light: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), min(calc(var(--themecolor-L) * 1% + 10%), 100%));
+	--themecolor-gradient: linear-gradient(150deg, var(--themecolor-light) 15%, var(--themecolor) 70%, var(--themecolor-dark0) 94%);
 
 	--color-tint-70: 
 		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.7),