Добрый день! Прошу помощи, необходимо написать переключатель тем с изменением ссылок на таблицы стилей c Код (Text): <link href="/css/light.css" rel="stylesheet"> на Код (Text): <link href="/css/dark.css" rel="stylesheet"> и Код (Text): <body data-theme="default"> с default на dark, чтобы браузер запоминал выбор пользователя. В сети находил примеры кода, но в php почти ничего не соображаю. Помогите пожалуйста)
Код (Text): <?php if ($_COOKIE['style'] == den){ #подключаем css } elseif ($_COOKIE['style'] == noch){ #подключаем css } else { setcookie('style', 'den', time()+60*60*24); header('Location: ?'); } if (isset($_GET['den'])) { setcookie('style', 'den', time()+60*60*24); header('Location: ?'); } elseif (isset($_GET['noch'])){ setcookie('style', 'noch', time()+60*60*24); header('Location: ?'); }
Добрый день! У Вашем в коде фотальные ошибки (не определены константы den и noch) д.б. PHP: if ($_COOKIE['style'] == "den"){ #подключаем css } elseif ($_COOKIE['style'] == "noch"){ #подключаем css } Откуда появятся $_GET['noch'] и $_GET['den'] если во всех случаях header('Location: ?') ? А где сам переключатель - по чему кликнуть чтоб перекличилась тема?
Добрый день! Чтобы сделать переключатель тем в html-коде должна быть кнопка и должно отрабатываться событие click в JS. Поэтому это задача может быть решена так: HTML: <html> <head> <meta charset="utf-8"> <link id="my_css" rel="stylesheet" href=""> </head> <body> <input type="button" id="switch" value=""> </body> <script> relLinkObj = document.getElementById("my_css"); switchObj = document.getElementById("switch"); temaL = "Tema light"; temaD = "Tema dark"; relLinkObj.setAttribute("href","css/dark.css"); tema = temaD; relLinkObj.setAttribute("href","css/dark.css"); switchObj.value = temaL; switchObj.addEventListener("click", () => { if(tema == temaD) { relLinkObj.setAttribute("href","css/light.css"); tema = temaL; text = temaD; } else { relLinkObj.setAttribute("href","css/dark.css"); tema = temaD; text = temaL; } switchObj.value = text; }); </script> </html> css/dark.css Код (CSS): body{background-color: black } css/light.css Код (CSS): body{background-color: white } Удачи!
>необходимо написать переключатель тем Неправильный подход. Современные браузеры имеют возможность изменять темы день/ночь на основе media запросов, чистый css. https://caniuse.com/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Могут то, они могут, но для этого пользователь должен менять настройки в браузерах. По-опыту общения с пользователями, понял, что многие не знают, то что необходимо делать, например, как почистить кэш и куки.
>но для этого пользователь должен менять настройки в браузерах. Не должен. По умолчанию браузер повторяет настройки системы в которой он стоит.
Простите, а от куда возьмутся эти настройки? Если пользователь не настроит систему, то и браузер будет стоять без них. Между прочим, тут предлагось использовать куки. Однако пользователь, по закону, может отказаться от них. Стоит ли учитывать то, что могут быть не установлены настройки системы и отключены куки?
(дополнение) Дороботал код. Добавил в JS метод для определения prefers-color-scheme. Если пользователь не изменял установки в системе или установил prefers-color-scheme: light, метод возвращает значение light, иначе значение dark. Страница запускается с color-scheme, которая была так определена. Для этой схемы динамически загружается css и определяется текст на кнопке переключателя тем. HTML HTML: <html> <head> <meta charset="utf-8"> <link id="my_css" rel="stylesheet" href=""> <script type="text/javascript" src="temesSwitch.js"></script> </head> <body> <input type="button" id="switch" value=""> </body> </html> JavaScript temesSwitch.js Код (Javascript): class themesSwitch{ constructor(idLink, idSwitch, cssPath){ this.relLinkObj = document.getElementById(idLink); this.switchObj = document.getElementById(idSwitch); this.themeL = "light"; this.themeD = "dark"; this.cssPath = cssPath; } setLinkHref = function(theme){ this.relLinkObj.setAttribute("href", this.cssPath + "/" + theme + ".css"); } setSwitchValue = function(theme){ this.switchObj.value = "Theme " + this.getAnotherTheme(theme); } getAnotherTheme = function(theme){ return theme == this.themeD?this.themeL:this.themeD; } getPrefersColorScheme = function(){ var prefersColorLight = window.matchMedia('(prefers-color-scheme: light)').matches; return prefersColorLight?this.themeL:this.themeD; } } window.addEventListener("load", () => { var ts = new themesSwitch("my_css", "switch", "css"); var theme = ts.getPrefersColorScheme(); ts.setLinkHref(theme); ts.setSwitchValue(theme); ts.switchObj.addEventListener("click", () => { theme = ts.getAnotherTheme(theme); ts.setSwitchValue(theme); ts.setLinkHref(theme); }); }); light.css Код (CSS): body{background-color: white } dark.css Код (CSS): body{background-color: black }