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:Dropdown in any file:JS either in overall_footer or in a custom .js file:The full CSS based on what you've posted: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’).
Here's a suggestion.
overall_header/head:
Code:
<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 %}Code:
{% 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 %}Code:
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);});Code:
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);}Statistics: Posted by cabot — Mon Apr 14, 2025 5:29 pm