分享phpBB3 style 切換為行動裝置省電黑暗屏

[Brave Ye]

download prosilver_dark
https://www.phpbb.com/customise/db/styl ... lver_dark/
到管理控制台 > 自訂 > 啟用Prosilver (Dark Edition)
再下載https://www.phpbb.com/customise/db/extension/quickstyle/
到管理控制台 > 自訂 > 啟用quick style
建立新文件
nano /var/www/html/phpBB3/ext/avathar/quickstyle/styles/all/template/event/overall_header_page_body_before.html

Code: Select all

<div class="custom-quick-style-wrapper">
	<!-- 預設先放一個按鈕，後續用 JS 來動態決定它是太陽還是月亮 -->
	<a href="#" id="dynamic-style-toggle" class="style-toggle-btn" data-style-id="1" title="切換風格">
		<i id="style-toggle-icon" class="icon fa-sun-o fa-fw" aria-hidden="true"></i>
	</a>
</div>

<style>
/* 固定在網頁最左上角，手機版也強迫顯示 */
.custom-quick-style-wrapper {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 9999;
}

.style-toggle-btn {
	display: inline-block !important;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff !important;
	border-radius: 50%;
	font-size: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	transition: all 0.3s ease;
}

.style-toggle-btn:hover {
	background-color: rgba(0, 0, 0, 0.8);
	transform: scale(1.1);
}

/* 太陽（淺色模式）圖示顏色 */
.light-theme-active #style-toggle-icon { color: #f1c40f !important; } /* 點擊會變深色，所以目前是月亮 */
.dark-theme-active #style-toggle-icon { color: #ff9800 !important; }  /* 點擊會變淺色，所以目前是太陽 */
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
	// 請在此設定您論壇的真實 Style ID
	var prosilverID = "1";     // 淺色 prosilver 的 ID
	var prosilverDarkID = "15"; // 深色 prosilver_dark 的 ID

	var toggleBtn = document.getElementById('dynamic-style-toggle');
	var toggleIcon = document.getElementById('style-toggle-icon');

	// 1. 自動偵測目前是不是深色模式 (檢查網頁中是否有載入包含 prosilver_dark 的 CSS 檔案)
	var isDark = false;
	var stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
	stylesheets.forEach(function(sheet) {
		if (sheet.href && sheet.href.indexOf('prosilver_dark') !== -1) {
			isDark = true;
		}
	});

	// 2. 依據偵測結果，初始化按鈕外觀與要跳轉的 ID
	if (isDark) {
		// 目前是深色：顯示「太陽」圖示，點擊後要去「淺色 (prosilverID)」
		toggleIcon.className = "icon fa-sun-o fa-fw";
		toggleBtn.setAttribute('data-style-id', prosilverID);
		toggleBtn.setAttribute('title', '切換到淺色模式');
		document.body.classList.add('dark-theme-active');
	} else {
		// 目前是淺色：顯示「月亮」圖示，點擊後要去「深色 (prosilverDarkID)」
		toggleIcon.className = "icon fa-moon-o fa-fw";
		toggleBtn.setAttribute('data-style-id', prosilverDarkID);
		toggleBtn.setAttribute('title', '切換到深色模式');
		document.body.classList.add('light-theme-active');
	}

	// 3. 處理網址：如果網址列包含 style= 參數，立即將其移除（不重新整理網頁，保持網址乾淨）
	if (window.location.search.indexOf('style=') !== -1) {
		var cleanUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
		var params = new URLSearchParams(window.location.search);
		params.delete('style');
		if (params.toString()) {
			cleanUrl += '?' + params.toString();
		}
		if (window.location.hash) {
			cleanUrl += window.location.hash;
		}
		window.history.replaceState({path: cleanUrl}, '', cleanUrl);
	}

	// 4. 處理點擊切換事件
	if (toggleBtn) {
		toggleBtn.addEventListener('click', function(e) {
			e.preventDefault();
			var targetStyleId = this.getAttribute('data-style-id');
			var currentParams = new URLSearchParams(window.location.search);
			currentParams.set('style', targetStyleId);
			window.location.href = window.location.pathname + '?' + currentParams.toString() + window.location.hash;
		});
	}
});
</script>

// 請在此設定您論壇的真實 Style ID
var prosilverID = "1"; // 淺色 prosilver 的 ID
var prosilverDarkID = "15"; // <---深色 prosilver_dark 的 ID

查詢phpbb3 style id 在瀏覽器最下面狀態列最末id=??

2026-09-27 09-39-12 的螢幕擷圖.png