Я написал сценарий с использованием JavaScript, который позволяет мне определять предпочтительный цветовой режим пользователя и переключаться между светлым и темным режимами с помощью кнопки. Но все это нужно настраивать для каждой страницы.
Есть ли более простое решение для определения предпочтительного цветового режима и переключения между двумя режимами с помощью переключателя (кнопки)? Поскольку в CSS уже есть функция prefers-color-scheme, мне нужно только знать, как переключаться между светлым и темным режимами с помощью кнопки в качестве пользователя.
Вот мой текущий код, написанный на простом JS:
window.onload = detectTheme()
function detectTheme() {
// This detects the device color mode when the user enters the webpage
var theme = document.getElementById("theme");
// Get the ID from the link we want to change
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme.href = '/link/to/darkmode/file'
// Changing the file based on the color mode ("dark" file for dark-mode)
}
else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
theme.href = '/link/to/lightmode/file'
// Changing the file based on the color mode ("light" file for light-mode)
}
}
var switchLD = document.getElementById("switch");
// This is the ID from the switch button
switchLD.onclick = function toggleTheme() {
var theme = document.getElementById("theme");
// Checks what color-mode file is used
if (theme.getAttribute('href') == '/link/to/lightmode/file') {
theme.href = '/link/to/darkmode/file'
// Changing the file from light to darkmode
}
else if (theme.getAttribute('href') == '/link/to/darkmode/file') {
theme.href = '/link/to/lightmode/file'
// Changing the file from dark to lightmode
}
}
Any answer would help me a lot. If there is a solution using only CSS (or SCSS / SASS), I'd love to use it.
