prefers-color-scheme:CSS Media Query

Jednou funkcí zařízení a aplikace, kterou jsem ocenil, je možnost přepínání mezi světlým a tmavým režimem. Pokud jste někdy dělali kódování nebo čtení pozdě v noci, víte, jak úžasné může být temné téma pro předcházení únavě očí a bolestem hlavy, které z toho vyplývají. macOS nedávno implementoval nativní tmavý režim, ale tento režim nepřevádí webové stránky na tmavé rozhraní, takže stále získáváte světlé stránky bez ohledu na nativní motiv. Nebylo by úžasné, kdyby webové stránky také ztmavly nebo zesvětlily podle systémových preferencí uživatele?

Pracovní skupina CSS souhlasí, a proto vytvořila prefers-color-scheme mediální dotaz; mediální dotaz, který signalizuje, jaké téma uživatel preferuje, a umožňuje vám kódovat stránky tak, aby těmto preferencím odpovídaly!

prefers-color-scheme media query má dvě efektivní hodnoty, které můžete zadat:light a dark :

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        background: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        background: black;
        color: white;
    }
}

Ve spojení s výchozím návrhem webu můžete potenciálně nabídnout tři různé návrhy:výchozí (no-preference ), světlé modifikace a tmavé modifikace.

Chcete-li usnadnit správu barev v každém režimu, můžete jednoduše upravit proměnné CSS v dotazu na média:

/* Defaults */
:root {
    --color-scheme-background: pink;
    --color-scheme-text-color: red;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --color-scheme-background: white;
        --color-scheme-text-color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-background: black;
        --color-scheme-text-color: white;
    }
}

/* Usage */
html {
    background: var(--color-scheme-background);
    color: var(--color-scheme-text-color);
}

Pokud chcete pomocí JavaScriptu zjistit, který režim váš uživatel preferuje, můžete to snadno udělat získáním hodnoty proměnné CSS:

html {
    content: ""; /* (ab)using the content property */
}

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        content: "light"; /* (ab)using the content property */
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        content: "dark"; /* (ab)using the content property */
    }
}

const mode = getComputedStyle(document.documentElement).getPropertyValue('content');

// mode: "dark"

Těší mě, že existuje oficiální dotaz médií na preferenci barvy/tématu. Jako někdo, kdo trpí menšími bolestmi hlavy až migrénami znecitlivujícími lebku, upřednostňuji vždy tmavé téma a oceňuji aplikace, které vynaložily mimořádné úsilí, aby mi poskytly bezbolestný uživatelský zážitek. K přizpůsobení tisku a různým velikostem výřezu již používáme dotazy na média, takže udělejme další krok v poskytování barev na základě preferencí uživatele!

Poznámka:V době zveřejnění tento dotaz na média implementoval pouze Safari Preview 68. Sledujte chybu Bugzilla 1494034 a zjistěte stav podpory Firefoxu.