Как добавить переключатель светлой/тёмной темы на сайт?

@Кирилл Саратов · Регистрация: 15.11.2017

Author24 — интернет-сервис помощи студентам

Здравствуйте,ест сайт , но возник такой вопрос,как добавить на сайт возможность менять темы оформления? Что для этого нужно добавить в имеющийся код? Нужно реализовать именно на JS, но я в нем очень слаб.Помогите пожалуйста нужен именно код.
Вот код главной страницы:

PHP/HTML    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ТСЖ "Пробуждение"</title>
  <link rel="stylesheet" href="D:\Winginx\home\localhost\public_html\Ignatjev\style.css" type="text/css" />
  <link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <style>
.imagepov
{
transform: rotate(90deg);
} 
</style>
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
      <!-- Шапка сайта -->
        <div id="head-site">
            <a href="\Ignatjev\index.php"><img src="\Ignatjev\Images\logo.png" alt="ТСЖ Пробуждение"" title= " ТСЖ Пробуждение " /></a>
            <img src= "\Ignatjev\Images\tel.png" alt="+7 (986) 987-26-65" title="+7 (986) 987-26-65" class="telefon" /> <p  class = "telefon" align = "right"   style=" color :#8fbc8f" font size = "2" > +7 (986) 987-26-65 </p>
        </div>
    <!-- Верхнее меню сайта -->
    <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="\Ignatjev\o-tsj.html">О ТСЖ</a></li>
            <li><a href="\Ignatjev\Documents.html">Документация</a></li>
            <li><a href="\Ignatjev\requisites.html">Реквизиты</a></li>
            <li><a href="\Ignatjev\as.html">АС</a></li>
            <li><a href="\Ignatjev\pokazaniya.html">Передача показаний счётчика</a></li>
            <li><a href="\Ignatjev\contacts.html">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
    </div>
   <!-- Левое меню и Контент -->
        <div id="content">
    
    <!-- Контент - правый блок -->
        <div class="right">
    <div id="text">
                <h1 align = "middle" >ТСЖ "Пробуждение"</h1>
                <p> Дорогие посетители! Мы рады приветствовать вас на нашем сайте!</p>
                <p>Здесь вы сможете получить актуальную информацию о деятельности нашей организации, ознакомиться с последними новостями и объявлениями,а так же узнать результаты собрания.</p>
        <p>Также с помощью этого сайта жители смогут воспользоваться удобными и полезными онлайн-сервисами. Теперь можно будет быстро и легко отправить показания счетчиков, подать заявку в диспетчерскую службу, написать обращение руководству или бухгалтерии.</p>
                <p><img src= "\Ignatjev\Images\Facad2.JPG"  width="470" height="500" ></p><!--class = "imagepov"-->
       </div> 
     </div>
             
        <!-- Левое меню - левый блок  -->
        <div class="left">
            <div id="left-menu">
                <div class="block-nad-menu"></div>
                <div class="block-menu">
                <ul>
                <li><a href="\Ignatjev\reception-days.html">Дни приема</a></li>
                <li><a href="\Ignatjev\news.html">Новости дома</a></li>
                <li><a href="\Ignatjev\sobranieprav.html">Собрания правления</a></li>
                <li><a href="\Ignatjev\sobraniesob.html">Собрания собственников</a></li>
                <li><a href="\Ignatjev\kaprem.html">Капитальный ремонт</a></li>
                <li><a href="\Ignatjev\svyaz.html">Обратная связь</a></li>
                              </ul>
                </div>
            <div class="block-pod-menu"></div>
            </div>
     </div>
    </div>
  <div class="myclr"></div>
         
        <!-- Подвал -->
        <div id="podval">
            <div class="yellow"></div>
            <div class="p1">ТСЖ “Пробуждение” 2019г.<br/>
            г. Саратов, ул Лебедева-Кумача 70Д</div>
           
        </div>
        <div class="myclr"></div>
    <script>
    //вывод вкладки из верхнего меню в кантентную область
$(function(){
    $('#menu-top a').on('click', function(){
        let url = $(this).attr('href');
         $.ajax({
            type: "GET",
            url: url
        }).done(function(data){
            $("#text").html(data);
        });
        return false;
    })
  //вывод вкладки из левого меню в кантентную область
  $('#left-menu a').on('click', function(){
        let url = $(this).attr('href');
         $.ajax({
            type: "GET",
            url: url
        }).done(function(data){
            $("#text").html(data);
        });
        return false;
    })
})
</script>
</body>
</html>

