[localhost2020]

не понимаю.

Код который я дал, работает так:

#opops.theme--gray, #opopops.theme--gray { background-color: #95a5a6; }
#opops.theme--red, #opopops.theme--red { background-color: #e74c3c; }
#opops.theme--green, #opopops.theme--green { background-color: #2ecc71; }
#opops.theme--blue, #opopops.theme--blue { background-color: #3498db; }

каждому цвету можно сделать стили по разному.

А в коде который вы мне дали как работает CSS?
Как сделать для какого-то класса и для конкретного цвета.... Стили по разному.
Для ясности, вот пример:
Берем этот код:

<button class="gray" data-theme="gray">GRAY</button>

и Class

<div class="opops">Testing</div>

Вот это Class .opops сделать стили под кнопку GRAY где можно будет сделать для неё:

background: #fff; border: 4px solid blue; color: red;

А для Кнопки RED и тоже самый Class .opops сделать другой стили.
Думаю понятно написал.