Смена темы
Making
Changing the theme on the site is not only a change in design and color scheme, but also an opportunity to expand the user's capabilities within a single resource.
About
Theme switcher
Как сделать:
1. Внимательно прочитай инструкцию и посмотри видео. Обратите внимание, что это имитация полноценной смены темы.
2. Элементу, по клику на который будет меняться тема добавь класс theme-switcher-button.
2. Всем элементам, которые не должны меняться добавь класс theme-exception.
3. При необходимости внеси нужные значения в форму (посмотреть функции скорости можно на этом сайте).
4. В блок T123 вставь сгенерированный код.
2. Элементу, по клику на который будет меняться тема добавь класс theme-switcher-button.
2. Всем элементам, которые не должны меняться добавь класс theme-exception.
3. При необходимости внеси нужные значения в форму (посмотреть функции скорости можно на этом сайте).
4. В блок T123 вставь сгенерированный код.
В случае, если у тебя на странице есть закрепленное при перемотке меню или прелоадер, нужно самостоятельно контролировать значение z-index. Не меняй значение в поле без необходимости.
Z-index определяет положение элементов в слоях страницы. Чем больше значение z-index, тем выше в слоях будет элемент (тот же принцип, что и в Figma). Объясняю ниже на примерах ↓
⬥ Если на странице будет добавлен прелоадер, то задай ему z-index: 10002.
⬥ Если на странице будет закрепленное при перемотке меню, тема которого не будет меняться задай меню z-index: 10001
Z-index определяет положение элементов в слоях страницы. Чем больше значение z-index, тем выше в слоях будет элемент (тот же принцип, что и в Figma). Объясняю ниже на примерах ↓
⬥ Если на странице будет добавлен прелоадер, то задай ему z-index: 10002.
⬥ Если на странице будет закрепленное при перемотке меню, тема которого не будет меняться задай меню z-index: 10001
i
<!-- Theme switch by Katya Fedyaeva -->
<style>.theme-switcher-button{cursor:pointer}.theme-blender{position:fixed;top:-1rem;right:0;width:14px;height:14px;border-radius:50%;opacity:0;z-index:10000;background-color:#FFF;pointer-events:none;mix-blend-mode:difference;transition:all 0.5s ease}.theme-blender.theme-blender--done{opacity:1}.theme-exception{z-index:10001!important}</style>
<script>document.addEventListener('DOMContentLoaded',function(){if(window.matchMedia("(min-width:720px)").matches){var themeSwitcherButton=document.querySelector('.theme-switcher-button');var themeBlender=document.createElement('div');themeBlender.classList.add('theme-blender');document.querySelector('body').appendChild(themeBlender);themeSwitcherButton.addEventListener('click',function(){themeBlender.classList.toggle('theme-blender--done');themeSwitcherButton.classList.toggle('theme-switcher--done');if(themeBlender.classList.contains('theme-blender--done')){themeBlender.setAttribute('style','opacity:1;transform:scale(450);transition:transform 0.6s ease-in,opacity 0.2s ease-in;')}else{themeBlender.setAttribute('style','opacity:0;transform:scale(1);transition:transform 0.6s ease-in-out,opacity 0.2s ease-in-out;transition-delay:0s,0.3s;transition-property:transform,opacity;')}})}});</script>
Making
Theme switcher
Changing the theme on the site is not only a change in design and color scheme, but also an opportunity to expand the user's capabilities within a single resource.
About
Как сделать:
1. Внимательно прочитай инструкцию и посмотри видео. Обратите внимание, что это имитация полноценной смены темы.
2. Элементу, по клику на который будет меняться тема добавь класс theme-switcher-button.
2. Всем элементам, которые не должны меняться добавь класс theme-exception.
3. При необходимости внеси нужные значения в форму (посмотреть функции скорости можно на этом сайте).
4. В блок T123 вставь сгенерированный код.
2. Элементу, по клику на который будет меняться тема добавь класс theme-switcher-button.
2. Всем элементам, которые не должны меняться добавь класс theme-exception.
3. При необходимости внеси нужные значения в форму (посмотреть функции скорости можно на этом сайте).
4. В блок T123 вставь сгенерированный код.
В случае, если у тебя на странице есть закрепленное при перемотке меню или прелоадер, нужно самостоятельно контролировать значение z-index. Не меняй значение в поле без необходимости.
Z-index определяет положение элементов в слоях страницы. Чем больше значение z-index, тем выше в слоях будет элемент (тот же принцип, что и в Figma). Объясняю ниже на примерах ↓
⬥ Если на странице будет добавлен прелоадер, то задай ему z-index: 10002.
⬥ Если на странице будет закрепленное при перемотке меню, тема которого не будет меняться задай меню z-index: 10001
Z-index определяет положение элементов в слоях страницы. Чем больше значение z-index, тем выше в слоях будет элемент (тот же принцип, что и в Figma). Объясняю ниже на примерах ↓
⬥ Если на странице будет добавлен прелоадер, то задай ему z-index: 10002.
⬥ Если на странице будет закрепленное при перемотке меню, тема которого не будет меняться задай меню z-index: 10001
i
<!-- Theme switch by Katya Fedyaeva -->
<style>.theme-switcher-button{cursor:pointer}.theme-blender{position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:100vw;height:100vw;z-index:10000;background-color:#FFF;mix-blend-mode:difference;transition:all 0.5s ease}.theme-blender.theme-blender--done{opacity:1}.theme-exception{z-index:10001!important}</style>
<script>document.addEventListener('DOMContentLoaded',function(){if(window.matchMedia("(min-width:720px)").matches){var themeSwitcherButton=document.querySelector('.theme-switcher-button');var themeBlender=document.createElement('div');themeBlender.classList.add('theme-blender');document.querySelector('body').appendChild(themeBlender);themeSwitcherButton.addEventListener('click',function(){themeBlender.classList.toggle('theme-blender--done');themeSwitcherButton.classList.toggle('theme-switcher--done')})}});</script>