Одна из побочных страниц:

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<title>ТСЖ "Пробуждение"</title>
  <link rel="stylesheet" href='\Ignatjev\style.css' type="text/css" />
    <link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">
</head>
<body>
<h1><p align = "middle">Контакты</h1></p>
<p>410018, Саратов, ул. Лебедева-Кумача,дом 70 Д</p>
 
<p>Диспетчер ТСЖ +7 (960) 340-75-06 (с 8-00 до 17-00 час.)</p>
 
<p>Офис ТСЖ +7 (960) 340-75-06 (с 8-00 до 17-00 час.)</p>
 
<p>График работы офиса ТСЖ «Пробуждение»</p>
 
<p>Понедельник-четверг 09.00 — 17.00 час.</p>
 
<p>Пятница 09.00 — 16.00 час.</p>
 
<p>Перерыв 13.00 — 14.00 час.</p>
 
<p>tszh-probuzhdenie@mail.ru</p>
 
<p>Заявления от жильцов можете опускать в ящик ТСЖ «Пробуждение» в любое время.</p>
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aca827cbfb46ba2c0df4bb07b09171e5b19d6d99a2d2898375ed346cda340a41b&amp;width=458&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
<p></p>
</body>
</html>

И вот CSS с помощью которой на данный момент задается бэк и цвет текста:

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
body {padding:0px; margin:0; background:#8fbc8f; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#a8e4a0;}
a:hover {text-decoration:none;}
li.none-bg {background:none!important;}
.telefon {float:right; font-size:8pt;}
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#8fbc8f  repeat-x; padding:0 0 0 10px;}/* задний фон */
.bg-2 {width:940px; height:8px; background:#a8e4a0; margin:0 auto;}/* передний фон и цвет текста в верхнем меню */
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left;padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#a8e4a0; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#a8e4a0;}
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
p { text-indent: 25px; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#8fbc8f; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#a8e4a0;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#8fbc8f;}
.block-menu {width:240px; border-left:10px solid #a8e4a0; background:#8fbc8f;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px;}
li.none-bg {background:none!important;}
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #8fbc8f; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#a8e4a0;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}
#qwe {
  transform:scale(2.2);
  opacity:0.9;
  cursor:pointer;
  }

А связывает всю эту кашу РНР:

PHP    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
<?php 
include "D:\Winginx\home\localhost\public_html\Ignatjev\index.html"; 
include "D:\Winginx\home\localhost\public_html\Ignatjev\bd.php";
echo "<link rel='stylesheet'  href='\Ignatjev\style.css'>";
?>

@Iverycool · 25.05.2020, 12:05

Кирилл Саратов, Для начала вы должны подготовить цветовую гамму для тёмной темы, а js может выглядить довольно просто:

JavaScript    
        
    Скопировано
1
2
3
4
// but - кнопка переключения
but.onclick = function() {
  document.body.classList.toggle('dark-mode');
}

Стили для тёмной темы у вас тогда должны быть вида

CSS    
        
    Скопировано
1
2
3
body.dark-mode element {
  /* стили */
}

@Кирилл Саратов · 25.05.2020, 13:17 **[ТС]**

здравствуйте,я примерно понял,но ведь данная функция будет менять гамму только в одну сторону(тёмную),не подскажите как сделать так что бы можно было переключаться между темами? Т.е. человек выбрал темную тему => ему не понравилось =>он вернулся к светлой

@gogolik · 25.05.2020, 13:21

Кирилл Саратов, ну вы хоть пытайтесь понять код, который вам дают. Там это и сделано.

@Кирилл Саратов · 25.05.2020, 14:39 **[ТС]**

что то у меня ничего не выходит,я добавил кнопку смены темы,присвоил ей имя but

HTML5    
        
    Скопировано
1
 <input type="button" id = "but" value="смена фона" class = "telefon" >

,создал js файл

JavaScript    
        
    Скопировано
1
2
3
4
but.onclick = function() 
{
  document.body.classList.toggle('dark-mode');
}

и подключил

HTML5    
        
    Скопировано
1
<script src= "smena.js </script>

,а так же добавил в сss

CSS    
        
    Скопировано
1
body.dark-mode element {width:950px; height:64px; background:#000000  !important; padding:0 0 0 10px;}

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

@Iverycool · 25.05.2020, 15:43

Кирилл Саратов,

element - собирательное значение, вы как хотите тёмную тему сделать? Просто тёмный фон сделать?

@Кирилл Саратов · 25.05.2020, 15:51 **[ТС]**

ну да,сделать черный фон и серые буквы,извиняюсь что так жёстко туплю )

@Soldado · 25.05.2020, 15:57

PHP/HTML    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>js test</title>
 
 
   
    
<style>
body{
    background-color: white;
}   
body.dark-mode{
    background-color: black;
}   
    
</style>
   
 
</head>
 
<body>
<script type="text/javascript">
function tema() 
{
  document.body.classList.toggle('dark-mode');
}
 
</script> 
<body>
 
 
<input type="button" onclick="tema()" value="Сменить тему"/>
 
 
 
</body>
</html>

@Кирилл Саратов · 25.05.2020, 16:20 **[ТС]**

получилось, но как то странно...

@DrType · 25.05.2020, 16:31

Кирилл Саратов, а теперь, если Вы представляете себе, как должны выглядеть блоки на странице в тёмном режиме, пропишите это в CSS, как Вам и советовали в посте #2. Например, хотите, чтобы меню стало черным, а не салатовым?

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
nav ul li{
 /*те стили которые у вас есть сейчас*/
}
.dark-mode nav ul li{
 background-color: black; color:white
}

@Кирилл Саратов · 25.05.2020, 16:42 **[ТС]**

Хорошо,вроде понял,спасибо! Пошёл пробовать.

@DrType · 25.05.2020, 16:58

Не по теме:

Тёмная тема должна выглядеть симпатично. Вы уж там что-нибудь красивенькое напишите, вроде

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.dark-mode {
  background-color: black;
}
.dark-mode * {
  background-color: black;
  color: white;
}
.dark-mode .bg-1 ul li {
  background-color: #444466;
}
.dark-mode .bg-1 a {
  color: #33fafa;
}
.dark-mode .bg-1 ul li a:hover {
  background: #6666aa;
}

И т. д.

@Кирилл Саратов · 25.05.2020, 17:06 **[ТС]**

Спасибо за совет,я обычно подбираю цвета на этом сайте [del] Для меня самое сложное было разобраться как именно это сделать,а дизайн уже можно пробовать подбирать )

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

Как добавить переключатель светлой/тёмной темы на сайт?

Решение

Решение

Решение

@Кирилл Саратов 2 / 2 / 0 Регистрация: 15.11.2017 Сообщений: 85
	25.05.2020, 13:17 [ТС]
	здравствуйте,я примерно понял,но ведь данная функция будет менять гамму только в одну сторону(тёмную),не подскажите как сделать так что бы можно было переключаться между темами? Т.е. человек выбрал темную тему => ему не понравилось =>он вернулся к светлой 0

@gogolik Супер-модератор 2950 / 1928 / 818 Регистрация: 13.03.2010 Сообщений: 6,331
	25.05.2020, 13:21
	Кирилл Саратов, ну вы хоть пытайтесь понять код, который вам дают. Там это и сделано. 0

@Iverycool 1586 / 796 / 362 Регистрация: 01.02.2019 Сообщений: 1,047
	25.05.2020, 15:43
	Кирилл Саратов, element - собирательное значение, вы как хотите тёмную тему сделать? Просто тёмный фон сделать? 0

@Кирилл Саратов 2 / 2 / 0 Регистрация: 15.11.2017 Сообщений: 85
	25.05.2020, 15:51 [ТС]
	ну да,сделать черный фон и серые буквы,извиняюсь что так жёстко туплю ) 0

@Кирилл Саратов 2 / 2 / 0 Регистрация: 15.11.2017 Сообщений: 85
	25.05.2020, 16:20 [ТС]
	получилось, но как то странно... Миниатюры 0

@Кирилл Саратов 2 / 2 / 0 Регистрация: 15.11.2017 Сообщений: 85
	25.05.2020, 16:42 [ТС]
	Хорошо,вроде понял,спасибо! Пошёл пробовать. 0

@Кирилл Саратов 2 / 2 / 0 Регистрация: 15.11.2017 Сообщений: 85
	25.05.2020, 17:06 [ТС]
	Спасибо за совет,я обычно подбираю цвета на этом сайте [del] Для меня самое сложное было разобраться как именно это сделать,а дизайн уже можно пробовать подбирать ) 0