Вниз  JavaScript
- 19.03.2024 / 11:53
Кальцид
  Пользователь

Кальцид 
Сейчас: Offline
Tygrain, если будет один setTimeout на весь канвас то не нужен..
- 19.03.2024 / 16:09
Askalite
  Пользователь

Askalite 
Сейчас: Offline
Цитата Кальцид:
Tygrain, если будет один setTimeout на весь канвас то не нужен..
Но взамен будут разрывы, наверное. Можно влепить в игру настройку "вертикальная синхронизация".
- 15.04.2024 / 08:34
segOro
  Пользователь

segOro 
Сейчас: Online
Дано:
а) сайт с основным стилем (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
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
segOro
  Пользователь

segOro 
Сейчас: Online
RblSb, у меня в localStorage не храниться ничего, для зарегистрированных я использую БД, для гостей $_SESSION
- 15.04.2024 / 10:48
Arigato
  Пользователь

Arigato 
Сейчас: Offline
segOro, можно попробовать грузить сразу оба файла со стилями через preload (https://3perf.com/blog/link-rels/). Но не уверен, что браузер не попытается их применить одновременно
__________________
 don't tread on me
- 15.04.2024 / 12:56
segOro
  Пользователь

segOro 
Сейчас: Online
Arigato, попробовал через preload грузить тёсную тему - не получилось. Покопался в интернете, оказывается, это распространённая проблема, но решения я не нашёл. Может заранее фон красить в чёрный?
- 15.04.2024 / 13:10
segOro
  Пользователь

segOro 
Сейчас: Online
Решил пока сделать костыль + подправил запрос:
  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
Arigato
  Пользователь

Arigato 
Сейчас: Offline
segOro, а почему не хранить тему в кукисах и сразу отдавать страницу с нужными стилями? Мы у себя так сделали, вроде бы проблем не замечали.

upd: хранить именно реальную тему
__________________
 don't tread on me

Изменено Arigato (15.04 / 13:18) (всего 1 раз)
- 15.04.2024 / 13:32
Tygrain
  Пользователь

Tygrain 
Сейчас: Offline
Цитата Arigato:
segOro, а почему не хранить тему в кукисах
потому что на хранение печенек нужно спрашивать разрешение :gg:
Наверх  Всего сообщений: 780
Фильтровать сообщения
Поиск по теме
Файлы топика (20)