Customized default theme interferes with other themes

[boxfries]

When customizing the default theme, adding new CSS properties causes these to "leak" through to other themes when their properties aren't set. This is because the default theme is persistent, and always loads regardless of which theme is selected.

Header styling from default theme leaking through to "Deep" theme.

I found a solution by adding "disabled" to the default CSS theme when changing themes, and removing it when switching back to each html file under themes. But I don't know if it's good code. (I only know some HTML/CSS)

	<link rel="stylesheet" href="<% echo(skindir) %>css/mono_main.css?v=1.1" id="css0">
	<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dev.css" id="css1" disabled>
	<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dark.css" id="css2" disabled>
	<link rel="stylesheet" href="<% echo(skindir) %>css/mono_deep.css" id="css3" disabled>
	<link rel="stylesheet" href="<% echo(skindir) %>css/mono_mayo.css" id="css4" disabled>

<script>
	var colorIdx = GetCookie("colorIdx");
		switch (Number(colorIdx)) {
		case 0:
			document.getElementById("css0").removeAttribute("disabled");
			break;
		case 1:
			document.getElementById("css1").removeAttribute("disabled");
			document.getElementById("css0").setAttribute("disabled", "");
			break;
		case 2:
			document.getElementById("css2").removeAttribute("disabled");
			document.getElementById("css0").setAttribute("disabled", "");
			break;
		case 3:
			document.getElementById("css3").removeAttribute("disabled");
			document.getElementById("css0").setAttribute("disabled", "");
			break;
		case 4:
			document.getElementById("css4").removeAttribute("disabled");
			document.getElementById("css0").setAttribute("disabled", "");
		break;
} 

[satopian]

When customizing the default theme, adding new CSS properties causes these to "leak" through to other themes when their properties aren't set.

Intentionally, I'm always loading the main css.
Avoid the situation where css is not loaded due to read delay by Javascript.
Also, when Javascript is not valid, the main css is read.
However, if you want it to load only when the main css is selected, you can write:

		<!-- Disable all css once. -->
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_main.css" id="css0" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dev.css" id="css1" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dark.css" id="css2" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_deep.css" id="css3" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_mayo.css" id="css4" disabled>	
	<script>
		// Select the css you want to enable from the css you have disabled.
		var colorIdx = GetCookie("colorIdx");
			switch (Number(colorIdx)) {
			case 0:
				document.getElementById("css0").removeAttribute("disabled");
				break;
			case 1:
				document.getElementById("css1").removeAttribute("disabled");
				break;
			case 2:
				document.getElementById("css2").removeAttribute("disabled");
			break;
			case 3:
				document.getElementById("css3").removeAttribute("disabled");
			break;
			case 4:
				document.getElementById("css4").removeAttribute("disabled");
			break;
		} 
		function SetCss(obj){
			var idx = obj.selectedIndex;
			SetCookie("colorIdx",idx);
			window.location.reload();
		}
		function GetCookie(key){
			var tmp = document.cookie + ";";
			var tmp1 = tmp.indexOf(key, 0);
			if(tmp1 != -1){
				tmp = tmp.substring(tmp1, tmp.length);
				var start = tmp.indexOf("=", 0) + 1;
				var end = tmp.indexOf(";", start);
				return(decodeURIComponent(tmp.substring(start,end)));
				}
			return("");
		}
		function SetCookie(key, val){
			document.cookie = key + "=" + encodeURIComponent(val) + ";max-age=31536000;";
		}
	</script>
	<noscript>
		//Css for when Javascript is not valid
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_main.css">
	</noscript>

Disable all css once.
From there, select the css you want to enable.
Traditionally, main css is always valid, but this code also disables it.
<noscript>
Set the css to be read when Javascript is invalid in the place of.

[boxfries]

Thanks for the quick reply! I gave the script a quick test.

Avoid the situation where css is not loaded due to read delay by Javascript.

Indeed, the script above causes this when loading the page for the first time. (disabled CSS is loaded first?)
I wonder if there's a way to avoid this while disabling the main theme with other themes.

The script I use avoids the initial problem, but bare HTML can be seen for a split second depending on the complexity of the CSS. I managed to avoid this by removing empty urls in background-image properties. But I don't know how robust this is...

Thanks so much again.

[satopian]

		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_main.css" id="css0">
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dev.css" id="css1" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dark.css" id="css2" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_deep.css" id="css3" disabled>
		<link rel="stylesheet" href="<% echo(skindir) %>css/mono_mayo.css" id="css4" disabled>	
	<script>
		// Select the css you want to enable from the css you have disabled.
		var colorIdx = GetCookie("colorIdx");
			switch (Number(colorIdx)) {
			case 1:
				document.getElementById("css1").removeAttribute("disabled");
				document.getElementById("css0").disabled = true;
				break;
			case 2:
				document.getElementById("css2").removeAttribute("disabled");
				document.getElementById("css0").disabled = true;
			break;
			case 3:
				document.getElementById("css3").removeAttribute("disabled");
				document.getElementById("css0").disabled = true;
			break;
			case 4:
				document.getElementById("css4").removeAttribute("disabled");
				document.getElementById("css0").disabled = true;
			break;
		} 

