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

Question

[Aison]

Есть код смены на тёмное оформление, которое задействуется после нажатия соответствующей кнопки. Так-то реализовал через 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);
	
}

Comments

[modelair]

собственно, где код ?

[Aison]

modelair, добавил в пост

[modelair]

Aison, php к мерцаниям отношения не имеет. различия в браузерном коде. найдите их.
вообще, вы довольно странным способом взялись менять тему.
meta theme-color не для этого. попробуйте воспроизвести мерцание в песочнице

[Aison]

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

пхп же наоборот позволяет сделать всё гладко, но мне не хотелось бы ради одног метатега делать это на стороне бэка. да и смена темы через пхп весьма хороша, чего тут странного. довольно просто и эффективно)

[modelair]

Aison, так вы же это сами и написали. "если сделать на пхп - мерцаний не будет". мерцает браузер? в браузере только html и js и что такое php он не знает

[Aison]

modelair, мерацния это момент смены со светлой на тёмный. допустим, у меня цвет белый. я нажал на кноку и тема сменилась на тёмную. обновил странцу и увидел, что метатег, который окрашивает шторку браузера сначала показывает светлую тему (белым цветом) а потом, когда скрипт сработал после этой перезагрузки она стало тёмной. т.е. скрипт не сразу меняет цвета, есть секунда и это то самое мерцание... надеюсь поняли иначе придётся показывать видео

[modelair]

Aison, я понял, но так проблему не задетектишь. надо песочницу.
а что такое setcookie? точно не нативная js-функция

[Aison]

modelair, это функция пхп. setcookie - отправляет cookie

[modelair]

Aison, ну, да. что она делает в js-коде, если это функция php?

[Aison]

modelair, в смысле? она и в js есть)

[modelair]

Aison, нету :)

[Aison]

modelair, это пользовательская функция, котрую я могу юзать)

[modelair]

Aison, ну вот, ее бы тоже посмотреть, в таком случае

[Aison]

modelair, функция принимает имя, и дату, когда печенька помрёт. альтернативный вариант document.cookieи setCookie()

[Aison]

modelair, дак а что её смотреть?) код я скинул в посте. это весь код, не считая простенького html.

проблема только в этом

const mtThemeColor = document.querySelector('meta[name="theme-color"]');
if(document.cookie.includes("theme-class=darkstyle")){
	mtThemeColor.setAttribute('content', '#1a1e29');
}

я Вас не пойму... у меня с пхп нет проблем, там всё работет. мне просто нужно в метатеги менять цвет панельки браузера при смене на тёмную тему. всё это работает, но когда я обновляю страницу, то код не сразу срабатывает от того можно на долю секунды видеть светлый цвет панельки браузера. зайдите сюда с смартфона, смените на тёмную тему и пообновляйте страницу и увидете проблему.

[modelair]

Aison, увидел, ага.

[Aison]

modelair, а у меня андро и там это есть. каждый раз видно. и у большинства тоже андро) так что это проблема имеет место быть( и я думаю проблема в реализации... придётся делать на пхп значит, чтобы там тоже менялся цвет... других вариантов не вижу пока что, но может кто-то подскажет)

[modelair]

Aison, ваши данные генерирует php, верно? тоесть, рисует тег meta именно php, и первое что он делает - рисует его со светлой темой, которая меняется уже на клиенте. рисуйте нужное значение сразу на сервере

[Aison]

modelair, нет. этот тег есть в html файле, пхп его не рисует. и там стоит сетлая тема. пхп переключает на тёмну тему. а там жс код есть, который делает проверку на куки и если они стоят от тёмной, то срабатывает условие js и цвет в метатеге заменяется на тёмный. это на стороне клиента уже всё. js медленно это делает. а нужно быстро, сразу. если кеш в cms включить, то проблемы нет, но это не выход. точнее выход, но запасной)

[modelair]

Aison, хоспаде, все мы понять друг друга не можем. а html откуда? он готовый и статичный? обычно это дело генерируется на php

[Aison]

modelair, статичный

[Виталий Першин]

