Show some love to our photophobic users.

(Always use dark theme if the user indicates their preference.) Blog posts will be updated later.
author: Chris Xiong <chirs241097@gmail.com> 2020-08-04 19:03:55 +0800
committer: Chris Xiong <chirs241097@gmail.com> 2020-08-04 19:03:55 +0800
commit: 6a765f3e8509fb62c9c6d381b57b5964b461f4b8 (patch)
tree: 04a0647bbd4d2c29bfc1d9c97628fb6e6c16d6aa
parent: 24f3ab15a9c0b3a95d63390561d9e8efea05fc06 (diff)
download: web-6a765f3e8509fb62c9c6d381b57b5964b461f4b8.tar.xz
8 files changed, 55 insertions, 225 deletions
diff --git a/ballance/levels/lucid/bonus.html b/ballance/levels/lucid/bonus.html
index 1c6aac0..1b6bef4 100644
--- a/ballance/levels/lucid/bonus.html
+++ b/ballance/levels/lucid/bonus.html
@@ -14,49 +14,13 @@
 <link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
 <link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
 <link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
+<script type="text/javascript" src="/themer.js"></script>
 <style>
 h1, h2 {font-weight: normal;}
 .reduced {font-size: 75%;}
 </style>
 </head>
 <body onload="loadTheme();" class="TText">
