Как изменить цвет объекта в псевдоклассе?

Question

iredoff @iredoff

Как изменить цвет объекта в псевдоклассе?

Всем привет. В общем, я заинтересовался написаний обои для Wallpaper Engine. Хотелось бы сделать минималистичные обои на html, css, js. Но, в конце разработке, столкнулся с проблемой. Хочу сделать чтобы обои пользователь мог кастомизировать. Но.. Главная деталь в обои имеет анимацию, и все ее стили написаны в псевдоклассах

.<div>:before, 
.<div>:after {
   [...]
}

Скрипт с настойкой для Wallpaper Engine, я уже написал. Но возник вопрос, как мне изменить стили в псевдаклассах?

.heart {
    position: relative;
    width: 100px;
    height: 90px;
    animation: heartbeat 2s infinite;

    opacity: 50%;
}

.heart::before,
.heart::after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;

    background: red; /*  тут необходимо устанавливать значение которое указал пользователь через саму программу. */
    box-shadow: 0 0 15px red; /*  тоже самое ^^^ */

    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

В интернете нашел код где пользователи использовали attr() с ним у меня ничего не получилось. Все бы ничего, если бы пользователи могли бы сами выбрать цвета из доступных, но как по мне это бред, и хочется сделать все по красоте, чтобы пользователь через палитру сам устанавливал цвета.

<body>

    <div class="parent">
        <div class="block">
            <div class="heart" id="logo"></div>   
        </div>
    </div>

    <script>
        window.wallpaperPropertyListener = {
            applyUserProperties: function(properties) {
                if (properties.schemecolor) {
                    if (properties.schemecolor.value) {
                        var c = properties.schemecolor.value.split(' ').map(function(c) {
                            return Math.ceil(c * 255)
                        });

                        document.body.style.background = c;
                        // "c" - цвет который пользователь выбрал в "палитре".

                        // тут необходимо изменять стили элемента с айди "logo".
                    }
                };
            }
        }
    </script>
</body>

Есть ли адекватный способ изменить стили в псевдаклассах? На чистом js, есть ли какие-либо адекватные костыли?

Заранее спасибо за ответы. ~