Как равномерно темные цвета?

Question

Я показываю два типа текстов: один в ярком цвете (скажем, для сегодняшних дел), а другой - в более темном оттенке (скажем, для того, чтобы что-то делать завтра). Решение, которое я использую, заключается в назначении соответствующим контейнерам div класса day и night, каждый из которых несет соответствующий цвет.

Это прекрасно подходит для двоичного случая двух цветных цветов.

Теперь я хочу добавить яркие значки (скажем, категории) для каждого из этих информационных текстов и хотел бы значки, чтобы отразить «яркую»/«темную» дихотомию: когда что-то несет класс today, его значок должен быть более ярким (и темнее для класса tomorrow).

Я могу, конечно, создать два класса на значок: cooking-today, cooking-tomorrow, important-today, important-tomorrow и т.д. - каждый из которых имеет ручную работу цвет. Это вряд ли масштабируемо, и я бы предпочел, чтобы «потемнение» выполнялось автоматически, простым добавлением класса (который изменил бы все цвета на более темную версию).

Я не знаю, как подойти к этому, так как я считаю, что цвет должен быть жестко запрограммирован (в том смысле, что определение CSS color: должно быть конкретным и не может вычисляться «на лету» на основе существования другого класса). Мои знания о том, что HTML5/CSS/JS являются минимальными, я был бы рад ошибиться.

Answer 1

OK, это немного откладывание, если вы еще не использовали Sass, но посмотрите at my example on Codepen. Sass - отличный инструмент для «программной» настройки цвета таким образом, используя базовый цвет и выводя требуемые классы. Однако списки и циклы - довольно продвинутые концепции.

Codepen пример вывода в виде прямой вверх HTML/CSS

.event--cooking { 
 
    color: yellow; 
 
    background-color: #333; 
 
    border: 1px solid #e6e600; 
 
} 
 
.event--cooking.important { 
 
    color: #b3b300; 
 
} 
 
.event--cooking.tomorrow { 
 
    color: olive; 
 
} 
 

 
.event--sewing { 
 
    color: grey; 
 
    background-color: #333; 
 
    border: 1px solid #737373; 
 
} 
 
.event--sewing.important { 
 
    color: #5a5a5a; 
 
} 
 
.event--sewing.tomorrow { 
 
    color: #404040; 
 
}

<button type="button" class="event--cooking today">Today</button> 
 
<button type="button" class="event--cooking today important">Important Today</button> 
 
<button type="button" class="event--cooking tomorrow important">Important Tomorrow</button>