-<script>
-function getcookie(key)
-{return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}
-function loadTheme(){
-	var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
-	if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
-	var ent="";
-	var d=new Date();
-	if(thm[0]=='z')
-	{
-		var m=d.getMonth()+1;
-		if(m>=3&&m<6)thm='0'+thm[1];
-		else if(m>=6&&m<9)thm='1'+thm[1];
-		else if(m>=9&&m<12)thm='2'+thm[1];
-		else thm='3'+thm[1];
-	}
-	if(thm[1]=='z')
-	{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
-	ent=`theme${thm}`;
-	var R=new RegExp('theme[0-4][ab]');
-	for(var i=0;i<document.styleSheets.length;++i)
-	{
-		if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
-		document.styleSheets[i].disabled=true;
-		else document.styleSheets[i].disabled=false;
-	}
-	var thmcolor="";
-	switch(thm[0])
-	{
-		case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
-		case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
-		case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
-		case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
-	}
-	document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
-}
-</script>
 <h1><a href="/">Chrisoft</a>::Ballance</h1>
 <h2>Back and Forth - A Lucid Dream</h2>
 <h2>彷徨梦</h2>
diff --git a/ballance/levels/lucid/bonus_zh.html b/ballance/levels/lucid/bonus_zh.html
index 6245d38..c314d27 100644
--- a/ballance/levels/lucid/bonus_zh.html
+++ b/ballance/levels/lucid/bonus_zh.html
@@ -14,49 +14,13 @@
 <link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
 <link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
 <link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
+<script type="text/javascript" src="/themer.js"></script>
 <style>
 h1, h2 {font-weight: normal;}
 .reduced {font-size: 75%;}
 </style>
 </head>
 <body onload="loadTheme();" class="TText">
-<script>
-function getcookie(key)
-{return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}
-function loadTheme(){
-	var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
-	if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
-	var ent="";
-	var d=new Date();
-	if(thm[0]=='z')
-	{
-		var m=d.getMonth()+1;
-		if(m>=3&&m<6)thm='0'+thm[1];
-		else if(m>=6&&m<9)thm='1'+thm[1];
-		else if(m>=9&&m<12)thm='2'+thm[1];
-		else thm='3'+thm[1];
-	}
-	if(thm[1]=='z')
-	{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
-	ent=`theme${thm}`;
-	var R=new RegExp('theme[0-4][ab]');
-	for(var i=0;i<document.styleSheets.length;++i)
-	{
-		if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
-		document.styleSheets[i].disabled=true;
-		else document.styleSheets[i].disabled=false;
-	}
-	var thmcolor="";
-	switch(thm[0])
-	{
-		case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
-		case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
-		case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
-		case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
-	}
-	document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
-}
-</script>
 <h1><a href="/">Chrisoft</a>::Ballance</h1>
 <h2>Back and Forth - A Lucid Dream</h2>
 <h2>彷徨梦</h2>
diff --git a/ballance/levels/lucid/index.html b/ballance/levels/lucid/index.html
index 970cc14..7e1678a 100644
--- a/ballance/levels/lucid/index.html
+++ b/ballance/levels/lucid/index.html
@@ -14,48 +14,12 @@
 <link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
 <link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
 <link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
+<script type="text/javascript" src="/themer.js"></script>
 <style>
 h1, h2 {font-weight: normal;}
 </style>
 </head>
 <body onload="loadTheme();" class="TText">
-<script>
-function getcookie(key)
-{return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}
-function loadTheme(){
-	var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
-	if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
-	var ent="";
-	var d=new Date();
-	if(thm[0]=='z')
-	{
-		var m=d.getMonth()+1;
-		if(m>=3&&m<6)thm='0'+thm[1];
-		else if(m>=6&&m<9)thm='1'+thm[1];
-		else if(m>=9&&m<12)thm='2'+thm[1];
-		else thm='3'+thm[1];
-	}
-	if(thm[1]=='z')
-	{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
-	ent=`theme${thm}`;
-	var R=new RegExp('theme[0-4][ab]');
-	for(var i=0;i<document.styleSheets.length;++i)
-	{
-		if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
-		document.styleSheets[i].disabled=true;
-		else document.styleSheets[i].disabled=false;
-	}
-	var thmcolor="";
-	switch(thm[0])
-	{
-		case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
-		case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
-		case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
-		case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
-	}
-	document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
-}
-</script>
 <h1><a href="/">Chrisoft</a>::Ballance</h1>
 <h2>Back and Forth - A Lucid Dream</h2>
 <h2>彷徨梦</h2>
diff --git a/ballance/levels/lucid/index_zh.html b/ballance/levels/lucid/index_zh.html
index 4840cc4..b386e6c 100644
--- a/ballance/levels/lucid/index_zh.html
+++ b/ballance/levels/lucid/index_zh.html
@@ -14,48 +14,12 @@
 <link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
 <link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
 <link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
+<script type="text/javascript" src="/themer.js"></script>
 <style>
 h1, h2 {font-weight: normal;}
 </style>
 </head>
 <body onload="loadTheme();" class="TText">
-<script>
-function getcookie(key)
-{return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}
-function loadTheme(){
-	var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
-	if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
-	var ent="";
-	var d=new Date();
-	if(thm[0]=='z')
-	{
-		var m=d.getMonth()+1;
-		if(m>=3&&m<6)thm='0'+thm[1];
-		else if(m>=6&&m<9)thm='1'+thm[1];
-		else if(m>=9&&m<12)thm='2'+thm[1];
-		else thm='3'+thm[1];
-	}
-	if(thm[1]=='z')
-	{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
-	ent=`theme${thm}`;
-	var R=new RegExp('theme[0-4][ab]');
-	for(var i=0;i<document.styleSheets.length;++i)
-	{
-		if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
-		document.styleSheets[i].disabled=true;
-		else document.styleSheets[i].disabled=false;
-	}
-	var thmcolor="";
-	switch(thm[0])
-	{
-		case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
-		case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
-		case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
-		case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
-	}
-	document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
-}
-</script>
 <h1><a href="/">Chrisoft</a>::Ballance</h1>
 <h2>Back and Forth - A Lucid Dream</h2>
 <h2>彷徨梦</h2>
diff --git a/index.html b/index.html
index d3cf655..e64f606 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@ Contents are licensed under the CC BY-SA 4.0 license.
 -->
 <body onload="swonload();">
 <script type="text/javascript" src="panel.js"></script>
+<script type="text/javascript" src="themer.js"></script>
 <script type="text/javascript">
 function changeImage(a,b){
 	document.getElementById(a).style.display='inline';
@@ -54,43 +55,6 @@ function changeTheme(a,b){
 	document.cookie=`thm=${thm};max-age=126144000`;
 	loadTheme();
 }
-function loadTheme(){
-	var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
-	if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
-	var tbtn=document.getElementById('themesw').querySelectorAll('a');
-	tbtn.forEach(function(a){a.style.borderBottomColor='rgba(255,255,255,0)'});
-	document.getElementById(`ts${thm[0]}`).style.borderBottomColor='#FFF';
-	document.getElementById(`tt${thm[1]}`).style.borderBottomColor='#FFF';
-	var ent="";
-	var d=new Date();
-	if(thm[0]=='z')
-	{
-		var m=d.getMonth()+1;
-		if(m>=3&&m<6)thm='0'+thm[1];
-		else if(m>=6&&m<9)thm='1'+thm[1];
-		else if(m>=9&&m<12)thm='2'+thm[1];
-		else thm='3'+thm[1];
-	}
-	if(thm[1]=='z')
-	{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
-	ent=`theme${thm}`;
-	var R=new RegExp('theme[0-4][ab]');
-	for(var i=0;i<document.styleSheets.length;++i)
-	{
-		if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
-		document.styleSheets[i].disabled=true;
-		else document.styleSheets[i].disabled=false;
-	}
-	var thmcolor="";
-	switch(thm[0])
-	{
-		case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
-		case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
-		case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
-		case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
-	}
-	document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
-}
 function toggleblkdisplay(e){
 	var E=document.getElementById(e);
 	E.style.display=E.style.display=='none'?'block':'none';
diff --git a/libs/music/player b/libs/music/player
index ba4469d..6f5b4d8 100644
--- a/libs/music/player
+++ b/libs/music/player
@@ -19,44 +19,7 @@
 	<link rel=stylesheet href="/libs/music/player.d/styles.css" type="text/css">
 	<script type="text/javascript" src="/libs/music/player.d/main_static.js"></script>
 	<script type="text/javascript" src="/panel.js"></script>
-	<script type="text/javascript">
-		var athm;
-		function loadTheme(){
-			var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
-			if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
-			var ent="";
-			var d=new Date();
-			if(thm[0]=='z')
-			{
-				var m=d.getMonth()+1;
-				if(m>=3&&m<6)thm='0'+thm[1];
-				else if(m>=6&&m<9)thm='1'+thm[1];
-				else if(m>=9&&m<12)thm='2'+thm[1];
-				else thm='3'+thm[1];
-			}
-			if(thm[1]=='z')
-			{if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
-			athm=thm[1]=='a'?0:1;
-			ent=`theme${thm}`;
-			var R=new RegExp('theme[0-4][ab]');
-			for(var i=0;i<document.styleSheets.length;++i)
-			{
-				if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
-				document.styleSheets[i].disabled=true;
-				else document.styleSheets[i].disabled=false;
-			}
-			var thmcolor="";
-			switch(thm[0])
-			{
-				case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
-				case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
-				case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
-				case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
-			}
-			document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
-		}
-		loadTheme();
-	</script>
+	<script type="text/javascript" src="/themer.js"></script>
 </head>
 <!--
 The Stupid Online Player
diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js
index fe30cca..51f7243 100644
--- a/libs/music/player.d/main_static.js
+++ b/libs/music/player.d/main_static.js
@@ -547,7 +547,7 @@ NSVisualization={
             NSAudio.anlznode.getByteTimeDomainData(timedomv);
             cctx.lineWidth=window.devicePixelRatio;
             cctx.strokeStyle='#000';
-            if(athm)cctx.strokeStyle='#FFF';
+            if(isDarkTheme)cctx.strokeStyle='#FFF';
             cctx.beginPath();
             for(let i=0,x=0;i<this.nbins;++i)
             {
@@ -572,7 +572,7 @@ NSVisualization={
             cctx.clearRect(this.spectgrmp/this.spectgrmw*canvas.width,0,canvas.width/this.spectgrmw,canvas.height);
             for(let i=0;i<this.nbins;++i)
             {
-                let color=(athm?'rgba(255,255,255,':'rgba(0,0,0,')+freqdomv[i]/256.+')';
+                let color=(isDarkTheme?'rgba(255,255,255,':'rgba(0,0,0,')+freqdomv[i]/256.+')';
                 cctx.fillStyle=color;
                 cctx.fillRect(this.spectgrmp/this.spectgrmw*canvas.width,(this.nbins-i)/this.nbins*canvas.height,canvas.width/this.spectgrmw,canvas.height/this.nbins);
             }
@@ -693,6 +693,7 @@ NSInk={
 function init()
 {
     if(!window.devicePixelRatio)window.devicePixelRatio=1;
+	loadTheme();
     NSUI.setup_ui();
     NSUI.load_playlists()
     .then(()=>{
diff --git a/themer.js b/themer.js
new file mode 100644
index 0000000..b17f245
--- /dev/null
+++ b/themer.js
@@ -0,0 +1,46 @@
+var isDarkTheme=false;
+function loadTheme(){
+	var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
+	if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
+	if(document.getElementById('themesw'))
+	{
+		var tbtn=document.getElementById('themesw').querySelectorAll('a');
+		tbtn.forEach(function(a){a.style.borderBottomColor='rgba(255,255,255,0)'});
+		document.getElementById(`ts${thm[0]}`).style.borderBottomColor='#FFF';
+		document.getElementById(`tt${thm[1]}`).style.borderBottomColor='#FFF';
+	}
+	var ent="";
+	var d=new Date();
+	if(thm[0]=='z')
+	{
+		var m=d.getMonth()+1;
+		if(m>=3&&m<6)thm='0'+thm[1];
+		else if(m>=6&&m<9)thm='1'+thm[1];
+		else if(m>=9&&m<12)thm='2'+thm[1];
+		else thm='3'+thm[1];
+	}
+	if(thm[1]=='z')
+	{
+		if(window.matchMedia&&matchMedia('(prefers-color-scheme:dark)')&&matchMedia('(prefers-color-scheme:dark)').matches)
+			thm=thm[0]+'b';
+		else {if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
+	}
+	if(thm[1]=='b')isDarkTheme=true;
+	ent=`theme${thm}`;
+	var R=new RegExp('theme[0-4][ab]');
+	for(var i=0;i<document.styleSheets.length;++i)
+	{
+		if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
+		document.styleSheets[i].disabled=true;
+		else document.styleSheets[i].disabled=false;
+	}
+	var thmcolor="";
+	switch(thm[0])
+	{
+		case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
+		case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
+		case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
+		case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
+	}
+	document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
+}
author	Chris Xiong <chirs241097@gmail.com>	2020-08-04 19:03:55 +0800
committer	Chris Xiong <chirs241097@gmail.com>	2020-08-04 19:03:55 +0800
commit	6a765f3e8509fb62c9c6d381b57b5964b461f4b8 (patch)
tree	04a0647bbd4d2c29bfc1d9c97628fb6e6c16d6aa
parent	24f3ab15a9c0b3a95d63390561d9e8efea05fc06 (diff)
download	web-6a765f3e8509fb62c9c6d381b57b5964b461f4b8.tar.xz