Установить prefers-color-scheme браузера?

Ссылка скопирована
JavaScript
1 ответ

Здравствуйте, есть простой код:

(() => {   'use strict'    const getPreferredTheme = () => {     return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'   }    const setTheme = theme => {     if (theme === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {       document.documentElement.setAttribute('data-bs-theme', 'dark')     } else {       document.documentElement.setAttribute('data-bs-theme', theme)     }   }    setTheme(getPreferredTheme()) })()

(() => { 'use strict' const getPreferredTheme = () => { return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light' } const setTheme = theme => { if (theme === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark') } else { document.documentElement.setAttribute('data-bs-theme', theme) } } setTheme(getPreferredTheme()) })()

Вопрос, у меня на ПК по умолчанию стоит именно темная версия, в браузере "устройства", но когда я меняю на светлый перезахожу на сайт, все равно по умолчанию темная, можно как-то обойти и брать именно из браузера?

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Мария Код Ответ

Для установки prefers-color-scheme в браузере, вам необходимо использовать CSS Media Queries. Это позволит вам определить предпочтения пользователя относительно цветовой схемы веб-сайта.

Вот пример кода на PHP, который вы можете использовать для определения prefers-color-scheme:

if (isset($_SERVER['HTTP_ACCEPT'])) {
    $prefersColorScheme = substr($_SERVER['HTTP_ACCEPT'], 0, 8) == 'text/css' ? 'light' : 'dark';
} else {
    $prefersColorScheme = 'light';
}
 
echo "Prefers color scheme: " . $prefersColorScheme;

if (isset($_SERVER['HTTP_ACCEPT'])) { $prefersColorScheme = substr($_SERVER['HTTP_ACCEPT'], 0, 8) == 'text/css' ? 'light' : 'dark'; } else { $prefersColorScheme = 'light'; } echo "Prefers color scheme: " . $prefersColorScheme;

Этот код проверяет заголовок HTTP_ACCEPT, чтобы определить, какую цветовую схему предпочитает пользователь (светлую или темную). Затем он выводит результат на экран.

Если вы хотите применить цветовую схему к вашему веб-сайту на основе prefers-color-scheme, вы можете использовать следующий CSS код:

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }
}
 
@media (prefers-color-scheme: light) {
    body {
        background-color: #fff;
        color: #333;
    }
}

@media (prefers-color-scheme: dark) { body { background-color: #333; color: #fff; } } @media (prefers-color-scheme: light) { body { background-color: #fff; color: #333; } }

Этот CSS код применяет различные стили к элементам на вашем веб-сайте в зависимости от предпочтений пользователя относительно цветовой схемы.

Надеюсь, это поможет вам установить prefers-color-scheme в вашем веб-приложении!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как добиться, чтобы Telegram прислал мне именно смс код, а не через звонок его диктовал? 1 ответ