Does not disable the main CSS.
Then when you select another css, disable the main css.
What about this code?

With this method, the main css will be loaded preferentially. And when another css is selected, the main css is not loaded.

[boxfries]

The code works well, thank you! I'll try using this.

bare HTML can be seen for a split second depending on the complexity of the CSS.
This problem still exists like the first code. But I can easily fix it by removing empty URLs from the background-image property. Maybe it's just an issue of malformed CSS.

Appreciate all the help!

[satopian]

I saw the POTI-board on your site.
I saw the pull-down menu for selecting the theme color increased to two.
Since there are two IDs, to select with the selected color
I think I need one more line of JavaScript code.

colorIdx=GetCookie('colorIdx');
document.getElementById("mystyle").selectedIndex=colorIdx;
//for ID mystyle1
document.getElementById("mystyle1").selectedIndex=colorIdx;

Soon, i'll push a theme to GitHub that addresses the double-tap zoom issue.
Please diff check.

[boxfries]

Thanks for checking up! I was definitely breaking something but I had no idea what it was.

Also I noticed the earlier issue

bare HTML can be seen for a split second depending on the complexity of the CSS.

has sadly come back at full force. Whenever a theme gets switched from default, and loading different pages the bare HTML can be seen for a second or less. I'm not sure what's causing it, because it's happening with original themes as well. I'm assuming the javascript is disabling the default css fine, but reading lines and loading css causes some delay. I also tried the old script, but it's loading the default style first for a second instead.

I did some searching and there's a script that can make a full replacement of "<link rel". Maybe this could help, but I'm not sure how to do it with many styles (0 javascript knowledge).
https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page

[satopian]

newlink.setAttribute("href", cssFile);
Replacing css filenames is not a good idea.
There is a security vulnerability there.
At the moment, the one I've decided to be the best is the JavaScript I'm using right now.

[boxfries]

Got it, thanks for the heads up. I don't know how but the latest javascript change seems to have improved it, or maybe it's just the server delay.

I'd like to provide these themes for Potiboard, but I wonder what's the best way to implement it? I was thinking a seperate theme folder and changing the config file.

[satopian]

Decide a new folder name and put it together there.
After that, where and how to distribute the theme.
Personal site?
GitHub?
With GitHub, i can request what I want to fix, such as by pull request.
Will I receive it in a zip and do further maintenance?
Hmmm.
It's a very good theme, so I'd like to use a part of css, but since I'm using scss for development, it may be necessary to switch back to scss once.

If boxfries-san manages it on GitHub, you can pull request only the important changes.
What is the best ...
i can't say anything until you ask how you want to distribute the theme.

[boxfries]

Hmm, this is a lot more complex than I thought! I'm very unfamiliar with github and pull requests, so I worry about holding back development. I'd prefer to give you the the files and let you do as you please with it.

I can try setting it up on github and add changes when I feel like it, and you can do with them as you please (or I can add things if anything needs to be fixed). I'm not sure about licenses, I believe part of the css was based on sakots-san's themes, so I want to make sure proper credits are given.

Let me know what works best for you.

[satopian]

I wouldn't be burdened if I could get you to support and maintain this theme on GitHub.
However, if you can't create and manage a repository on GitHub, i can just receive the file.
For example, you can just upload and attach the zip to the attach files in this comment section.
However, it is unclear how long and how much we can support.
However, the color scheme of the theme I got is better than the English theme I'm distributing now, so I'd like to somehow rewrite it in sass format so that I can manage it.
This is an example of description by sass.
poti-EVO-themes/mono_dark.scss at main · sakots/poti-EVO-themes

@charset "UTF-8";
/*! =====このcssファイルはsassから生成されています。===== */

//設定ファイルの読み込み
@import "mono_dark_conf";
@import "mono";

[satopian]

配布/素材 - ドラ☆クロウ！オリジナルイラスト中心よろずサイト -
It is also possible to distribute it on a personal site like this theme called 'COOL SOLID'.
The only reason I hesitate is that I am updating several Japanese themes, English themes, and Chinese themes by myself, so the amount of work will increase as the number of English themes increases.

[satopian]

It would be helpful if the person who created the theme manages it for himself.
And when you do that on GitHub,
Create a pull request when you find a problem or want to change it.
The changes take effect when merged by the theme administrator.
This is a theme-only repository issue, so
It is separate from the development of the entire POTI board.
It's okay if the theme pull request and merge are delayed.
The POTI-board theme that I already manage will be developed separately.