Правильная технология организации ночной темы для сайта?

Question

mrbykovoleg @mrbykovoleg

Правильная технология организации ночной темы для сайта?

Появилось желание организовать ночную тему для сайта, как выучить, так и добавить нужную фичу (если думать о посетителях сайта). Можно конечно добавить класс на body со стилями invert(100%), но тогда придется подгонять цвета под светлую тему и ночную, чтобы красиво всё смотрелось. Я в теории планирую выписать стили в отдельный theme-for-night.css и вставлять в head после основного css по клику на checkbox и убирать по второму клику. Вопрос: насколько это адекватный ход мыслей? Подскажите свои идеи по реализации данной фичи. Если какие-то прочтенные Вами статьи, форумы, и тд на эту тему?
---
Надеюсь, это кому-то пригодиться...

Этот код добавляет link после моего главного файла со стилями (3 позиция):

<script>
    function darkTheme()
    {
      var checkbox = document.getElementById('changeTheme'),
        newLink = document.createElement('link'), 
        head = document.getElementById('head'); 
      if(checkbox.checked){
        newLink.rel = "stylesheet";
        newLink.href = "theme-for-night.css";
        newLink.id = "link";
        head.insertBefore(newLink, head.children[3]); // 3 - позиция строки в родителе (head в моем случае)
      }else{
        link.remove(newLink); // убрал "child"
      }
    }
  </script>

	<div>
		<input type="checkbox" id="changeTheme" onclick="darkTheme()">
	</div>

Вопрос задан более трёх лет назад
440 просмотров

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

10 комментариев

mrbykovoleg @mrbykovoleg Автор вопроса

Ну т.е мой ход мыслей, а он схож с Вашими, адекватен со стороны веб разработки?

Написано более трёх лет назад
Талян @flapflapjack

mrbykovoleg, я бы сделал так. Я вроде адекватный. Иногда.

Написано более трёх лет назад
mrbykovoleg @mrbykovoleg Автор вопроса

Анатолий Цивилёв, Отлично, осталось изучить, как вставить строку после моего главного css файла

Написано более трёх лет назад
alex-1917 @alex-1917

Анатолий Цивилёв,
Я вроде адекватный

главное верить в себя!
)))

Написано более трёх лет назад

Талян @flapflapjack

mrbykovoleg, точно так же как и строку с главным файлом.

Время подстановки делайте на PHP или JS.

Реализация на PHP не очень хорошая идея, т.к. у клиента может быть другое время суток, отличное от серверного:

$startNight=21;
$endNight=7;
if(date("H") > $startNight || date("H") < $endNight)
{
	print "<link rel=\"stylesheet\" type=\"text/css\" href=\"/css/night.css\" />";
}

Лучше на JS

<head>

</head>
<script>
var date = new Date;
var hours = date.getHours();
var startNight = "21";
var endNight = "7";


if(hours >= startNight || hours <= endNight)
{
	var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = '/night.css';
    link.media = 'all';
    head.appendChild(link);
}
</script>

Написано более трёх лет назад

mrbykovoleg @mrbykovoleg Автор вопроса

Анатолий Цивилёв, я изучил некоторые уроки и вот, что получилось:

<div style="padding: 100px 0"> <!-- блок написал только для теста checkbox'a  -->
		<input type="checkbox" id="changeTheme" onclick="darkTheme()">
	</div>

<script>
		function darkTheme()
		{
			var checkbox = document.getElementById('changeTheme'), //my checkbox
				newLink = document.createElement('link'), // создаю link
				head = document.getElementById('head'); // получаю родителя (тег head)
			if(checkbox.checked){
				newLink.rel = "stylesheet";
				newLink.href = "theme-for-night.css"; // dark theme css file
				head.insertBefore(newLink, head.children[3]); // пишу на какую строчку вставить в родителе
			}else{
				//head.removeChild(newLink); ...1 вариант выдает ошибку
				newLink.parentNode.removeChild(newLink); //пытаюсь удалить строку если чекбокс не отмечен. Тоже выдает ошибку непонятную мне
			}
		}
	</script>

Написано более трёх лет назад

Талян @flapflapjack

mrbykovoleg,

