LINUX.ORG.RU

RFE: автоматическое переключение между тёмной и светлой темой через prefers-color-scheme

 ,


0

2

Было бы неплохо иметь возможность выбрать в настройках «гибридную» тему, которая бы автоматически становилась тёмной или светлой в зависимости от настроек браузера (@media prefers-color-scheme).

В идеале — позволить пользователю отдельно выбрать «светлую» тему и отдельно «тёмную» тему, и склеивать обе темы в один CSS, как-то так:

<стили от светлой темы>

@media (prefers-color-scheme: dark) {
    <стили от тёмной темы>
}
★★★★★

Идея хорошая. Но сейчас у нас все темы разные, отличия у них не только в цветовой гамме.

Так что сначала нужно изготовить светлый вариант дефолтной темы.

maxcom ★★★★★
()
Ответ на: комментарий от intelfx

Tango. На мой взгляд waltz не совсем эквивалент, там много деталей в css отличаются (и еще есть ряд багов в верстке, связанных с тем что он базировался на старой версии tango).

maxcom ★★★★★
()
Ответ на: комментарий от intelfx

Тут идея простая – можно взять tango и изготовить под нее альтернативную цветовую гамму, большая часть цветов там вынесена в константы и меняется централизованно на весь сайт.

Но дизайнер из меня так себе, все мои попытки что-то изобразить это сплошной facepalm.

maxcom ★★★★★
()

Вообще есть кто-то готов набросать светлый вариант tango, то я могу его прикрутить и доделать мелкие косяки которые повылезают.

Надо подобрать цвета, которые нормально будут смотреться как минимум на трех страницах – на главной, на странице топика с комментариями и в трекере.

maxcom ★★★★★
()

На мозила девелопер (если я правильно понял посыл) стили сделаны не так, а вот так:

CSS Variables

/* tango-theme.css */
.tango-theme {
    --lor-txt-color: #aaa;
    --lor-bg-color: slategray;
    /*...*/
}

/* waltz-theme.css */
.waltz-theme {
    --lor-txt-color: #333;
    --lor-bg-color: gray;
    /*...*/
}

/* main.css */
#bd {
    color: var(--lor-txt-color);
    background-color: var(--lor-bg-color);
    /*...*/
}
Но на лоре стили сервак генерирует причем особо извращенным способом, зато наверное на древних браузерах работает. Хотя вышеописанная фича заявлено что поддерживается с firefox 31 и chrome 46

uin ★★★
()
Последнее исправление: uin (всего исправлений: 1)
Для того чтобы оставить комментарий войдите или зарегистрируйтесь.