Задать вопрос

Как правильно реализовать смену на тёмную тему?

Есть код смены на тёмное оформление, которое задействуется после нажатия соответствующей кнопки. Так-то реализовал через php, могу сделать через javascript. Проблема в том, что нужно также менять метатег.
<meta name="theme-color" content="#ff0000">
как лучше всего это сделать?

через js делал, даже без jquery, но наблюдается проблема мерцания, скрипт срабатывает не сразу и не важно, где его размещать, в начале или в конце, только кеш cms спасает. других вариантов нет? Можно на пхп, сделать, тогда мерцаний не будет.

php
$dark_mode_auto = false;
if( preg_match('#auto-dark-mode\|#i', $member_id['xfields']) ) {
  	$dark_mode_auto = true;
} 

if( $dark_mode_auto ) {
  
  	$a_hour = langdate( "G", $_TIME );

  	if( $a_hour >= 0 AND ($a_hour > 20 OR $a_hour < 6) ) {
		$theme_class = 'darkstyle';
  	} else $theme_class = '';
  	$tpl->set_block ( "'\\[dark-mode-auto\\](.*?)\\[/dark-mode-auto\\]'si", "" );
  
} else {
  
    if( isset($_COOKIE['theme-class']) AND $_COOKIE['theme-class'] == 'darkstyle' ) {
      $theme_class = totranslit($_COOKIE['theme-class']);
      $night_mode = " checked";
    } else { $theme_class = ""; $night_mode = ""; }

    $tpl->set ( '{night-mode}', $night_mode );
    $tpl->set( '[dark-mode-auto]', "" );
    $tpl->set( '[/dark-mode-auto]', "" );
  
}

$tpl->set ( '{theme-class}', $theme_class );


js
const mtThemeColor = document.querySelector('meta[name="theme-color"]');
if(document.cookie.includes("theme-class=darkstyle")){
	mtThemeColor.setAttribute('content', '#1a1e29');
}
function changeTheme() {
	setTimeout(function(){	
		if( $('body').hasClass('darkstyle') ) {
			$('body').removeClass('darkstyle');
			setcookie('theme-class', 'light');
			mtThemeColor.setAttribute('content', '#29a075');
		} else {
			$('body').addClass('darkstyle');
			setcookie('theme-class', 'darkstyle');
			mtThemeColor.setAttribute('content', '#1a1e29');
		}
	}, 16);
	
}
  • Вопрос задан
  • 897 просмотров
Подписаться 4 Простой 24 комментария
Решения вопроса 1
@arturka_v_10
сделайте чтение из куки до создания этого мета тега и если кука есть, проверьте ее на php далее ее значение подставляйте в тег. Будет вам счастье. Кривой пример на подумать:

<?
$cookieColor = isset($_COOKIE['theme']) ? intval($_COOKIE['theme']) : 0; // ожидает передачи в куку theme - числа
$colorTheme = $cookieColor < 1 ? '#000' : '#fff';
?>
<meta name="theme-color" content="<?=$colorTheme?>" />
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы