CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайта

Смена цветовой схемы: отслеживание и переключение

Топик обсуждения страницы клуба.

Комментарии

Скрыть 3 комментария

Показать 3 комментария

Загрузить ещё 3 комментария

grin367127 декабря 2023#

Юрий Озеров

Да, тёмная тема включается

Нет, тёмная тема не включается, потому что её нет — её надо писать самостоятельно. Напомню про дисклеймлер в начале статьи:

Эта статья не о том как включить секретную темную тему Шикимори и не о том как её написать. Это описание способов переключения со светлой темы на тёмную в ваших собственных стилях.

Советую использовать готовую тему, особенно последнюю в списке, чтобы не страдать фигнёй.

@Юрий Озеров

Юрий Озеров 3 января 2024#

@grin3671, ты мой спаситель, спасибо большое

_Just_Monika_95_12 января 2026#

Реверсная инженерия(вдруг кому надо):

спойлер

/*Ночная тема (ночь)*/
.l-page[data-server_time *= "T19"],
.l-page[data-server_time *= "T20"],
.l-page[data-server_time *= "T21"],
.l-page[data-server_time *= "T22"],
.l-page[data-server_time *= "T23"],
.l-page[data-server_time *= "T00"],
.l-page[data-server_time *= "T01"],
.l-page[data-server_time *= "T02"],
.l-page[data-server_time *= "T03"],
.l-page[data-server_time *= "T04"],
.l-page[data-server_time *= "T05"],
.l-page[data-server_time *= "T06"] {
  filter: invert(1)
}

.l-page img[data-server_time *= "T19"],
.l-page img[data-server_time *= "T20"],
.l-page img[data-server_time *= "T21"],
.l-page img[data-server_time *= "T22"],
.l-page img[data-server_time *= "T23"],
.l-page img[data-server_time *= "T00"],
.l-page img[data-server_time *= "T01"],
.l-page img[data-server_time *= "T02"],
.l-page img[data-server_time *= "T03"],
.l-page img[data-server_time *= "T04"],
.l-page img[data-server_time *= "T05"],
.l-page img[data-server_time *= "T06"] {
  filter: invert(1)
}

/*Обложка профиля*/
.p-profiles-show[data-server_time *= "T19"] .profile-head::before,
.p-profiles-show[data-server_time *= "T20"] .profile-head::before,
.p-profiles-show[data-server_time *= "T21"] .profile-head::before,
.p-profiles-show[data-server_time *= "T22"] .profile-head::before,
.p-profiles-show[data-server_time *= "T23"] .profile-head::before,
.p-profiles-show[data-server_time *= "T00"] .profile-head::before,
.p-profiles-show[data-server_time *= "T01"] .profile-head::before,
.p-profiles-show[data-server_time *= "T02"] .profile-head::before,
.p-profiles-show[data-server_time *= "T03"] .profile-head::before,
.p-profiles-show[data-server_time *= "T04"] .profile-head::before,
.p-profiles-show[data-server_time *= "T05"] .profile-head::before,
.p-profiles-show[data-server_time *= "T06"] .profile-head::before {
  filter: invert(1)
}

Но я все таки рекомендую готовое решение:
Готовые решения
Можно конечно и свою Чебурашку сочинить, правда настраивать каждый элемент займет куча времени

Твой комментарий