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

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>

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

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

Подписаться 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, Вот и я столкнулся с аналогичной задачей. Попробовал применить ваше решение, но что-то пошло не так. Вот тут описал проблему: Как исправить ошибку в подмене стилей на сайте?

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

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

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

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

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

Войти через центр авторизации

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

CSS

Средний
Не работают переносы слов (CSS hyphens) в OPERA. В чём может быть проблема?
- 1 подписчик
- 7 минут назад
- 5 просмотров
0

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

+4 ещё

Простой
Не могу на Github спрятать файлы в gitignore, чтобы заходя на мой репозиторий не видели файлы проекта но могли открыть проект (сайт) по ссылке?
- 1 подписчик
- 2 часа назад
- 55 просмотров
1

ответ
Python

+4 ещё

Простой
Aiogram, ERROR Yellow code, aiogram.types.web_app_info not imported?
- 1 подписчик
- 4 часа назад
- 43 просмотра
1

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

Простой
Как обойти блокировку просмотра видео?
- 1 подписчик
- 6 часов назад
- 67 просмотров
3

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

+1 ещё

Простой
Для чего такие сайты?
- 1 подписчик
- 11 часов назад
- 151 просмотр
3

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

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- 14 часов назад
- 74 просмотра
1

ответ
HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 17 часов назад
- 55 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 18 часов назад
- 182 просмотра
1

ответ
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 21 час назад
- 108 просмотров
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 23 часа назад
- 43 просмотра
1

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

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

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Настроить рекламу в VK

20 апр. 2024, в 13:56

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

Настроить рекламу в Авито

20 апр. 2024, в 13:52

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

Помочь с запуском бота

20 апр. 2024, в 13:23

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

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

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

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

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

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

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

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

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