Рад за вас. Ну выдаёт ошибку - так читайте ошибку. Они у вас для кого - для меня выводятся?

Вот, сделал вам:
В зависимости от времени суток устанавливается тема.
На галочку - меняется.
Вам домашнее задание - чекбоксу поставить галочку, если на дворе ночь.
Для этого в скрипте есть всё, абсолютно.
Нужно только добавить одну строку.

<div style="padding: 100px 0"> <!-- блок написал только для теста checkbox'a  -->
    <input type="checkbox" id="changeTheme">
  </div>
  
<script>
  
document.getElementById("changeTheme").onclick=function(){
    setNightCSS(this.checked);
}
  
document.addEventListener('DOMContentLoaded', function(){
var date = new Date;
var hours = date.getHours();
var startNight = "21";
var endNight = "7";
if(hours >= startNight || hours <= endNight)
	{
	setNightCSS(true);
	}
	else{
	setNightCSS(false);
	}
});




  
  function setNightCSS(night)
  {
	var nightCSS=document.getElementById('nightCSS');
	
	if(night && !nightCSS)
		{
		var head  = document.getElementsByTagName('head')[0];
		var link  = document.createElement('link');
		link.rel  = 'stylesheet';
		link.type = 'text/css';
		link.href = 'theme-for-night.css';
		link.media = 'all';
		link.id	=	'nightCSS';
		head.appendChild(link);
		}
		else
		{
		nightCSS ? nightCSS.remove() : true;
		}
}

 
  </script>

Написано более трёх лет назад

mrbykovoleg @mrbykovoleg Автор вопроса
Анатолий Цивилёв, Домашнее задание на завтра) Тем более хотел Вам отписаться, что у меня получилось всё. Изменил только две строчки:
<script> function darkTheme() { var checkbox = document.getElementById('changeTheme'), newLink = document.createElement('link'), head = document.getElementById('head'); if(checkbox.checked){ newLink.rel = "stylesheet"; newLink.href = "theme-for-night.css"; newLink.id = "link"; // добавил id head.insertBefore(newLink, head.children[3]); }else{ link.remove(newLink); // убрал "child" } } </script>

Спасибо, что уделили время для студента, но я не люблю готовые решения)
Хорошей ночи!
Написано более трёх лет назад
Талян @flapflapjack

mrbykovoleg, пожалуйста.

А спасибо тут принято вот так говорить:

Написано более трёх лет назад
Иван Медведев @mediol-name

mrbykovoleg, Вот и я столкнулся с аналогичной задачей. Попробовал применить ваше решение, но что-то пошло не так. Вот тут описал проблему: Как исправить ошибку в подмене стилей на сайте?

Ответит ли мне кто спустя год?

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

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

WordPress

+1 ещё

Сложный
Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?
- 1 подписчик
- 40 минут назад
- 26 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 20 часов назад
- 126 просмотров
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 90 просмотров
0

ответов
PHP

+3 ещё

Простой
Firefox больше не отправляет в HTTP_ACCEPT image/webp?
- 3 подписчика
- вчера
- 578 просмотров
2

ответа
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
Веб-разработка

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 22 нояб.
- 93 просмотра
1

ответ
Веб-разработка

+1 ещё

Простой
Какой отечественный linux выбрать для веб-разработки?
- 2 подписчика
- 22 нояб.
- 3342 просмотра
9

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Тестирование Desktop-приложение

24 нояб. 2024, в 21:19

35000 руб./за проект

Интеграция бэкэнда с фронтендом и доработка (react + next + laravel)

24 нояб. 2024, в 20:45

42000 руб./за проект

Сверстать веб приложение на vue

24 нояб. 2024, в 19:46

1000 руб./в час

Answer 1 · 2019-02-17 19:54:16

Если изменениям подвержены не все элементы, а часть, то можно просто сделать night.css и подключать его ночью. Соответственно в night.css только изменения.

Будет загружаться обычный файл стилей со шрифтами, паддингами, и т.д., а из night.css только цветовая схема перекроется.

Как мне кажется простейший и наиболее адекватный вариант.
Инверсию на весь документ вешать - АДъ!

Правильная технология организации ночной темы для сайта?

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

Минуточку внимания

Войдите на сайт