timka123/swhtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add theme switcher

Browse Source
This commit is contained in:
Timur Kh.
2026-03-31 21:40:27 +03:00
parent 534a135004
commit 1a9dd56cae
1 changed files with 20 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@@ -1,34 +1,25 @@
<html lang="ru" data-bs-theme="dark"><head>
<html lang="ru" data-bs-theme="light"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Основная информация о подписке и способах подключения">
<link rel="icon" type="image/x-icon" href="https://google.com/pic.png">
<title></title>
<!-- Set the theme at the very beginning, so as not to scare a user with a white screen while loading the page on slow devices -->
<script type="text/javascript">
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
if (localStorageTheme !== null) {
return localStorageTheme
}
if (systemSettingDark.matches) {
return "dark"
}
return "light"
}
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
let currentThemeSetting = systemSettingDark.matches ? "dark" : "light";
setTheme(currentThemeSetting)
function setTheme(newTheme) {
document.documentElement.setAttribute('data-bs-theme', newTheme)
localStorage.setItem("theme", newTheme);
currentThemeSetting = newTheme;
}
const localStorageTheme = localStorage.getItem("theme");
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
setTheme(currentThemeSetting)
systemSettingDark.addEventListener("change", (e) => {
setTheme(e.matches ? "dark" : "light");
});
</script>
@@ -110,7 +101,7 @@
<h2 class="accordion-header" id="flush-heading-apps-android">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-apps-android" aria-expanded="false" aria-controls="flush-collapse-apps-android">Android</button>
</h2>
<div id="flush-collapse-apps-android" class="accordion-collapse collapse" aria-labelledby="flush-heading-apps-android" data-bs-parent="#accordionApps" style="">
<div id="flush-collapse-apps-android" class="accordion-collapse collapse" aria-labelledby="flush-heading-apps-android" data-bs-parent="#accordionApps">
<div class="accordion-body">
<h3>HAPP</h3>
HAPP - рекомендуемое приложение для Android
@@ -329,7 +320,7 @@
<h2 class="accordion-header" id="flush-heading-help-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-help-2" aria-expanded="false" aria-controls="flush-collapse-help-2">Что такое подписка?</button>
</h2>
<div id="flush-collapse-help-2" class="accordion-collapse collapse" aria-labelledby="flush-heading-help-2" data-bs-parent="#accordionHelp" style="">
<div id="flush-collapse-help-2" class="accordion-collapse collapse" aria-labelledby="flush-heading-help-2" data-bs-parent="#accordionHelp">
<div class="accordion-body">
Подписка - это ссылка в специальном формате, по которой приложение загружает с сервера данные, необходимые для подключения.
</div>
@@ -340,7 +331,7 @@
<h2 class="accordion-header" id="flush-heading-help-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-help-3" aria-expanded="false" aria-controls="flush-collapse-help-3">Как продлить подписку?</button>
</h2>
<div id="flush-collapse-help-3" class="accordion-collapse collapse" aria-labelledby="flush-heading-help-3" data-bs-parent="#accordionHelp" style="">
<div id="flush-collapse-help-3" class="accordion-collapse collapse" aria-labelledby="flush-heading-help-3" data-bs-parent="#accordionHelp">
<div class="accordion-body">
Вам необходимо иметь баланс в нашем <a href="https://t.me/SecureWayVPN_Bot" target="_blank" class="link-dark" rel="noopener noreferrer">сервисе</a>, равный сумме подписки.
</div>
@@ -524,7 +515,7 @@
}
[data-bs-theme=dark] #toast {
color: var(--bs-list-group-color)
color: var(--bs-list-group-color);
}
[data-bs-theme=dark] svg {
@@ -532,8 +523,7 @@
}
[data-bs-theme=dark] *,
[data-bs-theme=dark] .subscription .list-group-item span,
{
[data-bs-theme=dark] .subscription .list-group-item span {
background-color: #181818;
}
@@ -565,11 +555,13 @@
}
const buttonSwitchTheme = document.getElementById('btnSwitchTheme');
buttonSwitchTheme.checked = currentThemeSetting === 'dark';
buttonSwitchTheme.addEventListener("click", () => {
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
setTheme(newTheme);
});
if (buttonSwitchTheme) {
buttonSwitchTheme.checked = currentThemeSetting === 'dark';
buttonSwitchTheme.addEventListener("click", () => {
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
setTheme(newTheme);
});
}
const links = document.getElementsByClassName('self-link');
Array.from(links).forEach(link => {