Вниз  JavaScript
<< 1 ... 70 71 72 73 74 ... 78 >>
- 19.03.2024 / 11:53
#521920
Кальцид
  Пользователь
Кальцид 
Сейчас: Offline
Tygrain, если будет один setTimeout на весь канвас то не нужен..
- 19.03.2024 / 16:09
#521921
Askalite
  Пользователь
Askalite 
Сейчас: Offline
Цитата Кальцид:
Tygrain, если будет один setTimeout на весь канвас то не нужен..Но взамен будут разрывы, наверное. Можно влепить в игру настройку "вертикальная синхронизация".
- 15.04.2024 / 08:34
#522030
segOro
  Пользователь
segOro 
Сейчас: Offline
Дано:
а) сайт с основным стилем (style.css) и подключаемым стилем оформления со светлой или тёмной темой (light.css/dark.css).
б) ручное переключение тем.
в) основная тема - светлая.
Проблема:
Сделал автоматическое переключение темы сайта на основе темы браузера/устройства, но при первой загрузке сайта на долю секунды, когда и если происходит переключение темы, страница лишается стиля. Это происходит, тогда, когда идёт автоматическое переключение со светлой темы на тёмную (в момент смены light.css на dark.css в href при помощи JS).
Сам код:
  1. <link id="theme" data-theme="auto" rel="stylesheet" href="light.css">
  1. let theme = document.querySelector("#theme");
  2. if (theme.dataset.theme == "auto") {
  3.   theme.setAttribute("href", theme.href.replace("light", (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")));
  4. }
Пробовал добавлять async или type="module" в тег <script>, но результата нет.
Подскажите, пожалуйста, можно как-либо это исправить?
- 15.04.2024 / 08:54
#522032
RblSb
  Пользователь
RblSb 
Сейчас: Offline
segOro, https://stackoverflow.com/a/71800065

Лично я делал такой скрипт в начале <body>:

  1. <script>
  2.     if(localStorage.theme == "dark") {
  3.       document.body.style.backgroundColor = "#111";
  4.       document.body.style.opacity = "0";
  5.       document.addEventListener('DOMContentLoaded', (event) => {
  6.         document.body.style.backgroundColor = "";
  7.         document.body.style.opacity = "";
  8.       });
  9.     }
  10.   </script>

Изменено RblSb (15.04 / 08:54) (всего 1 раз)
- 15.04.2024 / 09:11
#522033
segOro
  Пользователь
segOro 
Сейчас: Offline
RblSb, у меня в localStorage не храниться ничего, для зарегистрированных я использую БД, для гостей $_SESSION
- 15.04.2024 / 10:48
#522034
Arigato
  Пользователь
Arigato 
Сейчас: Offline
segOro, можно попробовать грузить сразу оба файла со стилями через preload (https://3perf.com/blog/link-rels/). Но не уверен, что браузер не попытается их применить одновременно
__________________
 don't tread on me
- 15.04.2024 / 12:56
#522035
segOro
  Пользователь
segOro 
Сейчас: Offline
Arigato, попробовал через preload грузить тёсную тему - не получилось. Покопался в интернете, оказывается, это распространённая проблема, но решения я не нашёл. Может заранее фон красить в чёрный?
- 15.04.2024 / 13:10
#522036
segOro
  Пользователь
segOro 
Сейчас: Offline
Решил пока сделать костыль + подправил запрос:
  1. let theme = document.querySelector("#theme");
  2. if (theme.dataset.theme == "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
  3.   document.body.style.background = "#000";
  4.   theme.setAttribute("href", theme.href.replace("light", "dark"));
  5. }
Теперь, если светлая тема, то код не выполняется, а если тёмная, то прописывается тёмный фон, а потом меняется тема, в итоге мигание во время смены .css есть, но его не видно. Ну и, естественно, пришлось переместить скрипт ниже тега body. Нихрена не элегантно, надо думать дальше.
Изменено segOro (15.04 / 13:12) (всего 1 раз)
- 15.04.2024 / 13:16
#522037
Arigato
  Пользователь
Arigato 
Сейчас: Offline
segOro, а почему не хранить тему в кукисах и сразу отдавать страницу с нужными стилями? Мы у себя так сделали, вроде бы проблем не замечали.

upd: хранить именно реальную тему
__________________
 don't tread on me
Изменено Arigato (15.04 / 13:18) (всего 1 раз)
- 15.04.2024 / 13:32
#522038
Tygrain
  Пользователь
Tygrain 
Сейчас: Offline
Цитата Arigato:
segOro, а почему не хранить тему в кукисахпотому что на хранение печенек нужно спрашивать разрешение :gg:
<< 1 ... 70 71 72 73 74 ... 78 >>
Наверх  Всего сообщений: 780
Фильтровать сообщения
Поиск по теме
Файлы топика (20)