Есть ли какой-нибудь префикс CSS для ночного режима или события JavaScript, которые срабатывают, когда пользователь меняет режим? Мне нужны пользовательские цвета для элемента, если пользователь включил ночной режим из настроек браузера .

Благодарность

Уже почти 2020 год, и теперь у нас есть медиа-запрос css для определения ночного режима.

@media (prefers-color-scheme: dark){ body { background-color: black; color: #ccc; } } 

Поскольку «ночной режим» будет включать в себя не только изменение цвета фона, но и цветов шрифта (а также, возможно, много других вещей), я бы порекомендовал решение, такое как это:

Пример HTML:

 {amp}lt;body class="night"{amp}gt; 

Теперь в стандартном режиме тег body не будет иметь night класс по умолчанию, но вы бы добавили его с помощью функции класса переключения, такой как toggleClass класса jQuery.

Затем в CSS сделать что-то вроде …

CSS:

 body { color: #000; background-color: #fff; } body.night { color: #fff; background-color: #000; } 

NB: только пример, пожалуйста, не используйте белый текст на черном фоне :)

Теперь, когда класс переключен и добавлен night класс, все цвета изменятся, и страница перейдет в «ночной» режим.

Не уверены, что вам также нужны инструкции о том, как заставить этот режим «залипать» во время обновления страницы / навигации; если это так, то это, вероятно, лучше всего обрабатывать с помощью session или cookie , срок действия которого истекает при закрытии браузера.

Есть CSS-фильтр, я не уверен, что Twitter использовал что-то подобное (никакие изображения не были инвертированы, только текст и фон).

примечание 1: вы можете уменьшить индекс инвертирующего фильтра, например: .8 примечание 2: нет поддержки IE :( но Edge поддерживает его

 $('button').on('click', function(){ $('.wrap').toggleClass('day night') ; }); 
 .wrap{ background: white; } .day{ filter: invert(0); } .night{ filter: invert(1); } 
 {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="wrap day"{amp}gt; {amp}lt;img src="https://placeimg.com/200/150/any" /{amp}gt; {amp}lt;p{amp}gt;Lorem ipsus {amp}lt;/p{amp}gt; {amp}lt;button{amp}gt;Day / night{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt;