Несколько лет назад я написал небольшой инструмент под названием «Мастер изменения цвета сайта», принцип которого заключается в настройке оттенка, насыщенности и яркости всех картинок на сайте. Однако им никто не пользуется... Может, потому, что не доработано, а может, это само по себе псевдотребование.
Благодаря развитию веб-стандартов и изменениям в стилях дизайна, фронтенд-разработчики постепенно перешли от восстановления дизайна с помощью диаграмм к восстановлению дизайна с помощью кода. Препроцессоры CSS также в определенной степени компенсируют отсутствие выразительных возможностей самого CSS.Element) использует базовое значение цвета в качестве элемента конфигурации для настройки пользователями, а остальные цвета регулируют яркость/насыщенность на их основе или смешиваются с другими цветами. Хотя невозможно изменить цвет одним щелчком мыши, можно без проблем изменить цветовое соответствие всего веб-сайта путем перестройки.
Помимо возможности настройки, это также упрощает поддержку кода. По сравнению с кодом CSS, наполненным различными цветовыми значениями, он может даже выражать некоторые идеи подбора цветов (или позволить мне, не разбирающемуся в дизайне, написать пользовательский интерфейс, который, по крайней мере, приемлем в подборе цветов).
Цветное мышление?
Следующий стиль взят из консоли управления Qiniu:
.btn.btn-primary {
color: #1989fa;
background-color: rgba(25,137,250,.04);
border-color: rgba(25,137,250,.4)
}
Посчитайте в уме (Shift + щелчок левой кнопкой мыши), и вы обнаружите, что три приведенных выше цвета имеют один и тот же цвет, но с разной прозрачностью.
Поскольку фон страницы чисто белый, регулировку прозрачности цвета можно рассматривать как регулировку яркости цвета. Хотя кнопка использует только «один цвет», она все равно выглядит гармонично.
Из этого можно увидеть, что идеи дизайна для общего состояния основной кнопки:
- Использовать # 1989FA в качестве базового цвета;
- Цвет текста с использованием базового цвета;
- Осветите 96% основного цвета в качестве цвета фона;
- Осветлите основной цвет на 60% в качестве цвета границы.
препроцессор?
Вышеуказанные требования легко выполняются с помощью препроцессора, такого как Sass:
$primary-color: #1989fa;
$text-color: $primary-color;
$background-color: scale-color($primary-color, $lightness: 96%);
$border-color: scale-color($primary-color, $lightness: 60%);
.btn-primary {
color: $text-color;
background-color: $background-color;
border-color: $border-color;
}
Sass оценивает выражение во время компиляции, создавая следующий код CSS:
.btn-primary {
color: #1989fa;
background-color: #f6faff;
border-color: #a3d0fd;
}
Однако использование прекомпилятора означает сборку — всегда найдутся люди, которым не нравится процесс «сборки» или которые предпочитают более «родное» решение.
Итак, можно ли в какой-то степени добиться такого эффекта с помощью чистого CSS? Ответ — да, в примере с консолью управления Qiniu для достижения эффекта увеличения яркости используется прозрачность. Проблема в том, что значения цвета в нем появляются многократно, а ремонтопригодность все равно не высока.
CSS-переменные
CSS-переменныеЭто экспериментальная технология, но большинство современных браузеров уже поддерживают ее, поэтому, если ваш веб-сайт предназначен для пользователей, которые в основном используют современные браузеры, вы можете рассмотреть возможность использования этой технологии. Следующие попытки использовать эту технику для описания Цветовая схема пользовательского интерфейса, написание чистого CSS, который легче поддерживать.
Я не буду вдаваться в детали переменных CSS, вы можете ознакомиться с MDN и соответствующими спецификациями, если вам интересно. Но не беспокойтесь, даже если вы мало что знаете о переменных CSS, это не имеет значения, позже при использовании переменных CSS будут некоторые простые пояснения.
Я собираюсь написать страницу в качестве примера.
Соответствие цветам
приятно для глаз, вы можете начать сопоставление цветов. С цветовой темой сопоставление цветов будет проще: вам нужно выбрать всего 3–4 цвета, чтобы создать хороший пользовательский интерфейс.
Цвет фона и цвет текста
Чтобы обеспечить удобочитаемость, просто выберите два цвета с наибольшей разницей в контрасте и яркости. В этой цветовой теме, естественно, первые два черно-белых — #323a40 и #e5eef4. Я хочу сделать темную цветовую схему, поэтому выбираю первую в качестве цвета фона, а вторую — в качестве цвета текста.
:root {
--background-color: #323a40;
--text-color: #e5eef4;
}
Переменные CSS начинаются с двух дефисов, и определение переменных CSS аналогично настройке свойств. Приведенный выше код определяет две переменные CSS --background-color и --text-color. Селектор :root выбирает корневой узел (то есть ) Отличие от html в том, что он имеет более высокий приоритет и подходит для определения глобальных переменных CSS.
html {
background: var(--background-color);
color: var(--text-color);
}
Чтобы сослаться на определенную переменную CSS, также просто используйте функцию var. Таким образом задается цвет фона и цвет текста страницы.
основной цвет
Затем выберите доминирующий цвет.Основные цвета часто используются в гиперссылках, домашних кнопках и логотипах. Чтобы они выделялись, выберите цвет, который контрастирует как с цветом фона, так и с цветом текста. Здесь я выбираю третий цвет #37b0c0 в цветовой теме.
:root {
--background-color: #323a40;
--text-color: #e5eef4;
--primary-color: #37b0c0;
--input-size: 30px;
--input-padding-horizontal: 10px;
--button-border-radius: 4px;
}
button {
background: none;
border: 1px solid var(--primary-color);
border-radius: var(--button-border-radius);
color: var(--primary-color);
height: var(--input-size);
padding-left: var(--input-padding-horizontal);
padding-right: var(--input-padding-horizontal);
transition: all .15s ease;
}
button:hover {
background: var(--primary-color);
color: var(--background-color);
cursor: pointer;
}
Мало того, что переменные CSS могут определять значения цвета, код выше также использует переменные CSS для определения размера кнопки, заполнения и радиуса границы.
прозрачность
В CSS нет функции цвета, такой как затемнение и осветление в Sass.Вы можете рассмотреть возможность использования прозрачности для достижения эффекта углубления или осветления в определенной степени. К сожалению, в CSS также нет функции управления прозрачностью цвета. Мы можем определить только три компонента цвета по отдельности:
:root {
--background-color-r: 51;
--background-color-g: 59;
--background-color-b: 64;
--background-color: rgb(
var(--background-color-r),
var(--background-color-g),
var(--background-color-b)
);
--text-color-r: 229;
--text-color-g: 238;
--text-color-b: 244;
--text-color: rgb(
var(--text-color-r),
var(--text-color-g),
var(--text-color-b)
);
--primary-color-r: 62;
--primary-color-g: 176;
--primary-color-b: 190;
--primary-color: rgb(
var(--primary-color-r),
var(--primary-color-g),
var(--primary-color-b)
);
--input-size: 30px;
--input-padding-horizontal: 10px;
--button-border-radius: 4px;
}
Да, это трудно определить таким образом. Однако каждое значение цвета будет отображаться только один раз.
input, button {
--border-color: rgba(
var(--text-color-r),
var(--text-color-g),
var(--text-color-b),
var(--border-color-alpha, .3)
);
border: 1px solid var(--border-color);
}
Среди них var(--border-color-alpha, .3) относится к значению переменной --border-color-alpha.Если переменная не определена или недействительна, она вернется к .3. Таким образом, цвет границы ввода и кнопки станет цветом фона, смешанным с 30% цвета текста.
input:focus {
--border-color-alpha: .6;
}
Когда фокус находится на вводе, значение --border-color-alpha станет равным 0,6, а цвет границы станет цветом фона, смешанным с 60% цвета текста.
Я использовал тот же метод, чтобы написать дружественный заголовок.
Дневное время
Менеджер продукта пришел ко мне и сказал, что большинство программистов думают, что страницы, которые я делаю дружелюбным, но несколько программистов совы без ночных игр считают, что эта тема слишком ослепила в дневное время, и надеется иметь «дневную тему».
К счастью, JavaScript может устанавливать значения переменных CSS, а дневной теме нужно только поменять местами цвет фона и цвет текста.
const themes = [
{
name: 'dark',
scheme: {
'--background-color-r': 51,
'--background-color-g': 59,
'--background-color-b': 64,
'--text-color-r': 229,
'--text-color-g': 238,
'--text-color-b': 244
}
},
{
name: 'light',
scheme: {
'--background-color-r': 229,
'--background-color-g': 238,
'--background-color-b': 244,
'--text-color-r': 51,
'--text-color-g': 59,
'--text-color-b': 64
}
}
];
let currentTheme = 0;
window.nextTheme = function () {
currentTheme = (currentTheme + 1) % themes.length;
const theme = themes[currentTheme];
Object.keys(theme.scheme).forEach(name => {
const value = theme.scheme[name];
document.documentElement.style.setProperty(name, value);
});
}
смешение цветов
Прозрачность не может решить все проблемы.Если вам нужно смешать с другим цветом (просто смешать с черным и белым, вы можете рассмотреть возможность использования модели HSL) или если вам нужны градиенты, вы можете использовать только некоторые «черные технологии».
Например, чтобы установить цвет фона на 50% цвета текста + 50% основного цвета:
... {
--base-color: var(--text-color);
--mix-color: rgba(
var(--primary-color-r),
var(--primary-color-g),
var(--primary-color-b),
.5
);
background-color: var(--base-color);
background-image: linear-gradient(
to bottom,
var(--mix-color),
var(--mix-color)
);
}
Известные вопросы
Помимо того, что Safari менее удобен в использовании, чем препроцессоры CSS, в некоторых случаях он не работает. Например
:root {
--r: 255;
--g: 0;
--b: 0;
}
.foo {
border: 10px solid
rgba(var(--r), var(--g), var(--b), .5);
}
В Safari нижняя граница отображается как currentColor вместо полупрозрачного красного.
Решение очень простое, просто определите внутри еще одну переменную CSS.
Сделай сам на JSFiddle(Пожалуйста, сравните производительность в Chrome и Safari)