add theme switcher
This commit is contained in:
48
index.html
48
index.html
@@ -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 charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="description" content="Основная информация о подписке и способах подключения">
|
<meta name="description" content="Основная информация о подписке и способах подключения">
|
||||||
<link rel="icon" type="image/x-icon" href="https://google.com/pic.png">
|
<link rel="icon" type="image/x-icon" href="https://google.com/pic.png">
|
||||||
<title></title>
|
<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">
|
<script type="text/javascript">
|
||||||
|
|
||||||
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
|
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||||
if (localStorageTheme !== null) {
|
let currentThemeSetting = systemSettingDark.matches ? "dark" : "light";
|
||||||
return localStorageTheme
|
|
||||||
}
|
setTheme(currentThemeSetting)
|
||||||
if (systemSettingDark.matches) {
|
|
||||||
return "dark"
|
|
||||||
}
|
|
||||||
return "light"
|
|
||||||
}
|
|
||||||
|
|
||||||
function setTheme(newTheme) {
|
function setTheme(newTheme) {
|
||||||
document.documentElement.setAttribute('data-bs-theme', newTheme)
|
document.documentElement.setAttribute('data-bs-theme', newTheme)
|
||||||
localStorage.setItem("theme", newTheme);
|
|
||||||
currentThemeSetting = newTheme;
|
currentThemeSetting = newTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
const localStorageTheme = localStorage.getItem("theme");
|
systemSettingDark.addEventListener("change", (e) => {
|
||||||
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
|
setTheme(e.matches ? "dark" : "light");
|
||||||
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
|
});
|
||||||
|
|
||||||
setTheme(currentThemeSetting)
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -110,7 +101,7 @@
|
|||||||
<h2 class="accordion-header" id="flush-heading-apps-android">
|
<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>
|
<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>
|
</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">
|
<div class="accordion-body">
|
||||||
<h3>HAPP</h3>
|
<h3>HAPP</h3>
|
||||||
HAPP - рекомендуемое приложение для Android
|
HAPP - рекомендуемое приложение для Android
|
||||||
@@ -329,7 +320,7 @@
|
|||||||
<h2 class="accordion-header" id="flush-heading-help-2">
|
<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>
|
<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>
|
</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 class="accordion-body">
|
||||||
Подписка - это ссылка в специальном формате, по которой приложение загружает с сервера данные, необходимые для подключения.
|
Подписка - это ссылка в специальном формате, по которой приложение загружает с сервера данные, необходимые для подключения.
|
||||||
</div>
|
</div>
|
||||||
@@ -340,7 +331,7 @@
|
|||||||
<h2 class="accordion-header" id="flush-heading-help-3">
|
<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>
|
<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>
|
</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">
|
<div class="accordion-body">
|
||||||
Вам необходимо иметь баланс в нашем <a href="https://t.me/SecureWayVPN_Bot" target="_blank" class="link-dark" rel="noopener noreferrer">сервисе</a>, равный сумме подписки.
|
Вам необходимо иметь баланс в нашем <a href="https://t.me/SecureWayVPN_Bot" target="_blank" class="link-dark" rel="noopener noreferrer">сервисе</a>, равный сумме подписки.
|
||||||
</div>
|
</div>
|
||||||
@@ -524,7 +515,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme=dark] #toast {
|
[data-bs-theme=dark] #toast {
|
||||||
color: var(--bs-list-group-color)
|
color: var(--bs-list-group-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme=dark] svg {
|
[data-bs-theme=dark] svg {
|
||||||
@@ -532,8 +523,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-bs-theme=dark] *,
|
[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;
|
background-color: #181818;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -565,11 +555,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const buttonSwitchTheme = document.getElementById('btnSwitchTheme');
|
const buttonSwitchTheme = document.getElementById('btnSwitchTheme');
|
||||||
buttonSwitchTheme.checked = currentThemeSetting === 'dark';
|
if (buttonSwitchTheme) {
|
||||||
buttonSwitchTheme.addEventListener("click", () => {
|
buttonSwitchTheme.checked = currentThemeSetting === 'dark';
|
||||||
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
|
buttonSwitchTheme.addEventListener("click", () => {
|
||||||
setTheme(newTheme);
|
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
|
||||||
});
|
setTheme(newTheme);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const links = document.getElementsByClassName('self-link');
|
const links = document.getElementsByClassName('self-link');
|
||||||
Array.from(links).forEach(link => {
|
Array.from(links).forEach(link => {
|
||||||
|
|||||||
Reference in New Issue
Block a user