Обработка системных цветов на JavaScript
Обработка системных цветов на JavaScript
Еще со времен CSS2 появилась возможность использовать в качестве стиля цвета так называемые системные цвета, то есть значения из текущей цветовой схемы пользователя. Таким образом можно оформлять свои web-приложения, чтобы они не выбивались из привычной пользователю цветовой гаммы.
Ниже приведена таблица с названиями системных цветов. Цвета не фиксированные и могут отличаться даже в разных браузерах на одном компьютере.
| Название цвета | Пример | Описание |
|---|---|---|
| ActiveBorder | граница активного окна | |
| ActiveCaption | заголовок активного окна | |
| AppWorkspace | фоновый цвет интерфейса нескольких документов | |
| Background | фоновый цвет рабочего стола | |
| ButtonFace | лицевой цвет трехмерных элементов | |
| ButtonHighlight | темная тень для трехмерных элементов (для краев, обращенных в сторону от источника света) | |
| ButtonShadow | цвет тени для трехмерных элементов | |
| ButtonText | текст на кнопках | |
| CaptionText | текст в заголовке, поле размера и поле стрелки прокрутки | |
| GrayText | отключенный текст | |
| Highlight | выделенный элемент в элементе управления | |
| HighlightText | выделенный текст в элементе управления | |
| InactiveBorder | граница неактивного окна | |
| InactiveCaption | заголовок неактивного окна | |
| InactiveCaptionText | цвет текста в неактивном заголовке | |
| InfoBackground | фоновый цвет для элементов всплывающей подсказки | |
| InfoText | цвет текста для элементов всплывающей подсказки | |
| Menu | фоновый цвет меню | |
| MenuText | текст в меню | |
| Scrollbar | серая область полосы прокрутки | |
| ThreeDDarkShadow | темная тень для трехмерных элементов | |
| ThreeDFace | лицевой цвет трехмерных элементов | |
| ThreeDHighlight | цвет выделения для трехмерных элементов | |
| ThreeDLightShadow | светлый цвет для трехмерных элементов (для краев, обращенных к источнику света) | |
| ThreeDShadow | темная тень для трехмерных элементов | |
| Window | фоновый цвет окна | |
| WindowFrame | рамка окна | |
| WindowText | текст в окнах |
И вот мы плавно подошли к задаче. Если цвета отличаются на разных устройствах, то каким образом можно определить, чему же соответствует тот или иной системный цвет в текущий момент времени? Сделать это можно при помощи вот такого скрипта на JavaScript:
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- function system_color_to_hex(color_name) {
- var div=document.createElement('div');
- div.style.display='none';
- div.style.color=color_name;
- document.body.appendChild(div);
- var styles=window.getComputedStyle(div);
- for (var hex='',
- color=styles.color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/),
- i=1; i<4; i++) {
- hex+=('0'+parseInt(color[i]).toString(16)).slice(-2).toUpperCase();
- }
- hex='#'+hex;
- document.body.removeChild(div);
- return hex;
- }
- </script>
Code (JavaScript) : Убрать нумерацию
- console.log(system_color_to_hex('ButtonHighlight'));
- // #F0F0F0 (значение может быть другим)
- console.log(system_color_to_hex('rgb(100, 69, 12)'));
- // #64450C
- console.log(system_color_to_hex('DarkSlateGrey'));
- // #2F4F4F
Просмотров: 399 | Комментариев: 1
Комментарии
Отзывы посетителей сайта о статье
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 37,484 раза
Поблагодарили 37,484 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 350 |
 |
 |
Жалко, тысячи (скорее, миллионы) сайтов забили на это, ссылаясь на пользователей Android или iOS.
На некоторых сайтах забыли даже про пару 'ButtonFace'|'ThreeDFace'|'ThreeDLightShadow' + 'ButtonText' — добавили поддержку "высокого контраста" так, что при его включении найти хоть какие-нибудь нужные кнопки становится гораздо труднее :))