А в чем собственно проблема то? На php пусть будет, раз это решает все проблемы, тем более это самый быстрый вариант определить тему.

Если прям очень хочется на js, то самый быстрый вариант это инлайново прямо в шапке задать условие во время чтения документа, что-то вроде этого:

<script>
            if (cookie === "bla-bla-bla") {
                document.write('<meta name="theme-color" content="#fff" />');
            } else {
                document.write('<meta name="theme-color" content="#000" />');
            }
        </script>

[Артур]

сделайте чтение из куки до создания этого мета тега и если кука есть, проверьте ее на php далее ее значение подставляйте в тег. Будет вам счастье.

<?
$cookieColor = isset($_COOKIE['theme']) ? $_COOKIE['theme'] : '#000';
// но вам стоит проверять $_COOKIE['theme'] какой-либо регуляркой дабы быть беспечным :)
?>
<meta name="theme-color" content="<?=$cookieColor?>" />

[Aison]

Спасибо за ответы) сделал через php

Answer 1

[Артур]

сделайте чтение из куки до создания этого мета тега и если кука есть, проверьте ее на php далее ее значение подставляйте в тег. Будет вам счастье. Кривой пример на подумать:

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

Comments

[Aison]

всё проще) немного доработал код в этой части (точнее в двух). но всё равно спасибо, отмечу решением за проявленное внимание

if( $a_hour >= 0 AND ($a_hour > 20 OR $a_hour < 6) ) {
        $theme_class = 'darkstyle';
        $theme_color = '#000000'; 
    } else {
        $theme_class = '';
        $theme_color = '#29a075'; 
    }

[Ипатьев]

$cookieColor = intval($_COOKIE['theme'] ?? 0);
Ну или кстати в одну строку
$colorTheme = empty($_COOKIE['theme']) ? '#000' : '#fff';

[Ипатьев]

Aison, святая вера в то, что все пользователи живут в одном часовом поясе )))

[Aison]

Ипатьев, можно и тернарные операторы заюзать) но мне и мой вариант норм. да почему, я и до вечера мог подождать и даже до следующего дня) вряд ли что-то особое предложат. сделал вот через пхп и всё прекрасно)

[Ankhena]

Ипатьев, нет, что у них закат и рассвет в одинаковое время

[Артур]

Aison,

$init_c = $a_hour >= 0 && ($a_hour > 20 || $a_hour < 6) ? 1 : 0;
$theme_class = $init_c>0 ? 'darkstyle' : '';
$theme_color = $init_c>0 ? '#000000' : '#29a075';

[Ипатьев]

Aison, при чем здесь подождать до следующего дня? Пользователи вашего сайта

[Aison]

Ипатьев, да я хз вообще о чём речь...

[Ипатьев]

Aison, вы вообще в курсе, что такое часовой пояс? А что пользователи сайта могут жить в разных частях земного шара?

[Wispik]

Aison, у тебя смена темы зависит от времени сервера.
И если на твой сайт зайдет человек с другим часовым поясом, то у них это все будет работать не корректно.
Это я так, просто объяснил, что тебе выше пытаются донести

[Aison]

Wispik, это просто возможный вариант использование кода. т.е. это как бы плагин для cms. я использую вторую часть кода, где тема меняется по требованию, а это нажатие на кнопку смены.

[Aison]

Ипатьев, я в курсе)

[Ипатьев]

Aison, и какую тему увидит пользователь из Хабаровска, когда в датацентре в Москве будет ночь?

[Aison]

Ипатьев, какая стоит по умолчанию, а если ему нужна будет тёмная, то нажатием кнопки изменит на тёмную

[Aison]

Wispik, и я не оч понимаю, зачем это делать, если вопрос был в другом... это не совсем мой код, но я знаю, что там происходит). я всё равно его уже переписал... ответы я тоже получил. и вопрос решён, но спасибо. можно было просто сразу сказать, а не намёками... я бы тогда сразу сказал, что всё ок и не стоит переживать) я ж мог просто скинуть заготовку кода, который не совсем готов.