I want to change a specific section background based on selected variant in Shopify. I tried it in many ways, right now i was using this code with metafields:

{% assign variant.metafields.custom.product_color.value = "product_color" %}
    {% case product_color %}
   {% when product_color == 'olive' %}
   .product-page--top-panel {background: #b4b999;} 
   {% when product_color == 'pink' %}
     .product-page--top-panel {background: #e4b5bd;}
{% when product_color == 'light-blue' %}
     .product-page--top-panel {background: #aabac7;}
   {% endcase %}

The solution is not working as i want it to be since the class gets overwritten by the colors. I'm not familiar with jquery or javascript that much so i couldn't fix the problem.

How can i make this work?