Функція CSS «світло-темно» спрощує темні режими веб-сайту

На початку цього року я випустив темний режим для Опус. Моя реалізація була досить простою. Коли користувач натискає перемикач «темний режим» у заголовку сайту, запускається деякий JS, який додає darkMode класу до element, which then applies a set of “dark” styles across the entire design.

Using this approach, your CSS might look something like this, with the “light” styles specified normally and the “dark” styles nested under a selector:

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

html.darkMode {

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

}

У цьому підході немає нічого поганого. Очевидно, це працює, і приємно мати всі ваші «темні» стилі в одному місці. Але при екстраполяції на весь веб-сайт цей підхід неминуче призводить до появи багатьох дублікатів CSS. Для кожного селектора, який має «світлий» стиль, вам потрібно створити його «темну» версію, яка здається грубою та неефективною. (Зрештою, одне з головних правил програмування — не повторюватися.)

Однак я не знав іншого способу досягнення темного режиму. Поки я не виявив light-dark функція, тобто. По суті, light-dark дозволяє вказати два значення кольору — одне «світлий» і одне «темний», а потім автоматично застосовує відповідне значення на основі поточної вибраної колірної схеми. Використовуючи цю функцію, ми можемо оновити наш CSS таким чином:

:root {
    color-scheme: light dark;
}

body {
    background-color: light-dark(#fff, #000);
    color: light-dark(#000, #fff);
}

Тепер, element’s colors will be automatically set based on the user’s system preferences. In “light” mode, the site will have a white background with black text, and in “dark” mode, it’ll have a black background with white text.

With Opus, however, the color scheme is set by the aforementioned “dark mode” toggle. Which meant that I had to make an additional tweak to the CSS:

:root {
    color-scheme: light dark;
}

html {
    color-scheme: light;

    &.darkMode {
        color-scheme: dark;
    }

}

body {
    background-color: light-dark(#fff, #000);
    color: light-dark(#000, #fff);
}

За замовчуванням встановлено колірну схему light. Але коли darkMode клас додається до element via JS, the color scheme is set to darkз light-dark функція все ще застосовує належні значення кольорів. Це означає, що більше немає «темних» версій селекторів CSS і дублюючого коду.

Навіть краще, light-dark функція також приймає змінні CSS та інші функції CSS, як color-mix на додаток до звичайних значень кольорів CSS, що робить його справді гнучким.

body {
    background-color: light-dark(var(--white), var(--black));
    color: light-dark(var(--black), var(--white));
}

body {
    background-color: light-dark(var(--gray), color-mix(in srgb, var(--black) 10%, var(--gray)));
    color: light-dark(color-mix(in srgb, var(--black) 10%, var(--gray)), var(--gray));
}

Таким чином, light-dark функція дійсно має деякі недоліки, як зазначено в CSS Tricks. Зокрема, ви обмежені лише двома кольоровими схемами відповідно до назви функції. Якщо ви хочете реалізувати третю схему (наприклад, схему «високого контрасту»), то light-dark функція вам тут не допоможе. Принаймні, не в його поточній формі, хоча W3C зараз розглядає шляхи розширення light-dark для обробки більш ніж двох схем кольорів, а також методів визначення властивостей, не пов’язаних із кольором.

Це сказав, light-dark все ще дуже зручний навіть у своїй поточній «обмеженій» формі. Це робить для вас багато важкої роботи, водночас дозволяючи вам писати чистіший і ефективніший CSS. Іншими словами, це точно те, що вам варто розглянути, коли наступного разу вам знадобиться запровадити темний режим для веб-сайту.