You can iterate over the array in the head to get the colours and simplify the style sheet as much as possible by using a single CSS variable.
Here's a suggestion.
overall_header/head:
Code: Select all
<script>if (localStorage.prosilverColors) document.documentElement.setAttribute("data-color", localStorage.prosilverColors);</script>
{% DEFINE COLORS = ['default', 'Crimson', 'PaleVioletRed', 'MediumOrchid', 'BlueViolet', 'SlateBlue', 'RoyalBlue', 'DodgerBlue', 'DarkTurquoise', 'DarkCyan', 'LimeGreen', 'YellowGreen', 'Gold', 'Orange', 'Coral', 'Gray'] %}
<style>
{% for color in definition.COLORS %}
{% if color != 'default' %}
[data-color="{{ color }}"] { --primary-color: {{ color }}; }
.switch-{{ color }} { background-color: {{ color }}; }
{% endif %}
{% endfor %}
Dropdown in any file:
Code: Select all
{% if S_USER_LOGGED_IN and not S_IS_BOT %}
<li class="rightside" data-skip-responsive="true">
<div class="dropdown-container">
<a href="#" class="dropdown-trigger" role="menuitem" title="{{ lang('COLOUR_SWATCH') }}">
<i class="icon fa-paint-brush fa-fw" aria-hidden="true"></i><span class="sr-only">{{ lang('COLOUR_SWATCH') }}</span>
</a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<div class="dropdown-contents" role="menu">
<div id="variant_switch" class="navbar-header" role="contentinfo">
{% for color in definition.COLORS %}
<button class="switch-{{ color }}" data-colorselect="{{ color }}" title="{{ color }}"><span class="sr-only">{{ color }}</span></button>
{% endfor %}
</div>
</div>
</div>
</div>
</li>
{% endif %}
JS either in overall_footer or in a custom .js file:
Code: Select all
const colorButtons = $("[data-colorselect]");
function setColor(color) {
if (color === "default") {
$("html").removeAttr("data-color");
localStorage.removeItem("prosilverColors");
} else {
$("html").attr("data-color", color);
localStorage.setItem("prosilverColors", color);
}
updateActiveColor(color);
}
function updateActiveColor(currentColor) {
colorButtons.each(function () {
$(this).toggleClass("activecolor", $(this).data("colorselect") === currentColor);
});
}
const savedColor = localStorage.getItem("prosilverColors") || "default";
setColor(savedColor);
colorButtons.on("click", function () {
const selectedColor = $(this).data("colorselect");
setColor(selectedColor);
});
The full CSS based on what you've posted:
Code: Select all
a,
.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3,
.pagination li.active span,
.tabs .activetab > a,
.tabs .activetab > a:hover {
color: var(--primary-color, #105289);
}
html,
body,
.badge-messages {
background-color: var(--primary-color, #105289);
}
.quick-icon .qi-line {
border-top: 2px solid var(--primary-color, #105289);
}
#variant_switch {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
#variant_switch button {
display: inline-block;
width: 20px;
height: 20px;
margin: 0.5em;
border: 0;
border-radius: 3px;
}
.switch-default { background-color: #105289; }
#variant_switch button:hover,
#variant_switch button:focus {
opacity: 0.5;
}
#variant_switch .activecolor {
outline: thick double var(--primary-color, #105289);
}
From now on, all you have to do is add or remove a color in the array and the rest will follow automatically (don't remove ‘default’).
Слава Україні! 
