Прежде чем начать тему, я хочу рассказать вам, почему темная тема так важна на вашем сайте. Темный режим стал популярным в последние 3-5 лет, поскольку компании начали внедрять эти режимы, чтобы сделать их полезными для ночных пользователей и людей с яркими экранами. Вы знаете, что темный режим присутствует везде в iOS, Android, Windows и т. Д. Предположим, если кто-то посетит ваш сайт в ночное время, чтобы прочитать статью, более светлые цвета вызовут напряжение у пользователя. Итак, я думаю, что темный режим - важная функция для каждого веб-сайта.
Вот преимущества использования темной темы:
- Улучшенная читаемость текста
- Лучшая контрастность
- Снижение утомляемости глаз
- Меньше мерцания (если есть проблемы)
- Меньше синего света
- Менее подвержен светобоязни
- Можно сэкономить небольшое количество электроэнергии
Вот превью того, как будет выглядеть наш финальный проект, или посмотрите рабочий превью здесь
<html> <head> <title>Dark Mode</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="box"> <h2>Light / Dark Theme <span> <form> <input onclick="toggle(this.form)" id="checkbox" name="checkbox" type="checkbox" /><label for="checkbox">Toggle</label> </form> </span> </h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </div> <script src="./script.js"></script> </body> </html>
Создайте файл с именем style.css и вставьте приведенный ниже код.
/* light theme colors */
html{
--bg: #FCFCFC;
--bg-panel: #EEEEEE;/*box container*/
--color-headings: #00ADB5;/*heading*/
--color-text: #393e46;/*paragraph*/
height:100%;
display:grid;
align-items:center;
justify-content:center;
margin: 0;
padding: 0;
}
/* dark theme colors */
html[data-theme='dark']{
--bg: #232931;
--bg-panel: #393E46;
--color-headings: #00ADB5;
--color-text: #B5B5B5;
}
body{
font-family: 'Montserrat', sans-serif;
background-color: var(--bg);
}
/* box container */
.box{
display:grid;
grid-template-rows: auto auto;
border-radius: 15px;
padding:30px;
width:60vw;
background-color: var(--bg-panel);
letter-spacing: 0.05rem;
}
h2{
font-size: 2.18rem;/*35px*/
margin: 20px 0;
color:var(--color-headings);
}
div h2 span{
float: right;
}
div p{
font-size: 1.25rem;/*20px*/
margin-top: 5px;
margin-bottom: 20px;
color: var(--color-text);
}
form{
margin-top: 0.7rem;
}
/* checkbox toggler */
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 52px;
height: 27px;
background: grey;
float: right;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background: var(--color-headings);
}
input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active:after {
width: 45px;
}
/* transition */
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
transition: all 750ms !important;
transition-delay: 0 !important;
}
Создайте файл с именем script.js и вставьте приведенный ниже код.
window.onload=function(){
var theme = localStorage.getItem('data-theme');
if(theme=='light'){
document.documentElement.setAttribute('data-theme', 'light');
}else if(theme==''){
document.documentElement.setAttribute('data-theme', 'light');
}else if(theme=='dark'){
document.documentElement.setAttribute('data-theme' , 'dark');
document.getElementById("checkbox").checked = true;
}
}
function toggle(a){
if(a.checkbox.checked==true){
document.documentElement.classList.add('transition');
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('data-theme','dark');
}
else if(a.checkbox.checked==false){
document.documentElement.classList.add('transition');
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('data-theme','light');
}
};
Вот объяснение того, как работает приведенный выше код.
<input onclick="toggle(this.form)" id="checkbox" name="checkbox" type="checkbox" /><label for="checkbox">Toggle</label>
когда пользователь нажимает кнопку переключения, запускается эта функция JavaScript.
function toggle(a){
if(a.checkbox.checked==true){
document.documentElement.classList.add('transition');
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('data-theme','dark');
}
else if(a.checkbox.checked==false){
document.documentElement.classList.add('transition');
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('data-theme','light');
}
};
изначально наш сайт будет работать в облегченном режиме. Если этот флажок установлен, наша функция установит темную тему данных. поскольку для темы данных задано темное значение, наш веб-сайт использует приведенные ниже переменные CSS и соответствующим образом обновляет веб-страницу.
html[data-theme='dark']{
--bg: #232931;
--bg-panel: #393E46;
--color-headings: #00ADB5;
--color-text: #B5B5B5;
}
Если этот флажок не отмечен, наша функция установит световую тему данных. поскольку тема данных установлена на свет, наш веб-сайт использует указанные ниже переменные CSS.
html{
--bg: #FCFCFC;
--bg-panel: #EEEEEE;/*box container*/
--color-headings: #00ADB5;/*heading*/
--color-text: #393e46;/*paragraph*/
}
Проверьте понятие переменных CSS здесь
document.documentElement.classList.add('transition');
Приведенная выше строка кода помогает добавить индивидуальности нашему веб-сайту с помощью приведенного ниже кода перехода. Вы можете использовать свои собственные свойства перехода.
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
transition: all 750ms !important;
transition-delay: 0 !important;
}
Сохраните предпочтения пользователя для будущих посещений
localStorage.setItem('data-theme','dark');
localStorage.setItem('data-theme','light');
Основная идея использования локального хранилища - сохранить предпочтения пользователя в браузере (используя локальное хранилище).
Проверьте локальное хранилище здесь
при загрузке страницы мы проверяем, была ли выбрана тема ранее, и соответствующим образом обновляем интерфейс веб-сайта. Для этого мы используем приведенный ниже код.
window.onload=function(){
var theme = localStorage.getItem('data-theme');
if(theme=='light'){
document.documentElement.setAttribute('data-theme', 'light');
}else if(theme==''){
document.documentElement.setAttribute('data-theme', 'light');
}else if(theme=='dark'){
document.documentElement.setAttribute('data-theme' , 'dark');
document.getElementById("checkbox").checked = true;
}
}
Если вы хотите использовать любую другую цветовую палитру, вам следует рассмотреть следующие ресурсы.
https://colorhunt.co/palette/183903 https://colorhunt.co/palette/117601 https://colorhunt.co/palette/2763
Обязательно проверьте исходные файлы на Github.
Кривая обучения важна для роста. Итак, приступайте к работе, чтобы получить несколько интересных вещей, которые помогут улучшить эту кривую обучения.
